W8/XAML GridView -> 将标题元素向右对齐答案

【问题标题】：W8/XAML GridView -> Align Header Element to the RightW8/XAML GridView -> 将标题元素向右对齐
【发布时间】：2013-04-04 09:56:28
【问题描述】：

我希望我的 GridView 的标题包含左侧的组名称和右侧的符号，并且这样做了。：

                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <Grid>

                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition
                                        Width="*"></ColumnDefinition>
                                    <ColumnDefinition
                                        Width="*"></ColumnDefinition>
                                </Grid.ColumnDefinitions>

                                <Button
                                    Grid.Column="0"
                                    AutomationProperties.Name="Group Title"
                                    Style="{StaticResource TextPrimaryButtonStyle}" />


                                    <Button
                                        Grid.Column="1"
                                        Content="&#xE0A1;"></Button>
                            </Grid>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>

不幸的是，符号总是在组标题的左右旁边。：

如何右对齐组标题中的元素？

编辑：固定大小的网格列不起作用，因为组的宽度可能因屏幕和单个组中的项目数而异。

【问题讨论】：

标签： xaml gridview windows-8

【解决方案1】：

可能有很多方法可以做到这一点。最简单的方法是在数据模板网格中设置列宽。在上面的代码中，将width="*" 更改为以下内容：

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="200"></ColumnDefinition>
    <ColumnDefinition Width="50"></ColumnDefinition>
</Grid.ColumnDefinitions>

宽度的总和等于 250，这是标准网格单元大小。

您可能需要根据实际需要调整这些数字。

【讨论】：

不幸的是，这个解决方案对我不起作用，因为组宽度取决于屏幕分辨率和单个组中的项目数量。

【解决方案2】：

我在 msdn 论坛上找到了一个非常好的解决方案。这里是：

首先编写一个转换器来计算Datatemplate中Container的宽度，在我的例子中是网格：

class WidthConverter : IValueConverter
{
    #region IValueConverter Member

    public object Convert(object value, Type targetType, object parameter, string language)
    {
        int x;
        if (parameter != null)
            x = int.Parse(parameter.ToString());
        else
            x = 1;
        if ((int)value % x == 0)
            return (int)value / x * 260 - 5;
        else
            return ((int)value / x + 1) * 260 - 5;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }

    #endregion
}

现在在您页面的资源中声明它：

<local:WidthConverter x:Key="WidthConverter"/>

最后使用绑定来使用它并计算Grid的宽度：

<Grid Width="{Binding Items.Count, Converter={StaticResource WidthConverter}, ConverterParameter=2}">

将转换器参数设置为显示的行数，如果你不限制它取决于屏幕分辨率。

将转换器中的 260 替换为与您的项目模板大小和边距匹配的数字。

【讨论】：