自動サイズ調整列（UWP）

Question

私はこの例のようにテキストと画像をリストビューに私の項目を整理したいと思います：

• 最初の列が自動的に行われますので、最も広い要素に展開されます。
• 残りのスペースを埋めるために、2番目の列が展開されます。

どのように私は自動列を作ることができますか...またはそれをシミュレートしますか？

明らかに、このレイアウトの困難な部分は、さまざまな要素が他の要素の幅に応じて幅を持つということです。

EDIT：WPInfoの答え@使用して、私はこれを試してみた：

XAML

<Page.DataContext> 
    <local:MainViewModel></local:MainViewModel> 
</Page.DataContext> 
<ListView ItemsSource="{Binding Items}"> 
    <ListView.ItemContainerStyle> 
     <Style TargetType="ListViewItem"> 
      <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
     </Style> 
    </ListView.ItemContainerStyle> 
    <ListView.ItemTemplate> 
     <DataTemplate> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="Auto" /> 
        <ColumnDefinition Width="*" /> 
       </Grid.ColumnDefinitions> 
       <TextBlock Text="{Binding}" /> 
       <Border Background="CornflowerBlue" Grid.Column="1" /> 
      </Grid> 
     </DataTemplate> 
    </ListView.ItemTemplate> 

</ListView> 

CODE：

public class MainViewModel 
{ 
    public IList<string> Items { get; } 

    public MainViewModel() 
    { 
     Items = new List<string>() 
     { 
      "ABC", 
      "ABCDEF", 
      "ABCDEFGHI", 
     }; 
    } 
} 

期待される結果は次の通りであった：

しかし、実際の結果は：

目標である最初の列は内部の最も広い素子として広くすることそれ。

Answer 1

は、ListViewコントロールのためItemContainerStyleプロパティを設定してみてください：

 <ListView.ItemContainerStyle> 
      <Style TargetType="ListViewItem"> 
       <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
      </Style> 
     </ListView.ItemContainerStyle> 

次に、あなたのListViewは、次のようになります。その後

<ListView x:Name="list"> 
     <ListView.ItemContainerStyle> 
      <Style TargetType="ListViewItem"> 
       <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
      </Style> 
     </ListView.ItemContainerStyle> 
     <ListView.ItemTemplate> 
      <DataTemplate> 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="Auto" /> 
         <ColumnDefinition Width="*" /> 
        </Grid.ColumnDefinitions> 
        <TextBlock ... /> 
        <Image Grid.Column="1" HorizontalAlignment="Right" ... /> 
       </Grid> 
      </DataTemplate> 
     </ListView.ItemTemplate> 
    </ListView> 

を、あなたのListViewのHorizontalAlignmentプロパティの適切な値を設定することができます。

Answer 2

問題は、ListViewの子どもたちはお互いについて何も知らないということです。すべてのアイテムに最も長いテキストアイテムが何であるかを知らせる簡単なトリックはないので、より複雑な解決策が必要です。以下の作品。これは、文字列リストからの最大項目に基づいて固定TextBlockサイズを決定し、フォントサイズが変更されると更新されます。明らかに、テキストまたはイメージのいずれかの固定列サイズを決定した場合、サンプルコードに似たもっと単純なソリューションが得られますが、すでにわかっていると思います。

XAML：

<Page.DataContext> 
    <local:MainViewModel></local:MainViewModel> 
</Page.DataContext> 
<ListView ItemsSource="{Binding Items}"> 
    <ListView.ItemContainerStyle> 
     <Style TargetType="ListViewItem"> 
      <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
     </Style> 
    </ListView.ItemContainerStyle> 
    <ListView.ItemTemplate> 
     <DataTemplate> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="Auto" /> 
        <ColumnDefinition Width="*" /> 
       </Grid.ColumnDefinitions> 
       <TextBlock Text="{Binding MyText, Mode=OneWay}" FontSize="{Binding ItemFontSize, Mode=OneWay}" Width="{Binding TextWidth, Mode=OneWay}" /> 
       <Border Background="CornflowerBlue" Grid.Column="1" /> 
      </Grid> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView> 

C＃のViewModel

public class MainViewModel : INotifyPropertyChanged 
    { 
     public ObservableCollection<MyListViewItemsClass> Items { get; set; } 

     private List<string> ItemsFromModel; 

     private int _myFontSize; 
     public int MyFontSize 
     { 
      get { return _myFontSize; } 
      set 
      { 
       if (value != _myFontSize) 
       { 
        _myFontSize = value; 
        OnPropertyChanged("MyFontSize"); 
        // Font size changed, need to refresh ListView items 
        LoadRefreshMyListViewItems(); 
       } 
      } 
     } 

     public MainViewModel() 
     { 
      // set default font size 
      _myFontSize = 20; 

      // example data 
      ItemsFromModel = new List<string>() 
     { 
      "ABC", 
      "ABCDEF", 
      "ABCDEFGHI", 
     }; 

      LoadRefreshMyListViewItems(); 
     } 

     public void LoadRefreshMyListViewItems() 
     { 
      int itemMaxTextLength = 0; 
      foreach (var modelItem in ItemsFromModel) 
      { 
       if (modelItem.Length > itemMaxTextLength) { itemMaxTextLength = modelItem.Length; } 
      } 
      Items = new ObservableCollection<MyListViewItemsClass>(); 
      // Convert points to pixels, multiply by max character length to determine fixed textblock width 
      // This assumes 96 DPI. Search for how to grab system DPI in C# there are answers on SO. 
      double width = MyFontSize * 0.75 * itemMaxTextLength; 
      foreach (var itemFromModel in ItemsFromModel) 
      { 
       var item = new MyListViewItemsClass(); 
       item.MyText = itemFromModel; 
       item.ItemFontSize = MyFontSize; 
       item.TextWidth = width; 
       Items.Add(item); 
      } 
      OnPropertyChanged("Items"); 
     } 

     public class MyListViewItemsClass 
     { 
      public string MyText { get; set; } 
      public int ItemFontSize { get; set; } 
      public double TextWidth { get; set; } 
     } 

     protected void OnPropertyChanged(PropertyChangedEventArgs e) 
     { 
      PropertyChangedEventHandler handler = PropertyChanged; 
      if (handler != null) 
       handler(this, e); 
     } 

     public void OnPropertyChanged(string propertyName) 
     { 
      OnPropertyChanged(new PropertyChangedEventArgs(propertyName)); 
     } 

     public event PropertyChangedEventHandler PropertyChanged; 
    }