Binding columns and rows width in ListView

BitSmithy 1,751 Reputation points
2024-03-05T12:58:56.26+00:00

Hello,

I am trying to bind ListView items columns heights to ListView Header columns heights.

I typed such XAML, but it doesnt work. Is there any way to do my task?

I prefer x:Bind but Binding is acceptable too.


<ListView x:Name="lvLinks" Grid.Row="1" HorizontalAlignment="Stretch"                       HorizontalContentAlignment="Stretch"                       ItemContainerStyle="{StaticResource ListViewItemStretchStyle}"                   >
                 
<ListView.HeaderTemplate>                     	
<DataTemplate x:DataType="local:Link">                         		<StackPanel Orientation="Horizontal">

<!--I try to bind width of c1 element-->
<TextBlock x:Name="c1" Text="Is Working" Width="170"></TextBlock> 
                            
<TextBlock Text="Link" HorizontalAlignment="Stretch"></TextBlock>                             <TextBlock Text="Error message" HorizontalAlignment="Stretch"></TextBlock>                         	
</StackPanel>                     	
</DataTemplate>                 
</ListView.HeaderTemplate>                  

<ListView.ItemTemplate>                     	
<DataTemplate x:DataType="local:Link">                         <StackPanel Orientation="Horizontal">                             <CheckBox


<!--I try to bind width of c1 to this element-->                                                                   		Width="{Binding ElementName=c1, Path=Width}"  
                                                                		IsChecked="{x:Bind IsWorking, Mode=OneWay}"                                   Style="{StaticResource CheckBoxStyle}"                                 IsEnabled="False"                                 ></CheckBox>                             <TextBlock x:Name="tblLinkInfo" Text="i" MinWidth="30"                                                                               PointerPressed="tblLinkInfo_PointerPressed"                                        ></TextBlock>                             <TextBox Text="{x:Bind uriString, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"></TextBox>                             <TextBox Text="{x:Bind ErrorMessage, Mode=OneWay}"                                      ></TextBox>                         
</StackPanel>                     
</DataTemplate>                 
</ListView.ItemTemplate>             
</ListView> 
Universal Windows Platform (UWP)
0 comments No comments
{count} votes

Accepted answer
  1. Junjie Zhu - MSFT 14,751 Reputation points Microsoft Vendor
    2024-03-06T05:27:33.73+00:00

    Hi @BitSmithy ,

    Welcome to Microsoft Q&A!

    According to the remark in Binding.ElementName, you cannot get the width of c1 in your <ListView.ItemTemplate>.

    When you set this property, the specified value must refer to an element in one of the following locations:

    • The current XAML namescope.
    • The XAML namescope of the templated parent if the binding target is in a data template or control template. Because of this restriction, you cannot use the ElementName property to bind to elements that are not created by using XAML. To bind to elements created programmatically, use the Source property instead. Source, RelativeSource, and ElementName are mutually exclusive in a binding. If you have set one of these attributes, then setting either of the other two in a binding (through XAML or through code) will cause an exception.

    If you want to bind the width of c1 in Xaml, It is recommended to use <ListView.Header> instead of placing c1 in <DataTemplate>.

    <ListView.Header>
        <StackPanel Orientation="Horizontal">
            <!--I try to bind width of c1 element-->
            <TextBlock x:Name="c1" Text="Is Working" Width="170"></TextBlock>
            <TextBlock Text="Link" HorizontalAlignment="Stretch"></TextBlock>
            <TextBlock Text="Error message" HorizontalAlignment="Stretch"></TextBlock>
        </StackPanel>
    </ListView.Header>
    

    Thank you.


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

0 additional answers

Sort by: Most helpful