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 값을 반환합니다. 다음은이를 수행하는 방법에 대한 간단한 샘플입니다.

첫째, 홀수 및 짝수 항목에는 두 가지 스타일이 필요합니다.

<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를 오버라이드 (override) 할 필요가있다. 이 방법에서는 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>