Come modificare solo lo sfondo del pulsante Expander? WPF

Question

Ho un Expander posizionato su una finestra con uno sfondo blu e vorrei rendere il pulsante per l'espansore di un colore diverso da quello predefinito (blu, che sta ricevendo dalla finestra). Quando modifico la proprietà di sfondo dell'espansore cambia l'intero espansore, l'intestazione e tutto con il nuovo colore. Tuttavia, vorrei cambiare solo il pulsante stesso. Qualcuno potrebbe indicarmi la proprietà giusta che sto cercando? Grazie

Answer 1

Non devi solo riorganizzare l'espansore ... devi ricalcolare il pulsante Toggle all'interno del modello dell'espansore ... in modo da poter associare completamente il set di pennelli sfondo sull'espansione giù attraverso gli oggetti visivi dell'Exander e negli oggetti visivi di ToggleButton (usando due TemplateBindings).

Una cosa che è utile (almeno per me) quando stai imparando a modificare le immagini dei controlli WPF è usare i SimpleStyles in quanto sono molto più facili da copiare e modificare ... rispetto a quelli a tutti gli effetti, normali stili e amp; modelli.

Per fare ciò, apri Blend e vai nella Libreria degli asset (lo strumento più in basso) ... se fai clic su di esso vedrai due set di controlli: Controlli di sistema e Stili semplici. Prendi uno dei controlli (quello che vuoi) dagli Stili semplici e inseriscilo nell'area di progettazione. Quindi, è possibile fare clic destro su di esso, Modifica parti di controllo (modello) e Modifica una copia. Questo creerà una copia dello stile e del modello degli stili semplici ... che potrai quindi (più facilmente) modificare in base al tuo contenuto.

(Dovrei notare a questo punto che vorrei modificare quel xaml (generato da Blend) sia in Visual Studio che in Blend ... girando avanti e indietro se necessario ... e sfruttando i punti di forza di ciascuno: Blend per la sua superficie di progettazione WYSIWYG ... e Visual Studio per la modifica del codice e il supporto IntelliSense.)

Ho redatto un veloce xaml che fa quello che mi stai chiedendo e lo includerò di seguito. Dovresti essere in grado di eliminare questo xaml in Kaxaml o in un altro editor xaml sciolto.

Spero che questo aiuti.

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="640"
    Height="480"
>
    <Page.Resources>
        <LinearGradientBrush x:Key="NormalBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#EEE" Offset="0.0"/>
            <GradientStop Color="#CCC" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#CCC" Offset="0.0"/>
            <GradientStop Color="#444" Offset="1.0"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="GlyphBrush" Color="#444"/>
        <LinearGradientBrush x:Key="MouseOverBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FFF" Offset="0.0"/>
            <GradientStop Color="#AAA" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="PressedBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#BBB" Offset="0.0"/>
            <GradientStop Color="#EEE" Offset="0.1"/>
            <GradientStop Color="#EEE" Offset="0.9"/>
            <GradientStop Color="#FFF" Offset="1.0"/>
        </LinearGradientBrush>

        <ControlTemplate x:Key="newToggleButtonControlTemplate" TargetType="{x:Type ToggleButton}">
            <Grid Background="{TemplateBinding Background}">
                <Rectangle
                    x:Name="Rectangle"
                    Margin="0,0,0,0"
                    Fill="Transparent"
                    Stroke="{DynamicResource NormalBorderBrush}"
                />
                <Path
                    x:Name="Up_Arrow"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Fill="{DynamicResource GlyphBrush}"
                    Data="M 0 0 L 4 4 L 8 0 Z"
                />
                <Path
                    x:Name="Down_Arrow"
                    Visibility="Collapsed"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Fill="{DynamicResource GlyphBrush}"
                    Data="M 0 4 L 4 0 L 8 4 Z"
                />
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Fill" Value="{DynamicResource MouseOverBrush}" TargetName="Rectangle"/>
                </Trigger>
                <Trigger Property="IsPressed" Value="true">
                    <Setter Property="Fill" Value="{DynamicResource PressedBrush}" TargetName="Rectangle"/>
                </Trigger>
                <Trigger Property="IsChecked" Value="true">
                    <Setter Property="Visibility" Value="Visible" TargetName="Down_Arrow"/>
                    <Setter Property="Visibility" Value="Collapsed" TargetName="Up_Arrow"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <Style x:Key="newExpanderStyle" TargetType="{x:Type Expander}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Expander}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*" x:Name="ContentRow"/>
                            </Grid.RowDefinitions>
                            <Border
                                x:Name="Border"
                                Grid.Row="0"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="2,2,0,0"
                            >
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="20"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <ToggleButton
                                        Template="{DynamicResource newToggleButtonControlTemplate}"
                                        Background="{TemplateBinding Background}"
                                        IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                        OverridesDefaultStyle="True"
                                    />
                                    <ContentPresenter Grid.Column="1" Margin="4" RecognizesAccessKey="True" ContentSource="Header"/>
                                </Grid>
                            </Border>
                            <Border
                                x:Name="ExpandSite"
                                Grid.Row="1"
                                Visibility="Collapsed"
                                BorderThickness="1,0,1,1"
                                CornerRadius="0,0,2,2"
                            >
                                <ContentPresenter
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                    Margin="{TemplateBinding Padding}"
                                    Focusable="false"
                                />
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded" Value="True">
                                <Setter Property="Visibility" Value="Visible" TargetName="ExpandSite"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Page.Background>
        <LinearGradientBrush EndPoint="0.997,0.996" StartPoint="0.002,0.058">
            <GradientStop Color="#FF63A6DE" Offset="0"/>
            <GradientStop Color="#FFC2DEF5" Offset="1"/>
        </LinearGradientBrush>
    </Page.Background>

    <Grid x:Name="LayoutRoot">
        <Expander
            Style="{DynamicResource newExpanderStyle}"
            Header="Expander"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Background="{DynamicResource NormalBrush}"
        >
            <Grid>
                <Button Content="Hello World"/>
            </Grid>
        </Expander>
    </Grid>
</Page>