XAML Binding Width столбца списка просмотра

Question

Я блокирую, чтобы получить одинаковую ширину столбцов в моих двух ListViews с привязкой, в настоящее время я нашел инструмент Visual Studio: "Создать привязку данных" и выбрал ElementName и мой ListView_Original, но внутри слишком много свойств, и я все равно не могу найти ColumnDefinition:

Я пытаюсь использовать Width="{Binding Width, ElementName=ListView_FP, Source=Column_Number, Mode=OneWay}" без результатов, но я думаю, что я близок к решению.

Как правильно сделать привязку ширины ColumnDefinition другого 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>

И это список, что его столбцы должны связывать:

<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>

Любая помощь приветствуется.

Answer 1

Свойство x:Name, используемое в DataTemplate, недоступно за его пределами, поэтому вам необходимо связать ColumnDefinition Width со значением, которое может быть доступно обоим DataTemplates ListView.

Я создал пример, основанный на вашем коде, который смог получить одинаковую динамическую ширину в обоих столбцах с использованием привязки.

Во-первых, у меня есть этот общий DataTemplate для 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>

Затем мои 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}"/>

И код позади страницы:

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;
}

Также вам понадобится 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();
    }
}

Последняя часть - это слайдер, связанный со свойством SameWidth, которое динамически изменяет ширину ColumnDefinition.

<Slider x:Name="MainSlider" Grid.ColumnSpan="2"
            Minimum="48" 
            Maximum="120" 
            Value="{x:Bind SameWidth, Mode=TwoWay}"/>

Надеюсь, это поможет вам!