Listview 列的 XAML 绑定宽度

Question

我希望通过绑定在我的两个 ListView 上获得相同的列宽，目前我找到了 Visual Studio 的工具：“创建数据绑定”并选择 ElementName 和我的 ListView_Original 但里面的属性太多，我找不到 ColumnDefinition无论如何：

我正在尝试使用 Width="{Binding Width, ElementName=ListView_FP, Source=Column_Number, Mode=OneWay}" 没有结果，但我想我已经接近解决方案了。

绑定 ColumnDefinition 宽度的正确方法是什么 其他列表视图。

这是原始列​​表视图：

<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

DataTemplate 中使用的 x:Name 属性在其外部不可用，因此您必须将 ColumnDefinition Width 绑定到一个可由 ListView 的 DataTemplate 访问的值。

我根据您的代码创建了一个示例，该示例能够使用绑定在两个 ColumnDefinition 中获得相同的动态宽度。

首先，我有这个用于 ListViews 的共享 DataTemplate：

<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 属性的 Slider，它可以动态更改 ColumnDefinition 宽度。

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

希望对您有所帮助！