Изменения стиля внутренних контролов у UserControl'а

258

03 декабря 2017, 10:35

Подскажите пожалуйста, как правильно делают такие вещи. У меня есть UserControl - SearchBox, который собран из TextBox и Button. Мне бы хотелось его сделать более универсальным, поэтому я не устанавливал почти никакие свойства, аля Background, Foreground, FontFamily, FontSize и тд, у внутренних контролов TextBox и Button( в основном эти свойства перенаправлял наружу с помощью TemplateBinding, чтобы эти контролы брали значения у UserControl'а.

Суть вопроса в следующем: Как в дальшейшем определять стиль отдельно для Button и отдельно для TextBox'а внутри этого UserControl'а, не прибегая к свойству Template? Если нужен код, моего UserControl'а, то вот частичный:

<UserControl.Template>
    <ControlTemplate TargetType="{x:Type UserControl}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="40"/>
            </Grid.ColumnDefinitions>
            <local:InputBox PlaceHolder="{Binding PlaceHolder, RelativeSource={RelativeSource TemplatedParent}}" 
                            Background="{TemplateBinding Background}"
                            Foreground="{TemplateBinding Foreground}"
                            FontFamily="{TemplateBinding FontFamily}"
                            FontSize="{TemplateBinding FontSize}"
                            VerticalContentAlignment="Center"
                            HorizontalContentAlignment="Left"
                            />
            <Button Grid.Column="1"
                    Background="{TemplateBinding Background}"
                    Foreground="{TemplateBinding Foreground}"
                    FontSize="{TemplateBinding FontSize}"
                    BorderThickness="0"
                    Content="&#xf002;"
                    FontFamily="{StaticResource FontAwesome}"
                    Command="{Binding Command, RelativeSource={RelativeSource TemplatedParent}}">
            </Button>
        </Grid>
    </ControlTemplate>

Answer 1

Есть несколько путей. Например, можно через стили в ресурсах.

Пишем вот такой контрол:

<UserControl x:Class="Test.TestUC"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Test">
    <StackPanel Orientation="Vertical">
        <Button Style="{DynamicResource TestUCButtonStyle}" Content="Button"/>
        <TextBlock Style="{DynamicResource TestUCTextStyle}" Text="Text"/>
    </StackPanel>
</UserControl>

Стили TestUCButtonStyle поставляем через ресурсы. Для этого в App.xaml кладём стили:

<Application.Resources>
    <Style TargetType="local:TestUC" x:Key="RedStyle">
        <!-- определяем внутренние стили -->
        <Style.Resources>
            <Style TargetType="Button" x:Key="TestUCButtonStyle">
                <Setter Property="Background" Value="Red"/>
            </Style>
            <Style TargetType="TextBlock" x:Key="TestUCTextStyle">
                <Setter Property="Foreground" Value="Red"/>
            </Style>
        </Style.Resources>
    </Style>
    <Style TargetType="local:TestUC" x:Key="SquareStyle">
        <!-- определяем внутренние стили -->
        <Style.Resources>
            <Style TargetType="Button" x:Key="TestUCButtonStyle">
                <Setter Property="Height" Value="{Binding ActualWidth,
                    RelativeSource={RelativeSource Self}}"/>
                <Setter Property="MaxWidth" Value="100"/>
            </Style>
            <Style TargetType="TextBlock" x:Key="TestUCTextStyle">
                <Setter Property="FontStyle" Value="Italic"/>
                <Setter Property="HorizontalAlignment" Value="Center"/>
            </Style>
        </Style.Resources>
        <!-- и меняем свойства -->
        <Setter Property="Background" Value="LightPink"/>
    </Style>
    <!-- устанавливаем стиль по умолчанию -->
    <Style TargetType="local:TestUC" BasedOn="{StaticResource RedStyle}"/>
</Application.Resources>

Получаем:

<StackPanel Orientation="Vertical">
    <local:TestUC/>
    <local:TestUC Style="{StaticResource SquareStyle}"/>
    <local:TestUC Style="{StaticResource RedStyle}" Background="Yellow"/>
</StackPanel>

Результат: