none
Button.Background Toggle RRS feed

  • Frage

  • Hallo zusammen,

    ich habe ein grid, in dem mehrere Buttons, vom Benutzer erstellt, sind. Wird ein Button gedrückt, soll dessen Hintergrund geändert werden. Das funktioniert soweit auch schon, mein Problem ist allerdings, dass immer nur ein Button, der zuletzt gedrückte "gehilightet" sein soll. Außerdem weiß ich nicht wie ich das machen kann, dass das Click Event der Nutzergenerierten Buttons die Methode zum Hintergrund-Farbwechsel aufrufen kann. Mein Code zum Färben für zwei Buttons sieht testweise mal so aus:

            private void button1_Click(object sender, RoutedEventArgs e)
            {
                changeButtonColor(sender as Button); 
            }
    
            private void changeButtonColor(Button button)
            {
                if (clickCounter == 0)
                        {
                            button.Background = (Brush)App.Current.Resources["PhoneAccentBrush"];
                            clickCounter = 1;
                        }
                 else
                        {
                            button.Background = (Brush)App.Current.Resources["PhoneTransparentBrush"];
                            clickCounter = 0;
                        }  
            }
    
            private void button2_Click(object sender, RoutedEventArgs e)
            {
                changeButtonColor(sender as Button);
            }

    clickCounter ist in dem Fall ein int der entweder 0 oder 1 ist um die Hintergrundfarbe ein oder aus zu schalten....


    br

    Freitag, 12. September 2014 15:41

Antworten

  • Hallo,
    das jeweils nur ein Button aktiv sein soll erinnert sehr an die RadioButtons. Diese kannst du mittels Templates auch komplett im Style verändern.
    Wenn du auf einen RadioButton im Designer einen Rechtsklick machst und Vorlage bearbeiten > Kopie bearbeiten... wählst, kannst du dir den Standardstyle generieren lassen. Dort kannst du alles nach belieben anpassen - auch so das die RadioButtons wie normale Buttons aussehen.
    Einfacher wäre es jedoch das Template eines ToggleButton generieren zu lassen und den TargetType in RadioButton zu ändern. Die Styles sprechen genau die gleichen Eigenschaften an, sodass die RadioButtons aussehen wie ToggleButtons:

    Der Code dazu sieht wie folgt aus:

    <!--Muss in die Resources-Auflistung der Anwendung oder der Seite/des Controls-->
    <Thickness x:Key="PhoneBorderThickness">2.5</Thickness> <FontWeight x:Key="PhoneButtonFontWeight">Semibold</FontWeight> <x:Double x:Key="PhoneButtonMinHeight">57.5</x:Double> <x:Double x:Key="PhoneButtonMinWidth">109</x:Double> <Thickness x:Key="PhoneTouchTargetOverhang">0,9.5</Thickness> <Style TargetType="RadioButton"> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderBrush" Value="{ThemeResource PhoneForegroundBrush}"/> <Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/> <Setter Property="BorderThickness" Value="{ThemeResource PhoneBorderThickness}"/> <Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}"/> <Setter Property="FontWeight" Value="{ThemeResource PhoneButtonFontWeight}"/> <Setter Property="FontSize" Value="{ThemeResource TextStyleLargeFontSize}"/> <Setter Property="Padding" Value="9.5,0"/> <Setter Property="MinHeight" Value="{ThemeResource PhoneButtonMinHeight}"/> <Setter Property="MinWidth" Value="{ThemeResource PhoneButtonMinWidth}"/> <Setter Property="HorizontalAlignment" Value="Left"/> <Setter Property="VerticalAlignment" Value="Center"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ToggleButton"> <Grid Background="Transparent"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="PointerOver"/> <VisualState x:Name="Pressed"/> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EnabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Checked"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneAccentBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="EnabledContent"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneButtonBasePressedForegroundBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DisabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneDisabledBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="DisabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneDisabledBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DisabledContent"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneBackgroundBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="CheckedPointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneAccentBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="EnabledContent"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneButtonBasePressedForegroundBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DisabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneDisabledBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="DisabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneDisabledBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DisabledContent"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneBackgroundBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="CheckedPressed"/> <VisualState x:Name="CheckedDisabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneAccentBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="EnabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="0.4"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="EnabledContent"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneButtonBasePressedForegroundBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Indeterminate"/> <VisualState x:Name="IndeterminatePointerOver"/> <VisualState x:Name="IndeterminatePressed"/> <VisualState x:Name="IndeterminateDisabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EnabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border x:Name="EnabledBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="{ThemeResource PhoneTouchTargetOverhang}"> <ContentPresenter x:Name="EnabledContent" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Border> <Border x:Name="DisabledBackground" BorderBrush="{ThemeResource ButtonDisabledBorderThemeBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" IsHitTestVisible="False" Margin="{ThemeResource PhoneTouchTargetOverhang}" Visibility="Collapsed"> <ContentPresenter x:Name="DisabledContent" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{ThemeResource ButtonDisabledForegroundThemeBrush}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
    Momentan würde der Style auf alle RadioButtons angewendet werden. Du kannst aber auch eine x:Key-Eigenschaft hinzufügen und so bestimmen, welche Controls den Style bekommen sollen:
    <Style TargetType="RadioButton" x:Key="myRadioButton">
    Zuordnung des Styles zu RadioButtons:
    <RadioButton Style="{StaticResource myRadioButton}"/>
    <RadioButton Style="{StaticResource myRadioButton}"/>
    <RadioButton Style="{StaticResource myRadioButton}"/>
    Wenn du nun andere Farben verwendne willst, musst du nur die jeweiligen Storyboards im VisualStateManager anpassen. (Ich habe im Code die Resourcen unterstrichen, die geladen werden wenn der RadioButton Angehakt ist.)
    Siehe auch: Schnellstart: Steuerelementvorlagen (XAML)

    PS: Mein Code funktioniert für Universal Apps. Für Silverlight Apps aber so ähnlich.


    Tom Lambert - C# MVP
    Wozu Antworten markieren und für Beiträge abstimmen? Klicke hier.
    Nützliche Links: .NET Quellcode | C# ↔ VB.NET Konverter | Account bestätigen (Verify Your Account)
    Ich: Webseite | Code Beispiele | Facebook | Twitter | Snippets

    • Als Antwort markiert brown78 Freitag, 12. September 2014 16:11
    Freitag, 12. September 2014 16:00

Alle Antworten

  • Hallo,
    das jeweils nur ein Button aktiv sein soll erinnert sehr an die RadioButtons. Diese kannst du mittels Templates auch komplett im Style verändern.
    Wenn du auf einen RadioButton im Designer einen Rechtsklick machst und Vorlage bearbeiten > Kopie bearbeiten... wählst, kannst du dir den Standardstyle generieren lassen. Dort kannst du alles nach belieben anpassen - auch so das die RadioButtons wie normale Buttons aussehen.
    Einfacher wäre es jedoch das Template eines ToggleButton generieren zu lassen und den TargetType in RadioButton zu ändern. Die Styles sprechen genau die gleichen Eigenschaften an, sodass die RadioButtons aussehen wie ToggleButtons:

    Der Code dazu sieht wie folgt aus:

    <!--Muss in die Resources-Auflistung der Anwendung oder der Seite/des Controls-->
    <Thickness x:Key="PhoneBorderThickness">2.5</Thickness> <FontWeight x:Key="PhoneButtonFontWeight">Semibold</FontWeight> <x:Double x:Key="PhoneButtonMinHeight">57.5</x:Double> <x:Double x:Key="PhoneButtonMinWidth">109</x:Double> <Thickness x:Key="PhoneTouchTargetOverhang">0,9.5</Thickness> <Style TargetType="RadioButton"> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderBrush" Value="{ThemeResource PhoneForegroundBrush}"/> <Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/> <Setter Property="BorderThickness" Value="{ThemeResource PhoneBorderThickness}"/> <Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}"/> <Setter Property="FontWeight" Value="{ThemeResource PhoneButtonFontWeight}"/> <Setter Property="FontSize" Value="{ThemeResource TextStyleLargeFontSize}"/> <Setter Property="Padding" Value="9.5,0"/> <Setter Property="MinHeight" Value="{ThemeResource PhoneButtonMinHeight}"/> <Setter Property="MinWidth" Value="{ThemeResource PhoneButtonMinWidth}"/> <Setter Property="HorizontalAlignment" Value="Left"/> <Setter Property="VerticalAlignment" Value="Center"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ToggleButton"> <Grid Background="Transparent"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="PointerOver"/> <VisualState x:Name="Pressed"/> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EnabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Checked"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneAccentBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="EnabledContent"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneButtonBasePressedForegroundBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DisabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneDisabledBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="DisabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneDisabledBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DisabledContent"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneBackgroundBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="CheckedPointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneAccentBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="EnabledContent"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneButtonBasePressedForegroundBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DisabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneDisabledBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="DisabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneDisabledBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DisabledContent"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneBackgroundBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="CheckedPressed"/> <VisualState x:Name="CheckedDisabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneAccentBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="EnabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="0.4"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="EnabledContent"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PhoneButtonBasePressedForegroundBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Indeterminate"/> <VisualState x:Name="IndeterminatePointerOver"/> <VisualState x:Name="IndeterminatePressed"/> <VisualState x:Name="IndeterminateDisabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EnabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border x:Name="EnabledBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="{ThemeResource PhoneTouchTargetOverhang}"> <ContentPresenter x:Name="EnabledContent" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Border> <Border x:Name="DisabledBackground" BorderBrush="{ThemeResource ButtonDisabledBorderThemeBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" IsHitTestVisible="False" Margin="{ThemeResource PhoneTouchTargetOverhang}" Visibility="Collapsed"> <ContentPresenter x:Name="DisabledContent" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{ThemeResource ButtonDisabledForegroundThemeBrush}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
    Momentan würde der Style auf alle RadioButtons angewendet werden. Du kannst aber auch eine x:Key-Eigenschaft hinzufügen und so bestimmen, welche Controls den Style bekommen sollen:
    <Style TargetType="RadioButton" x:Key="myRadioButton">
    Zuordnung des Styles zu RadioButtons:
    <RadioButton Style="{StaticResource myRadioButton}"/>
    <RadioButton Style="{StaticResource myRadioButton}"/>
    <RadioButton Style="{StaticResource myRadioButton}"/>
    Wenn du nun andere Farben verwendne willst, musst du nur die jeweiligen Storyboards im VisualStateManager anpassen. (Ich habe im Code die Resourcen unterstrichen, die geladen werden wenn der RadioButton Angehakt ist.)
    Siehe auch: Schnellstart: Steuerelementvorlagen (XAML)

    PS: Mein Code funktioniert für Universal Apps. Für Silverlight Apps aber so ähnlich.


    Tom Lambert - C# MVP
    Wozu Antworten markieren und für Beiträge abstimmen? Klicke hier.
    Nützliche Links: .NET Quellcode | C# ↔ VB.NET Konverter | Account bestätigen (Verify Your Account)
    Ich: Webseite | Code Beispiele | Facebook | Twitter | Snippets

    • Als Antwort markiert brown78 Freitag, 12. September 2014 16:11
    Freitag, 12. September 2014 16:00
  • Oh man, an die RadioButtons hab ich gar nicht gedacht! *facepalm*

    Das macht das ganze natürlich um einiges einfacher. Danke für die Hilfe!!!


    br

    Freitag, 12. September 2014 16:12