Wie erstelle ich in C# Wpf einen Runden ToggleButton?
Ich möchte einen ToggleButten erstellen, der einen runden Rand hat und seine Breite automatisch anpasst.
Mein Code bisher:
Style:
<Style TargetType="ToggleButton" x:Key="favorite_btn">
<Setter Property="Height" Value="30"/>
<Setter Property="Width" Value="Auto"/>
<Setter Property="Background" Value="Red"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Margin" Value="60,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="{TemplateBinding Background}" BorderThickness="1" CornerRadius="20">
<StackPanel Orientation="Horizontal" Background="Red">
<Image Height="20" Width="20" Source="{Binding Path=Image}" VerticalAlignment="Center" Margin="5,0,0,0"/>
<TextBlock Text="{Binding Path=Text}" Foreground="White" FontSize="20" Margin="5,0" VerticalAlignment="Center" Width="Auto"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
und
<ToggleButton DockPanel.Dock="Top" x:Name="favorite_btn" Style="{StaticResource favorite_btn}" Checked="favorite_btn_Checked" Unchecked="favorite_btn_Unchecked" />
Jedoch bekomme ich am Ende folgendes heraus:
Herauskommen soll aber:
Was mach ich falsch?
1 Antwort
Gib nicht dem StackPanel eine Hintergrundfarbe, sondern dem Border.
<Border Background="Red" BorderBrush="{TemplateBinding Background}" BorderThickness="1" CornerRadius="20">
<StackPanel Orientation="Horizontal">
<!-- ... -->
Hab es soeben herausgefunden. Ich muss statt DockPanel.Dock="Top" DockPanel.Dock="Left" angeben, damit es am ende so aussieht wie ich ess will
Die Breite sollte eigentlich über das Layout dynamisch berechnet werden. Das heißt, dieser Setter:
<Setter Property="Width" Value="Auto"/>
könnte raus und eigentlich auch die Breitenangabe beim Textblock. Mittels eines Grids kann die Breite schließlich bestimmt werden.
Beispiel:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*"></ColumnDefinition>
<ColumnDefinition Width="0.8*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ToggleButton DockPanel.Dock="Top" x:Name="favorite_btn" Style="{StaticResource favorite_btn}" Checked="favorite_btn_Checked" Unchecked="favorite_btn_Unchecked" />
</Grid>
Ansonsten würde die Breite direkt auf dem ToggleButton (oder dem Setter in der Style Ressource) gesetzt werden. Beachte, dass du derzeit noch einen Margin gesetzt hast, der die Breite mit beeinflussen kann.
Danke, der ToggleButton ist jetzt zumindest schon mal rund, aber er nimmt in der Breite immer noch den maximalen Platzt ein. Weißt du auch wie man dieses Problem lösen kann?