XAMLリストビューの列の幅をバインド

Question

私はビジュアルスタジオのツール： "データバインディングを作成"を選択し、ElementNameと私のListView_Originalを選択するツールが見つかりましたバインディングで、私の2つのリストビューで同じ列の幅を取得するloockingですプロパティと私はとにかくColumnDefinitionを見つけたカント：

私は結果なし「{一方向=バインディング幅、のElementName = ListView_FP、ソース= COLUMN_NUMBER、モード}」幅=を使用しようとしていますが、私は、私は近くだと思います溶液。

他のリストビューの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

x：DataTemplateで使用されるNameプロパティは、外部では使用できません。したがって、ColumnDefinition WidthをListViewのDataTemplatesでアクセス可能な値にバインドする必要があります。

バインドを使用して両方のColumnDefinitionsで同じ動的な幅を取得できるコードに基づいてサンプルを作成しました。

はまず、私はこれは、リストビューのための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> 

その後、私のリストビュー：

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

最後の部分は、ColumnDefinition幅を動的に変更するSameWidthプロパティにバインドされたSliderです。

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

希望すると、これが役立ちます。