WPF - ToggleButton Background-Image ändern

Raven280438 · Beiträge: 99

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.

markieren

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 · Beiträge: 99

Hi,

ich habs jetzt erstmal hinbekommen, dass ein Button funktioniert:

markieren

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.

markieren

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 · Beiträge: 99

Hi,

für alle die es Interessiert, ich hab jetzt eine doch recht einfach Lösung gefunden:

markieren

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>

markieren

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# · Verfasst: Do 09.10.14 11:32

Hallo,

markieren

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.

_________________
Der längste Typ-Name im .NET-Framework ist: ListViewVirtualItemsSelectionRangeChangedEventHandler

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme