Entwickler-Ecke
WPF / Silverlight - WPF - ToggleButton Background-Image ändern
Raven280438 - Mi 08.10.14 13:18
Titel: WPF - ToggleButton Background-Image ändern
Hi,
ich habe drei ToggleButtons, die im Prinzip aus 3 verschiedenene Bildern bestehen.
Soweit erstmal kein Problem:
XML-Daten
1:
2:
3:
4:
5:
6:
7:
| <ToggleButton Name="btn_menu_accounts">
<ToggleButton.Template>
<ControlTemplate>
<Image Source="/MyNS;component/Resources/home_white_icon.png" Width="25" Height="26" />
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton> |
Jetzt hätte ich aber gerne, dass beim Aktivieren und beim MouseOver die Buttons eine Hintergrund-Grafik bekommen.
Ich habe versucht, das mit einem Style und Triggern zu lösen, aber ohne Erfolg.
XML-Daten
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
| <Style x:Key="MenuButton" TargetType="ToggleButton">
<Setter Property="Width" Value="46" />
<Setter Property="Height" Value="41" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> |
(Aus Einfachheits-Gründen soll sich erstmal nur der Cursor ändern)
Ich habe gelesen, dass das Problem warscheinlich ist, dass das ContentTemplate vom ToggleButton Das vom Style überschreibt.
Wie löse ich das Problem am Besten?
Gruß
Raven280438 - Mi 08.10.14 14:23
Hi,
ich habs jetzt erstmal hinbekommen, dass ein Button funktioniert:
XML-Daten
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
| <ToggleButton Name="btn_menu_accounts" Width="46" Height="41" Margin="0,5,0,0">
<ToggleButton.Template>
<ControlTemplate>
<Grid>
<Border Opacity="0" Name="border" CornerRadius="5,5,0,0">
<Border.Background>
<ImageBrush ImageSource="/MyNS;component/Resources/background.png" />
</Border.Background>
</Border>
<Image Source="/MyNS;component/Resources/home_white_icon.png" Width="25" Height="26" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand" />
<Setter TargetName="border" Property="Opacity" Value="1" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton> |
Ist es irgendwie möglich, die Trigger (und vielleicht den Border) in einen Style auszulagern, damit ich das nicht für jeden ToggleButton extra schreiben muss? Das Image des Buttons muss aber variabel bleiben.
Gruß
EDIT:
Ich hab mittlerweile auch das Problem, dass der Trigger-Event "IsChecked" nicht erkannt wird.
XML-Daten
1:
2:
3:
| <Trigger Property="IsChecked" Value="True">
<Setter TargetName="border" Property="Opacity" Value="1" />
</Trigger> |
Dabei erhalte ich die Fehlermeldung:
| Zitat: |
Die IsChecked-Eigenschaft wurde im FrameworkElement-Typ nicht gefunden.
|
Raven280438 - Do 09.10.14 11:17
Hi,
für alle die es Interessiert, ich hab jetzt eine doch recht einfach Lösung gefunden:
XML-Daten
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
| <Style x:Key="MenuButton" TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid>
<Border Width="46" Height="41" Name="border" Opacity="0" CornerRadius="5,5,0,0">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="#D9002D" Offset="0"/>
<GradientStop Color="#E1013D" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<ContentPresenter />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand" />
<Setter TargetName="border" Property="Opacity" Value="1" />
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="border" Property="Opacity" Value="1" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> |
XML-Daten
1:
2:
3:
| <ToggleButton Width="46" Height="41" Style="{StaticResource MenuButton}" Click="ToggleButton_Click">
<Image Source="/MyNS;component/Resources/home_white_icon.png" Width="25" Height="26" />
</ToggleButton> |
Gruß
C# - Do 09.10.14 11:32
Hallo,
XML-Daten
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
| <Style x:Key="ToggleButtonStyle" TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Border Opacity="0.5" Name="border" CornerRadius="5,5,0,0">
<Border.Background>
<SolidColorBrush Color="Green" />
</Border.Background>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand" />
<Setter TargetName="border" Property="Opacity" Value="1" />
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter TargetName="border" Property="Opacity" Value="1" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> |
dieser Code funktioniert bei mir. Du musst bei den Trigger noch den Typ angeben, also
ToggleButton.IsChecked.
Dein Imagebrush musst du auch wieder einbinden, den hab ich zum Testen rausgeworfen.
Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2025 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!