WPF Style с несколькими содержаниями

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 показана под эллипсом:

<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

Вы можете использовать, например, Tag свойство label для хранения дополнительных данных

<Label Style="{StaticResource RoundedLabelStyle}" Content="Content" Tag="Content#2"/>

В шаблоне просто привязать к Tag свойство

<ContentPresenter Content="{TemplateBinding Tag}"/>

Лучшим подходом является использованиеAttachedProperty.Это позволяет вам объявлять столько дополнительного контента, сколько вы хотите, без создания нового типа элемента управления

public class LabelExtension 
{
    public static readonly DependencyProperty SecondContentProperty = DependencyProperty.RegisterAttached(
        "SecondContent", typeof(object), typeof(LabelExtension));

    public static void SetSecondContent(UIElement element, object value)
    {
        element.SetValue(SecondContentProperty, value);
    }
    public static object GetSecondContent(UIElement element)
    {
        return (object)element.GetValue(SecondContentProperty);
    }
}

Установить его на элемент управления

<Label Style="{StaticResource RoundedLabelStyle}" Content="Content" local:LabelExtension.SecondContent="Content#2"/>

Использовать из шаблона

<ContentPresenter Content="{TemplateBinding local:LabelExtension.SecondContent}"/>

Полный пример стиля надписи

<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">
                                        <StackPanel>
                                            <ContentPresenter Content="{TemplateBinding Content}"/>
                                            <ContentPresenter Content="{TemplateBinding Tag}"/>
                                            <ContentPresenter Content="{TemplateBinding local:LabelExtension.SecondContent}"/>
                                        </StackPanel>
                                    </Border>
                                </ContentPresenter.Content>
                            </ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Answer 2

Не знаю, бесполезно ли это для вас;ушел и создал его как пользовательский пользовательский элемент управления, немного потренировавшись. Вы можете создать новый пользовательский элемент управления, задав 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>

Вы можете просто импортировать его в любое представление, чтобы использовать его с: (

xmlns:local="clr-namespace:Custom_Control_Elipse_2_labels" 

и использовать с xaml:

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

Isодин из способов сделать это :)

Это обеспечивает что-то вроде этого: