WPF Expander-Knopf-Stil mit + und -

Styling-gurus, ich brauche Hilfe kommen mit einem Expander-Stil, das aussieht wie das einer gefunden, der in die Visual Studio-code-editor. So weit, ich habe mit diesem

<ControlTemplate x:Key="ExpanderToggleButton" TargetType="ToggleButton">               
                <Border
                    SnapsToDevicePixels="true"
                    Height="12" 
                    Name="Border"
                    CornerRadius="0"                   
                    Margin="2,4" 
                    Background="Transparent"                      
                    BorderBrush="Black"                       
                    BorderThickness="0.5" >                   
                <TextBlock  Name="Arrow" Text="+"  
                            Foreground="{StaticResource GlyphBrush}" 
                            HorizontalAlignment="Center"  VerticalAlignment="Center" />
            </Border>
                <ControlTemplate.Triggers>                  
                <Trigger Property="IsChecked" Value="true">                      
                    <Setter TargetName="Arrow" Property="Text" Value="-" />
                </Trigger>                 
            </ControlTemplate.Triggers>
        </ControlTemplate>

die sieht im eingeklappten Zustand.

WPF Expander-Knopf-Stil mit + und -

Es klar braucht etwas Feintuning, das ist, was ich Hilfe benötige. Meine Herausforderung ist immer die richtige Taste Inhalt und die vertikale Ausrichtung. In der beigefügten Abbildung, die Expander sind einfach Hinzugefügt werden mit einem dock-panel, also ich verstehe nicht, warum der button Inhalt ist nicht zentriert, wie angegeben.

TIA.

InformationsquelleAutor Klaus Nji | 2011-10-10

  1. 6

    Hier ist ein Stil, den ich verwenden.

    <Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
    <Setter Property="Focusable" Value="False"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Grid Width="14" Height="14">
                    <Rectangle Fill="{DynamicResource primaryBackgroundBrush}" />
                    <Border Name="ExpandBorder" RenderOptions.EdgeMode="Aliased" BorderBrush="Black" BorderThickness="2">
                        <Path RenderOptions.EdgeMode="Aliased" Name="ExpandPath" Stroke="Black" Margin="0" StrokeThickness="2" Data="M 5 1 L 5 9 M 1 5 L 9 5" />
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Data" TargetName="ExpandPath" Value="M 1 5 L 9 5"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="ExpandBorder" Property="BorderBrush" Value="Gray" />
                        <Setter TargetName="ExpandPath" Property="Stroke" Value="Gray" />
                        <Setter Property="Data" TargetName="ExpandPath" Value=""/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
    Vielen Dank für Ihre Vorlage. Was ist primaryBackgrounBrush aus?
    Das ist eine dynamische Ressource, die festgelegt wird, basierend auf der Benutzer ist das Thema. Suchen auf Sie jetzt, ich erkennen, dass konnte nur in den hintergrund verschoben werden von der Grenze in die Kontrolle.
    Funktioniert Super, vielen Dank. Es gibt jedoch eine kleine Macke, wie wenn Sie reduzieren die Grenz-und Rechteck-Dicke 1, "Rechteck" ist nicht mehr zentriert im grid.
    Nji - ich habe es behoben, indem umschließt das Path-element innerhalb eines Grids. Ex: <Raster><Pfad ... /></Grid>
    Brady +1 - Große Lösung!

    InformationsquelleAutor Brady

Schreibe einen Kommentar