GridViewアイテムの右側にあるスペースを削除するには

Question

これまで私はこれまで苦労していましたが、良い解決策は見つけられませんでした。

左側の項目は左揃え、右側の項目は右揃えの項目で、2列のGridViewが必要です。私は中央のスペースを持つ2つの列を端から端にしたい。これまでのところ私はこれを持っていますが、アイテムはコンテナに水平に塗りつぶされません。右のマージンはそれを混乱させる。

<Grid Background="black" Height="500" Width="200"> 
     <GridView> 
      <GridView.ItemsPanel> 
       <ItemsPanelTemplate> 
        <VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2" ItemWidth="100" /> 
       </ItemsPanelTemplate> 
      </GridView.ItemsPanel> 
      <GridView.ItemContainerStyle> 
       <Style TargetType="FrameworkElement"> 
        <Setter Property="Margin" Value="0 0 10 0"/> 
       </Style> 
      </GridView.ItemContainerStyle> 
      <CheckBox Content="Light" Foreground="White" Background="#454545" BorderBrush="White" /> 
      <CheckBox Content="Light" Foreground="White" Background="#454545" BorderBrush="White" /> 
      <CheckBox Content="Light" Foreground="White" Background="#454545" BorderBrush="White" /> 
      <CheckBox Content="Light" Foreground="White" Background="#454545" BorderBrush="White" /> 
      <CheckBox Content="Light" Foreground="White" Background="#454545" BorderBrush="White" /> 
      <CheckBox Content="Light" Foreground="White" Background="#454545" BorderBrush="White" /> 
      <CheckBox Content="Light" Foreground="White" Background="#454545" BorderBrush="White" /> 
     </GridView> 
    </Grid> 

私は奇数または偶数の項目にスタイルを適用するCSSの同等がある知っているが、私は、XAMLで同様のマークアップはないと思います。誰もこれを行う方法を知っていますか？

Answer 1

XAMLでは、我々は、奇数と偶数のアイテムに異なるスタイルを適用するためにItemsControl.ItemContainerStyleSelector propertyを使用することができます。このプロパティは、カスタムStyleSelectorロジッククラスへの参照を設定します。 StyleSelectorは、表示されているオブジェクトの特性に基づいてアイテムコンテナに使用する異なるStyle値を返します。以下は、これを行う方法についての簡単なサンプルです。

まず、奇数項目と偶数項目の2つのスタイルが必要です。

<Style x:Key="OddGridViewItemStyle" TargetType="GridViewItem"> 
    <Setter Property="Margin" Value="0 0 10 0" /> 
</Style> 
<Style x:Key="EvenGridViewItemStyle" TargetType="GridViewItem"> 
    <Setter Property="Margin" Value="10,0,0,0" /> 
</Style> 

その後、我々は、カスタムStyleSelectorクラスを作成し、ロジックを実装するSelectStyleCore methodをオーバーライドする必要があります。このメソッドでは、ItemsControl.ItemsControlFromItemContainer methodを使用してItemsControlを取得し、ItemsControl.IndexFromContainer methodを使用してコンテナのインデックスを取得できます。インデックスを取得したら、そのアイテムが奇数か偶数かをチェックすることができます。

public class MyStyleSelector : StyleSelector 
{ 
    public Style OddStyle { get; set; } 
    public Style EvenStyle { get; set; } 

    protected override Style SelectStyleCore(object item, DependencyObject container) 
    { 
     var itemsControl = ItemsControl.ItemsControlFromItemContainer(container); 
     //Note that the index starts form 0 
     if (itemsControl.IndexFromContainer(container) % 2 == 0) 
     { 
      return OddStyle; 
     } 
     else 
     { 
      return EvenStyle; 
     } 
    } 
} 

このセレクタを使用するには、我々は、XAMLでResourcesブロックで定義されたカスタムクラスのインスタンスを参照する必要があります。私たちは、のようなPage.Resourcesでそれを定義することができます。

<local:MyStyleSelector x:Key="MyStyleSelector" 
         EvenStyle="{StaticResource EvenGridViewItemStyle}" 
         OddStyle="{StaticResource OddGridViewItemStyle}" /> 

そしてGridViewで、同じようItemContainerStyleSelector設定：

<GridView ItemContainerStyleSelector="{StaticResource MyStyleSelector}"> 

完全なXAMLコードを好むかもしれない：

<Page ...> 
    <Page.Resources> 
     <Style x:Key="OddGridViewItemStyle" TargetType="GridViewItem"> 
      <Setter Property="Margin" Value="0 0 10 0" /> 
     </Style> 
     <Style x:Key="EvenGridViewItemStyle" TargetType="GridViewItem"> 
      <Setter Property="Margin" Value="10,0,0,0" /> 
     </Style> 

     <local:MyStyleSelector x:Key="MyStyleSelector" EvenStyle="{StaticResource EvenGridViewItemStyle}" OddStyle="{StaticResource OddGridViewItemStyle}" /> 

    </Page.Resources> 
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <Grid Width="200" Height="500" Background="black"> 
      <GridView ItemContainerStyleSelector="{StaticResource MyStyleSelector}"> 
       <GridView.ItemsPanel> 
        <ItemsPanelTemplate> 
         <VariableSizedWrapGrid ItemWidth="100" MaximumRowsOrColumns="2" Orientation="Horizontal" /> 
        </ItemsPanelTemplate> 
       </GridView.ItemsPanel> 

       <CheckBox Background="#454545" BorderBrush="White" Content="Light" Foreground="White" /> 
       <CheckBox Background="#454545" BorderBrush="White" Content="Light" Foreground="White" /> 
       <CheckBox Background="#454545" BorderBrush="White" Content="Light" Foreground="White" /> 
       <CheckBox Background="#454545" BorderBrush="White" Content="Light" Foreground="White" /> 
       <CheckBox Background="#454545" BorderBrush="White" Content="Light" Foreground="White" /> 
       <CheckBox Background="#454545" BorderBrush="White" Content="Light" Foreground="White" /> 
       <CheckBox Background="#454545" BorderBrush="White" Content="Light" Foreground="White" /> 
      </GridView> 
     </Grid> 
    </Grid> 
</Page>