Question

<controls:DataGridTextColumn
    Binding="{Binding Favorite}"
    FontFamily="Segoe MDL2 Assets"
    Header="&#xEB51;"
    Tag="Favorite" />

我想使用心形图标表示喜欢的状态，但是我的尝试失败了，因为它似乎无法正确加载，您可以从下面的图片中看到。

我该如何解决？

我也尝试过

            <controls:DataGridTextColumn
                Binding="{Binding Favorite}"
                Tag="Favorite" >
                <controls:DataGridTextColumn.Header>
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xEB51;" />
                </controls:DataGridTextColumn.Header>
            </controls:DataGridTextColumn>

但这给出了未处理的异常：

        UnhandledException += (sender, e) =>
        {
            if (global::System.Diagnostics.Debugger.IsAttached) global::System.Diagnostics.Debugger.Break();
        };

Answer 1

在Datagrid列标题中使用Segoe MDL2资产图标

请检查源code，我认为我们可以给标题属性FontIcon UIElement内容。不幸的是，Visual Studio抛出异常，它看起来像一个错误。请随时将其发布在WindowsCommunityToolkit中。

public object Header
{
    get
    {
        return _header;
    }

    set
    {
        if (_header != value)
        {
            _header = value;
            if (_headerCell != null)
            {
                _headerCell.Content = _header;
            }
        }
    }
}

当前，我们有一个解决海关标题样式的方法。我们可以找到DataGridColumnHeader here。如果要将图标添加到标题，则可以像以下内容一样在<SymbolIcon Symbol="Favorite" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="30,0,0,0"/>下添加ContentPresenter行。

   ......
xmlns:localprimitives="using:Microsoft.Toolkit.Uwp.UI.Controls.Primitives"
   ......

<Style x:Key="ColumHeader" TargetType="localprimitives:DataGridColumnHeader">
    <Setter Property="Foreground" Value="{ThemeResource DataGridColumnHeaderForegroundBrush}" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="SeparatorBrush" Value="{ThemeResource GridLinesBrush}" />
    <Setter Property="Padding" Value="12,0,0,0" />
    <Setter Property="FontSize" Value="12" />
    <Setter Property="MinHeight" Value="32" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="localprimitives:DataGridColumnHeader">
                <Grid x:Name="ColumnHeaderRoot">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <Rectangle
                        x:Name="BackgroundRectangle"
                        Grid.ColumnSpan="2"
                        Fill="{ThemeResource DataGridColumnHeaderBackgroundBrush}"
                        Stretch="Fill"
                        />

                    <Grid
                        Margin="{TemplateBinding Padding}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" MinWidth="32" />
                        </Grid.ColumnDefinitions>

                        <ContentPresenter
                            HorizontalAlignment="Left"
                            VerticalAlignment="Center"
                            Content="{TemplateBinding Content}"
                            />
                        <SymbolIcon
                            Margin="30,0,0,0"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Center"
                            Symbol="Favorite"
                            />

                        <FontIcon
                            x:Name="SortIcon"
                            Grid.Column="1"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
                            FontSize="12"
                            Foreground="{ThemeResource DataGridColumnHeaderForegroundBrush}"
                            Glyph="{ThemeResource SortIconAscending}"
                            Opacity="0"
                            />
                    </Grid>
                    <Rectangle
                        x:Name="VerticalSeparator"
                        Grid.Column="1"
                        Width="1"
                        VerticalAlignment="Stretch"
                        Fill="{TemplateBinding SeparatorBrush}"
                        Visibility="{TemplateBinding SeparatorVisibility}"
                        />

                    <Grid
                        x:Name="FocusVisual"
                        IsHitTestVisible="False"
                        Opacity="0"
                        >
                        <Rectangle
                            x:Name="FocusVisualPrimary"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Fill="Transparent"
                            IsHitTestVisible="False"
                            Stroke="{ThemeResource DataGridCellFocusVisualPrimaryBrush}"
                            StrokeThickness="2"
                            />
                        <Rectangle
                            x:Name="FocusVisualSecondary"
                            Margin="2"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Fill="Transparent"
                            IsHitTestVisible="False"
                            Stroke="{ThemeResource DataGridCellFocusVisualSecondaryBrush}"
                            StrokeThickness="1"
                            />
                    </Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <ColorAnimation
                                        Storyboard.TargetName="BackgroundRectangle"
                                        Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                        To="{ThemeResource DataGridColumnHeaderBackgroundColor}"
                                        Duration="0"
                                        />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ColorAnimation
                                        Storyboard.TargetName="BackgroundRectangle"
                                        Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                        To="{ThemeResource DataGridColumnHeaderHoveredBackgroundColor}"
                                        Duration="0"
                                        />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ColorAnimation
                                        Storyboard.TargetName="BackgroundRectangle"
                                        Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                        To="{ThemeResource DataGridColumnHeaderPressedBackgroundColor}"
                                        Duration="0"
                                        />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Unfocused" />
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="FocusVisual"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1"
                                        Duration="0"
                                        />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SortStates">
                            <VisualState x:Name="Unsorted" />
                            <VisualState x:Name="SortAscending">
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="SortIcon"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1"
                                        Duration="0"
                                        />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SortDescending">
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="SortIcon"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1"
                                        Duration="0"
                                        />
                                </Storyboard>
                                <VisualState.Setters>
                                    <Setter Target="SortIcon.Glyph" Value="{ThemeResource SortIconDescending}" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

请注意自定义DataGridColumnHeader，我们需要在应用程序资源中引用DataGrid.xaml。

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls.DataGrid/DataGrid/DataGrid.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

用法

<controls:DataGridTextColumn
Binding="{Binding Id}"
Header="ID"
HeaderStyle="{StaticResource ColumHeader}"
Tag="Id"
/>

uwp：在Datagrid列标题中使用Segoe MDL2资产图标

1 个答案: