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值。以下是关于如何执行此操作的简单示例。

首先，我们需要两种奇数和偶数样式。

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

然后我们需要创建一个自定义StyleSelector类并覆盖SelectStyleCore method来实现逻辑。在该方法中，我们可以使用ItemsControl.ItemsControlFromItemContainer method获取 ItemsControl ，然后使用ItemsControl.IndexFromContainer method获取容器的索引。获得索引后，我们可以使用它来检查项目是奇数还是偶数。

Page.Resources

要使用此选择器，我们需要引用XAML中Resources块中定义的自定义类的实例。我们可以在<local:MyStyleSelector x:Key="MyStyleSelector" EvenStyle="{StaticResource EvenGridViewItemStyle}" OddStyle="{StaticResource OddGridViewItemStyle}" />中定义它：

GridView

在ItemContainerStyleSelector中，将<GridView ItemContainerStyleSelector="{StaticResource MyStyleSelector}">设置为：

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

完整的XAML代码可能会：

{{1}}

如何消除GridView项目右侧的空间

1 个答案: