wpf - controles - xaml pdf español

¿Cómo heredar el estilo XAML y anular la propiedad del elemento hijo?

Question

acabamos de empezar con XAML y todavía estamos peleando con problemas básicos: Viniendo de CSS, nos gustaría definir un estilo de botón genérico con una plantilla de control personalizada y luego tener un segundo estilo heredar todo desde el primer estilo usando "basedon". Este segundo estilo debería anular propiedades tales como "color de primer plano" (que funciona) pero también propiedades de elementos secundarios dentro de nuestra plantilla personalizada, como el "color de fondo" de, por ejemplo, un elemento de borde incluido, etc. (que no funciona).

¿Cuál es el enfoque general para hacer cosas como esta? ¿Qué tan lejos podemos llegar con los estilos en cascada?

¡Aclamaciones!

Answer 1

El enfoque estándar para crear una plantilla de control personalizable es usar TemplateBinding en la plantilla para vincular las propiedades del control y luego establecer esas propiedades en los estilos secundarios.

Por ejemplo, esto crea una plantilla de botón con un control de borde y vincula el fondo del borde a la propiedad de fondo del botón. Al establecer la propiedad de fondo del botón en otros estilos, cambia la propiedad de fondo del borde.

<StackPanel>
    <StackPanel.Resources>
        <Style x:Key="BaseButtonStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}">
                            <ContentPresenter/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="BlueButtonStyle" TargetType="Button"
               BasedOn="{StaticResource BaseButtonStyle}">
            <Setter Property="Background" Value="Blue"/>
        </Style>
        <Style x:Key="RedButtonStyle" TargetType="Button"
               BasedOn="{StaticResource BaseButtonStyle}">
            <Setter Property="Background" Value="Red"/>
        </Style>
    </StackPanel.Resources>
    <Button Style="{StaticResource RedButtonStyle}">Red</Button>
    <Button Style="{StaticResource BlueButtonStyle}">Blue</Button>
</StackPanel>

Muchas de las propiedades de Control están destinadas a utilizarse en plantillas de control y no afectarán a ningún otro comportamiento si se modifican. Son BorderBrush, BorderThickness, Background, Padding, HorizontalContentAlignment y VerticalContentAlignment.

Answer 2

Puede usar un estilo heredado sin referencia clave:

<Grid>
    <Grid.Resources>
        <!-- Definition of default appearance of a button -->
        <Style TargetType="Button" x:Key="Default">
            <Setter Property="Background" Value="Red"></Setter>
            <Setter Property="FontFamily" Value="Segoe Black" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="FontSize" Value="32pt" />
            <Setter Property="Foreground" Value="#777777" />
        </Style>
        <!-- Define general style that based is base on the default style of the button without a key reference-->
        <Style TargetType="Button" BasedOn="{StaticResource Default}"/>

        <!-- In sub style override the properties you need -->
        <Style BasedOn="{StaticResource Default}" TargetType="Button" x:Key="SubButton" >
            <Setter Property="FontSize" Value="8pt" />
        </Style>

    </Grid.Resources>

    <Button Content="Main" Height="51" HorizontalAlignment="Left" Margin="154,72,0,0" Name="button1" VerticalAlignment="Top" Width="141" />
    <Button Content="Sub" Style="{StaticResource SubButton}" Height="51" HorizontalAlignment="Left" Margin="154,162,0,0" Name="button2" VerticalAlignment="Top" Width="141" />
</Grid>

Answer 3

Tengo (en mi aplicación WPF) estilos predeterminados (base) definidos en ResourceDictionary en App.xaml (en el proyecto de inicio). Por ejemplo para el botón de la siguiente manera.

    <Style TargetType="Button">
        <Setter Property="Margin" Value="5"/>
        <Setter Property="FontWeight" Value="DemiBold"/>
        <Setter Property="FontSize" Value="16"/>
    </Style>

En todas las vistas, uso (de forma predeterminada) este estilo general (heredado automáticamente). Cuando necesito cambiar o agregar alguna propiedad en el estilo predeterminado (definido en App.xaml), creo un nuevo estilo basado en el estilo predeterminado.

    <Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
        <!-- change -->
        <Setter Property="Margin" Value="10" />
        <!-- add -->
        <Setter Property="Foreground" Value="Red" />
    </Style>

Cuando necesito ocultar o redefinir fuertemente el estilo predeterminado (en alguna vista) creo un nuevo estilo (basado en nada).

    <Style TargetType="Button"/>

Por supuesto, puede continuar heredando en App.xaml o en una vista específica. Puede basar el nuevo estilo con nombre en el estilo predeterminado y usar el nuevo estilo por nombre. Por ejemplo, estilo RedButton y GreenButton.

    <Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}" x:Key="RedButton">
        <Setter Property="Foreground" Value="Red" />
    </Style>

    <Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}" x:Key="GreenButton">
        <Setter Property="Foreground" Value="Green" />
    </Style>

Etc ...

NOTA: en lugar de definir su estilo en App.xaml puede usar la biblioteca independiente (dll) solo con estilos y ResourceDictionary desde su biblioteca a App.xaml ResourceDictionary.MergedDictionaries.