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

问题描述

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

标签： c#uwpuwp-xaml

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

请检查源代码，我想我们可以给标题属性FontIconUIElement 内容。不幸的是，Visual Studio 抛出异常，它看起来像一个错误。请随时张贴在WindowsCommunityToolkit。

public object Header
{
    get
    {
        return _header;
    }

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

目前我们有一种解决方法，即海关标题样式。我们可以在DataGridColumnHeader 这里找到。如果我们想将图标添加到标题中，我们可以在下面添加这一行，<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"
/>

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

问题描述

解决方案

推荐阅读