locked
How to change highlight and click colour for a button RRS feed

  • Question

  • Here's a style that I have currently:

            <Style x:Key="btnTest" TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Pressed"/>
                                        <VisualState x:Name="Disabled"/>
                                        <VisualState x:Name="PointerOver"/>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="FocusStates">
                                        <VisualState x:Name="Focused"/>
                                        <VisualState x:Name="PointerFocused"/>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <TextBlock x:Name="name" HorizontalAlignment="Left" Height="28" Margin="-82,41,-81,-27" TextWrapping="Wrap" Text="{TemplateBinding Content}" VerticalAlignment="Top" Width="205" TextAlignment="Center"/>
                                <Ellipse x:Name="circle" Fill="{TemplateBinding Background}" Stroke="White" StrokeThickness="2"/>
                                <TextBlock x:Name="no1" HorizontalAlignment="Left" Height="21" Margin="-13,11,-14,0" TextWrapping="Wrap" Text="{TemplateBinding Tag}" VerticalAlignment="Top" Width="69" TextAlignment="Center"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    How do I add the feature that you click/press the button that it highlights itself to a very specific colour? I also want to make sure that I can revert to the original colour when the button is deselected.

    I was also thinking that something like:

    Button b = new Button();
    b.Background = // something here

    What can go on the right-hand side?



    • Edited by EddyTheBlack Sunday, September 15, 2013 3:48 PM Adding extra information
    Sunday, September 15, 2013 3:44 PM

Answers

  • Hi, EddyTheBlack

    You can use VisualStateManager class to change button backgroud colour with different state,like pointenter and pointExist. VisualStateManager enables you to specify states for a control, the appearance of a control when it is in a certain state, and when a control changes states. The appearance of a control when it is in a state is defined by a VisualState. A VisualState contains a collection of Storyboard objects that specify how the control's appearance changes when the control is in that state.

    The sample below can make the button background color change when you put pointer over the button and put pointer leave the button:

    In XAML:

    <Style x:Key="btnTest" TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Pressed"/>
                                        <VisualState x:Name="Disabled"/>
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ColorAnimation To="Green" 
                              Storyboard.TargetName="rectBrush" 
                              Storyboard.TargetProperty="Color" Duration="0"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pointerleave">
                                            <Storyboard>
                                                <ColorAnimation To="Transparent" 
                              Storyboard.TargetName="rectBrush" 
                              Storyboard.TargetProperty="Color" Duration="0"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="FocusStates">
                                        <VisualState x:Name="Focused"/>
                                        <VisualState x:Name="PointerFocused"/>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <TextBlock x:Name="name" HorizontalAlignment="Left" Height="28" Margin="-82,41,-81,-27" TextWrapping="Wrap" Text="{TemplateBinding Content}" VerticalAlignment="Top" Width="205" TextAlignment="Center"/>
                                <Ellipse x:Name="circle"  Stroke="White" StrokeThickness="2">
                                    <Ellipse.Fill>
                                        <SolidColorBrush x:Name="rectBrush" Color="Transparent"/>
                                    </Ellipse.Fill>
                                </Ellipse>
                                <TextBlock x:Name="no1" HorizontalAlignment="Left" Height="21" Margin="-13,11,-14,0" TextWrapping="Wrap" Text="{TemplateBinding Tag}" VerticalAlignment="Top" Width="69" TextAlignment="Center"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    
    
     <Button Style="{StaticResource btnTest}" RenderTransformOrigin="17.691,0.311" Height="66" Margin="0,375,0,327" Width="174" PointerEntered="Button_PointerEntered_1" x:Name="button" PointerExited="button_PointerExited" />

    In code-behind, use VisualStateManager.GoToState method to make the change :

     private void Button_PointerEntered_1(object sender, PointerRoutedEventArgs e)
            {
                VisualStateManager.GoToState(button, "PointerOver", true);
            }
    
            private void button_PointerExited(object sender, PointerRoutedEventArgs e)
            {
                VisualStateManager.GoToState(button, "Pointerleave", true);
            }

    Best Wishes!




    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by Anne Jing Friday, September 20, 2013 1:33 AM
    Monday, September 16, 2013 9:48 AM

All replies

  • Hello EddyTheBlack,

    Try to this step:

    1. open page in Blend.
    2. open that button's style, If not create than create.
    3. Than goto this state (Pressed, PointerOver, etc...).
    4. Than change the style of that state, than save & run this project.

    This thing is working for me. May be work for you.

    Monday, September 16, 2013 5:02 AM
  • Hi, EddyTheBlack

    You can use VisualStateManager class to change button backgroud colour with different state,like pointenter and pointExist. VisualStateManager enables you to specify states for a control, the appearance of a control when it is in a certain state, and when a control changes states. The appearance of a control when it is in a state is defined by a VisualState. A VisualState contains a collection of Storyboard objects that specify how the control's appearance changes when the control is in that state.

    The sample below can make the button background color change when you put pointer over the button and put pointer leave the button:

    In XAML:

    <Style x:Key="btnTest" TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Pressed"/>
                                        <VisualState x:Name="Disabled"/>
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ColorAnimation To="Green" 
                              Storyboard.TargetName="rectBrush" 
                              Storyboard.TargetProperty="Color" Duration="0"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pointerleave">
                                            <Storyboard>
                                                <ColorAnimation To="Transparent" 
                              Storyboard.TargetName="rectBrush" 
                              Storyboard.TargetProperty="Color" Duration="0"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="FocusStates">
                                        <VisualState x:Name="Focused"/>
                                        <VisualState x:Name="PointerFocused"/>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <TextBlock x:Name="name" HorizontalAlignment="Left" Height="28" Margin="-82,41,-81,-27" TextWrapping="Wrap" Text="{TemplateBinding Content}" VerticalAlignment="Top" Width="205" TextAlignment="Center"/>
                                <Ellipse x:Name="circle"  Stroke="White" StrokeThickness="2">
                                    <Ellipse.Fill>
                                        <SolidColorBrush x:Name="rectBrush" Color="Transparent"/>
                                    </Ellipse.Fill>
                                </Ellipse>
                                <TextBlock x:Name="no1" HorizontalAlignment="Left" Height="21" Margin="-13,11,-14,0" TextWrapping="Wrap" Text="{TemplateBinding Tag}" VerticalAlignment="Top" Width="69" TextAlignment="Center"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    
    
     <Button Style="{StaticResource btnTest}" RenderTransformOrigin="17.691,0.311" Height="66" Margin="0,375,0,327" Width="174" PointerEntered="Button_PointerEntered_1" x:Name="button" PointerExited="button_PointerExited" />

    In code-behind, use VisualStateManager.GoToState method to make the change :

     private void Button_PointerEntered_1(object sender, PointerRoutedEventArgs e)
            {
                VisualStateManager.GoToState(button, "PointerOver", true);
            }
    
            private void button_PointerExited(object sender, PointerRoutedEventArgs e)
            {
                VisualStateManager.GoToState(button, "Pointerleave", true);
            }

    Best Wishes!




    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by Anne Jing Friday, September 20, 2013 1:33 AM
    Monday, September 16, 2013 9:48 AM