WPF自定义控件实现：带定位覆盖标签的图标制作

问题描述 #

我正在尝试制作一个包含图标和覆盖标签的自定义WPF控件，希望将标签定位在图标的顶部、右上角、左上角等位置。我尝试使用3×3 Grid布局，将图标置于中心单元格，通过代码调用Grid.SetRow和Grid.SetColumn方法，根据锚点值设置标签的行列位置（如右上角对应行0、列2），相关XAML代码如下：

<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<usercontrols:ImageMakerControl x:Name="xIcon" Grid.Column="1" Grid.Row="1" SetAsFontImageWithSize="20" ImageType="Save" FontWeight="Bold" />
<Label x:Name="xCounterLbl" Grid.Column="2" Grid.Row="0" Style="{StaticResource $LabelStyle}">
    <Grid>
        <Ellipse Fill="Red" Height="{Binding ElementName=xLabelTB,Path=ActualHeight}" Width="{Binding ElementName=xLabelTB,Path=ActualWidth}" />
        <TextBox x:Name="xLabelTB" FontFamily="Open Sans" Text="99+" FontSize="6.5" Foreground="White" FontWeight="Bold" Background="Transparent" BorderThickness="0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Grid>
</Label>

目前仅能通过Margin属性实现预期显示效果，请问正确的实现方式或应使用何种容器？

解决方案 #

方案1：调整Grid行列定义+对齐属性

你当前的3x3 Grid用了Auto高度/宽度，导致外围单元格大小和标签一致，无法让标签对齐到图标的边角。可以把外围行列改为*以填充剩余空间，再结合对齐属性定位标签：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    
    <!-- 图标固定在中心单元格 -->
    <usercontrols:ImageMakerControl x:Name="xIcon" Grid.Column="1" Grid.Row="1" 
                                    SetAsFontImageWithSize="20" ImageType="Save" FontWeight="Bold" />
    
    <!-- 右上角标签：行0列2，靠右上对齐 -->
    <Label x:Name="xCounterLbl" Grid.Column="2" Grid.Row="0" 
           Style="{StaticResource $LabelStyle}"
           HorizontalAlignment="Right" VerticalAlignment="Top">
        <Grid>
            <Ellipse Fill="Red" Height="{Binding ElementName=xLabelTB,Path=ActualHeight}" 
                     Width="{Binding ElementName=xLabelTB,Path=ActualWidth}" />
            <TextBox x:Name="xLabelTB" FontFamily="Open Sans" Text="99+" FontSize="6.5" 
                     Foreground="White" FontWeight="Bold" Background="Transparent" 
                     BorderThickness="0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Grid>
    </Label>
</Grid>

外围*行列会占据图标上下左右的空白空间，标签通过HorizontalAlignment和VerticalAlignment就能精准贴在图标对应边角，无需硬写Margin。

方案2：使用Canvas容器

如果需要更灵活的绝对定位，Canvas是直接的选择。将图标和标签放在Canvas中，通过Canvas.Top/Canvas.Right等属性控制标签位置：

<Canvas>
    <!-- 图标作为基准控件 -->
    <usercontrols:ImageMakerControl x:Name="xIcon" Canvas.Left="0" Canvas.Top="0" 
                                    SetAsFontImageWithSize="20" ImageType="Save" FontWeight="Bold" />
    
    <!-- 右上角标签：对齐Canvas右上角 -->
    <Label x:Name="xCounterLbl" Style="{StaticResource $LabelStyle}"
           Canvas.Right="0" Canvas.Top="0">
        <Grid>
            <Ellipse Fill="Red" Height="{Binding ElementName=xLabelTB,Path=ActualHeight}" 
                     Width="{Binding ElementName=xLabelTB,Path=ActualWidth}" />
            <TextBox x:Name="xLabelTB" FontFamily="Open Sans" Text="99+" FontSize="6.5" 
                     Foreground="White" FontWeight="Bold" Background="Transparent" 
                     BorderThickness="0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Grid>
    </Label>
</Canvas>

Canvas的大小会由图标自动撑开（若图标为自适应大小），标签直接对齐到Canvas的边角，无需额外计算位置。

方案3：自定义附加属性封装定位逻辑

如果需要复用这种定位逻辑，可以编写一个附加属性，通过枚举值（如TopRight/TopLeft）直接指定标签锚点，内部自动处理Grid/Canvas的定位参数。示例XAML使用方式：

<Grid>
    <usercontrols:ImageMakerControl x:Name="xIcon" ... />
    <Label x:Name="xCounterLbl" local:BadgeHelper.Anchor="TopRight" ... />
</Grid>

附加属性的代码可在后台监听锚点变更，自动设置Grid的行列、对齐属性或Canvas的定位值，进一步简化XAML代码。

内容的提问来源于stack exchange，提问作者Amit Amir