c# - 具有多个内容的 WPF 样式

Question

我创建了一个样式，将标签创建为圆圈，中间有文本。

<Style x:Key="RoundedLabelStyle" TargetType="{x:Type Label}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Label">
                <Grid Height="Auto" Width="Auto" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                    <Ellipse x:Name="cp" Margin="0,0,0,0" Fill="{TemplateBinding Background}" Height="{TemplateBinding Width}" Width="{TemplateBinding Width}" Stroke="Black" StrokeThickness="2" />
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
                        <ContentPresenter.Content>
                            <Border Padding="10">
                                <ContentPresenter Content="{TemplateBinding Content}"/>                                            
                            </Border>
                        </ContentPresenter.Content>
                    </ContentPresenter>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

它的用法是这样的:

<Label Style="{StaticResource RoundedButtonStyle}" Content="{Binding CountValue}" HorizontalAlignment="Center" VerticalAlignment="Center"  Background="Red" BorderBrush="Red" BorderThickness="3" Height="100" Width="100" FontSize="20" FontWeight="Bold" />

这很好用。

不过，我想通过在不同位置设置两个文本字段来向该标签添加更多信息。

1. 第一个已经存在并显示在椭圆的中心。

2. 我想添加一个显示在椭圆下方的。

如果可能的话，我希望能够在纯 xaml 中实现它，并像这样使用它，其中对 SecondLabelText 的绑定(bind)显示在椭圆下:

<Label Style="{StaticResource RoundedButtonStyle}" Content="{Binding CountValue}" SecondContent="{Binding SecondLabelText}" HorizontalAlignment="Center" VerticalAlignment="Center"  Background="Red" BorderBrush="Red" BorderThickness="3" Height="100" Width="100" FontSize="20" FontWeight="Bold" />

我可以将标签添加到样式中，但是如何设置两个单独的内容？

Answer 1

不知道对你有没有用；离开并将其创建为自定义用户控件作为一种实践，您可以创建一个新的用户控件，设置 2 个属性以接收 2 个内容:

using System.Windows;
using System.Windows.Controls;

namespace Custom_Control_Elipse_2_labels
{
    /// <summary>
    /// Interaction logic for EllipseWithTwoLabels.xaml
    /// </summary>
    public partial class EllipseWithTwoLabels : UserControl
    {

        public static readonly DependencyProperty Content1Property = DependencyProperty.Register("Content1", typeof(string), typeof(EllipseWithTwoLabels));
        public static readonly DependencyProperty Content2Property = DependencyProperty.Register("Content2", typeof(string), typeof(EllipseWithTwoLabels));
        public EllipseWithTwoLabels()
        {
            InitializeComponent();
            DataContext = this;
        }

        public string Content1
        {
            get => (string) GetValue(Content1Property);
            set => SetValue(Content1Property,value);
        }
        public string Content2
        {
            get => (string)GetValue(Content2Property);
            set => SetValue(Content2Property, value);
        }
    }
}

用户控件的 .xaml 是

<Grid>
        <Label Content="{Binding Content1}" Style="{StaticResource RoundedButtonStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"  Background="Red" BorderBrush="Red" BorderThickness="3" Height="100" Width="100" FontSize="20" FontWeight="Bold" ></Label>
        <Label Content="{Binding Content2}" Margin="0,150,0,0"  HorizontalAlignment="Center" VerticalAlignment="Center" ></Label>
    </Grid>

然后您可以将它导入任何 View 以将其用于:(

xmlns:local="clr-namespace:Custom_Control_Elipse_2_labels" 

并与 xaml 一起使用:

 <local:EllipseWithTwoLabels Height="300" Width="300" Content1="Content #1" Content2="Content #2"/>

是完成它的一种方法:)

它提供了这样的东西: