Wie entferne ich Platz auf der rechten Seite eines GridView-Elements

Question

So habe ich schon einmal damit gekämpft, aber noch nie eine gute Lösung gefunden.

Ich brauche eine a 2 Spalte GridView mit Elementen, die links und rechts mit den Elementen auf der linken Seite wird links gerecht und die Elemente auf der rechten Seite rechts gerecht zu füllen. Ich möchte, dass die 2 Spalten Kante an Kante mit einem Leerzeichen in der Mitte stehen. Bisher habe ich das aber die Artikel füllen den Container nicht horizontal aus. Der rechte Rand versagt es.

<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> 

Ich weiß, es ist ein CSS-Äquivalent von nur einen Stil zu ungerade oder gerade Elemente anwenden, aber ich glaube nicht, es ist ähnlich Markup in XAML. Weiß jemand, wie man das macht?

Answer 1

In XAML können wir ItemsControl.ItemContainerStyleSelector property verwenden, um verschiedene Stile ungerade und gerade Elemente anwenden. Diese Eigenschaft legt einen Verweis auf eine benutzerdefinierte logische Klasse StyleSelector fest. Der StyleSelector gibt verschiedene Style Werte zurück, die für den Objektcontainer basierend auf den Eigenschaften des angezeigten Objekts verwendet werden. Im Folgenden finden Sie ein einfaches Beispiel für die Vorgehensweise.

Zuerst benötigen wir zwei Arten für gerade und ungerade Elemente.

<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> 

Dann brauchen wir eine benutzerdefinierte StyleSelector Klasse zu erstellen und zu überschreiben SelectStyleCore method die Logik zu implementieren. In der Methode können wir ItemsControl.ItemsControlFromItemContainer method verwenden, um die ItemsControl zu erhalten und dann ItemsControl.IndexFromContainer method verwenden, um den Index des Containers zu erhalten. Sobald wir den Index haben, können wir ihn verwenden, um zu überprüfen, ob der Gegenstand ein ungeradzahliger oder ein gerader Gegenstand ist.

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

diesen Selektor verwenden zu können, müssen wir eine Instanz der benutzerdefinierten Klasse, wie diese in einem Resources Block in XAML definiert. Wir können es in Page.Resources wie definieren:

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

Und in GridView, Set ItemContainerStyleSelector wie:

<GridView ItemContainerStyleSelector="{StaticResource MyStyleSelector}"> 

Der komplette XAML-Code vielleicht gefallen:

<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>