XAML Binding Width of Listview Column - xaml

Question

I am loocking to get the same columns width on my two ListViews with binding, currently I found the tool of visual studio: "Create data Binding" and selecting ElementName and my ListView_Original but inside are too many properties and I cant found ColumnDefinition anyway:
I am trying using Width="{Binding Width, ElementName=ListView_FP, Source=Column_Number, Mode=OneWay}" without results but I guess I am near the solution.
What is the correct way to do a binding width of the ColumnDefinition
of other Listview.
This is the original listview:
<ListView x:Name="ListView_Original" MaxHeight="400" HorizontalAlignment="Stretch" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1" Background="WhiteSmoke" SelectionChanged="ListView_Original_SelectionChanged" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Padding="0" Margin="0" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" x:name="Column_Number"/>
<ColumnDefinition Width="*" x:name="Column_Name"/>
<ColumnDefinition Width="*" x:name="Column_Skill"//>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<TextBox Grid.Column="0" TextWrapping="Wrap" BorderBrush="Black" IsReadOnly="True" TextAlignment="Left" IsHitTestVisible="False" x:Name="TextBox_Number" Text="{Binding Path=Number}"/>
<TextBox Grid.Column="1" TextWrapping="Wrap" BorderBrush="Black" IsReadOnly="True" TextAlignment="Center" IsHitTestVisible="False" x:Name="TextBox_Name" Text="{Binding Path=Name}"/>
<TextBox Grid.Column="2" TextWrapping="Wrap" BorderBrush="Black" IsReadOnly="True" TextAlignment="Center" IsHitTestVisible="False" x:Name="TextBox_Skill" Text="{Binding Path=Skill}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
And this is the listview what its columns should do binding:
<ListView x:Name="ListView_Copy" MaxHeight="400" HorizontalAlignment="Stretch" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1" Background="WhiteSmoke" SelectionChanged="ListView_Copy_SelectionChanged" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid Padding="0" Margin="0" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding Width, ElementName=ListView_FP, Source=Column_Number, Mode=OneWay}"/>
<ColumnDefinition Width="{Binding Width, ElementName=ListView_FP, Source=Column_Name, Mode=OneWay}"/>
<ColumnDefinition Width="{Binding Width, ElementName=ListView_FP, Source=Column_Skill, Mode=OneWay}"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<TextBox Grid.Column="0" TextWrapping="Wrap" BorderBrush="Black" IsReadOnly="True" TextAlignment="Left" IsHitTestVisible="False" x:Name="TextBox_Number" Text="{Binding Path=Number}"/>
<TextBox Grid.Column="1" TextWrapping="Wrap" BorderBrush="Black" IsReadOnly="True" TextAlignment="Center" IsHitTestVisible="False" x:Name="TextBox_Name" Text="{Binding Path=Name}"/>
<TextBox Grid.Column="2" TextWrapping="Wrap" BorderBrush="Black" IsReadOnly="True" TextAlignment="Center" IsHitTestVisible="False" x:Name="TextBox_Skill" Text="{Binding Path=Skill}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Any help is appreciated.

Answer 1

x:Name property used in a DataTemplate are not available outside of it, so you have to going to bind the ColumnDefinition Width to a value that can be accesible by both ListView's DataTemplates.
I've created a sample based on your code that was able to get the same, dynamic width in both ColumnDefinitions using binding.
First, I have this shared DataTemplate for ListViews:
<Page.Resources>
<DataTemplate x:Key="SimpleTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="MainDefinition" Width="{Binding ElementName=MainPageName, Path=SameWidth, Converter={StaticResource DoubleToGridLength}, Mode=OneWay}"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<SymbolIcon Symbol="Accept" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<TextBlock Grid.Column="1" Text="{Binding}" VerticalAlignment="Center" FontSize="16"/>
</Grid>
</DataTemplate>
</Page.Resources>
Then, my ListViews:
<ListView Grid.Row="1"
ItemsSource="{x:Bind ListOneItems}"
ItemTemplate="{StaticResource SimpleTemplate}"/>
<ListView Grid.Row="1"
Grid.Column="2"
ItemsSource="{x:Bind ListTwoItems}"
ItemTemplate="{StaticResource SimpleTemplate}"/>
And the Page's code-behind:
private double _sameWidth;
public double SameWidth
{
get { return _sameWidth; }
set { _sameWidth = value; OnPropertyChanged(); }
}
public ObservableCollection<string> ListOneItems { get; set; }
public ObservableCollection<string> ListTwoItems { get; set; }
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
var text =
#"Fugiat laborum cupidatat labore ad dolor officia Lorem ipsum cillum cupidatat dolore enim. Irure aliqua tempor non cupidatat est excepteur nisi labore magna nisi in consequat. Minim ex magna nulla deserunt ad. Proident pariatur deserunt ex voluptate proident irure. Dolore cillum dolor proident eu mollit amet nisi non velit sint.";
var listOneWords = text.Split(' ').ToList().Take(10);
var listTwoWords = text.Split(' ').ToList().Skip(10).Take(10);
ListOneItems = new ObservableCollection<string>(listOneWords);
ListTwoItems = new ObservableCollection<string>(listTwoWords);
SameWidth = 48;
}
Also, you would need the DoubleToGridLengthConverter:
public class DoubleToGridLengthConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
var width = (double) value;
var length = new GridLength(width);
return length;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new System.NotImplementedException();
}
}
The final part is a Slider binded to SameWidth property that change the ColumnDefinition Width dynamically.
<Slider x:Name="MainSlider" Grid.ColumnSpan="2"
Minimum="48"
Maximum="120"
Value="{x:Bind SameWidth, Mode=TwoWay}"/>
Hope this helps you!