none
VisualState automatically changes when the control or its parent control lost focus RRS feed

  • Question

  • I've met a problem when using the VisualState. In the "Common State" VisualStateGroup, there are four VisualStates which are "Normal","Selected","PointerOver","SelectedAndPointerOver".

    <VisualState x:Name="Normal">
                                        </VisualState>
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ColorAnimation Storyboard.TargetName="Brush" Storyboard.TargetProperty="Color" To="#007ACC" Duration="0">
                                                </ColorAnimation>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <ColorAnimation Storyboard.TargetName="Brush" Storyboard.TargetProperty="Color" To="#CA5100" Duration="0">
                                                </ColorAnimation>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="SelectedAndPointerOver">
                                            <Storyboard>
                                                <ColorAnimation Storyboard.TargetName="Brush" Storyboard.TargetProperty="Color" To="#9932CC" Duration="0">
                                                </ColorAnimation>
                                            </Storyboard>
                                        </VisualState>

    And its corresponding transitions.

                                            <VisualTransition To="PointerOver">
                                                <Storyboard>
                                                    <ColorAnimation Storyboard.TargetName="Brush" Storyboard.TargetProperty="Color" To="#007ACC" Duration="0:0:0.5">
                                                    </ColorAnimation>
                                                </Storyboard>
                                            </VisualTransition>
                                            <VisualTransition To="Selected">
                                                <Storyboard>
                                                    <ColorAnimation Storyboard.TargetName="Brush" Storyboard.TargetProperty="Color" To="#CA5100" Duration="0:0:0.5">
                                                    </ColorAnimation>
                                                </Storyboard>
                                            </VisualTransition>
                                            <VisualTransition To="Normal">
                                                <Storyboard>
                                                    <ColorAnimation Storyboard.TargetName="Brush" Storyboard.TargetProperty="Color" To="Transparent" Duration="0:0:0.5">
                                                    </ColorAnimation>
                                                </Storyboard>
                                            </VisualTransition>
                                            <VisualTransition To="SelectedAndPointerOver">
                                                <Storyboard>
                                                    <ColorAnimation Storyboard.TargetName="Brush" Storyboard.TargetProperty="Color" To="#9932CC" Duration="0:0:0.5">
                                                    </ColorAnimation>
                                                </Storyboard>
                                            </VisualTransition>

    When I press the button, it changes to the "Selected" state. But when I press another button, the previous one will lose its focus and automatically changes to "Normal" state even if I did not define this behavior. So I set the "LostFocus" event to update the state of the control to prevent this from happening.

            private void LostFocus(object sender, RoutedEventArgs e)
            {
                if (!m_select_map[sender as Button])//Check the state
                    VisualStateManager.GoToState(sender as FrameworkElement, "Normal", false);
                else
                    VisualStateManager.GoToState(sender as FrameworkElement, "Selected", false);
            }

    But this still happens when its top control, the MainWindow, lost its focus.

    Can anyone tell me why and how to prevent this from happening.


    • Edited by HexJacranda Wednesday, June 12, 2019 3:08 PM
    Wednesday, June 12, 2019 3:07 PM

Answers

  • Hi  HexJacranda,   

    >>When test began, the button was Red. After I clicked the button, it turned Green. However, when I moved the mouse away from the button, the button automatically turned to Red without the “Let's go to Normal state” printed in the debug console. I wonder why it is so. And the same happened after the button lost its focus.

    It's very strange, because normally the state should always keep when there is no transitions.


    The Normal VisualState is The default state for the Button control.

    It seems when your moved the mouse away from the button and the button will go to the Normal state(The Normal state is the state the button is in when it is not in another state from this VisualStateGroup). You can just rename Normal to Normaltemp.

       <Window.Resources>
            <Style x:Key="ButtonStyle" TargetType="Button">
                 
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <Grid.Background>
                                    <SolidColorBrush x:Name="Brush" Color="Black"></SolidColorBrush>
                                </Grid.Background>
                                
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normatemp">
                                            <Storyboard>
                                                <ColorAnimation Duration="0:0:0"  Storyboard.TargetName="Brush" Storyboard.TargetProperty="Color" To="Red"></ColorAnimation>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Click">
                                            <Storyboard>
                                                <ColorAnimation Duration="0:0:0" Storyboard.TargetName="Brush" Storyboard.TargetProperty="Color" To="Green"></ColorAnimation>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition To="Normatemp">
                                                <Storyboard>
                                                    <ColorAnimation Storyboard.TargetName="Brush" Storyboard.TargetProperty="Color" To="Red" Duration="0:0:1" ></ColorAnimation>
                                                </Storyboard>
                                            </VisualTransition>
                                            
                                            <VisualTransition To="Click">
                                                <Storyboard>
                                                    <ColorAnimation Storyboard.TargetName="Brush" Storyboard.TargetProperty="Color" To="Green" Duration="0:0:1"></ColorAnimation>
                                                </Storyboard>
                                            </VisualTransition>
                                            
                                        </VisualStateGroup.Transitions>
                                    </VisualStateGroup>
    
                                    <VisualStateGroup x:Name="FocusStates">
                                        <VisualState x:Name="Focused">
                                            <Storyboard>
                                                <ColorAnimation Storyboard.TargetName="Brush" Storyboard.TargetProperty="Color" To="Yellow"></ColorAnimation>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unfocused" />
                                    </VisualStateGroup>
                                    
                                </VisualStateManager.VisualStateGroups>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>
        <Grid>
            <Button x:Name="Target" Style="{DynamicResource  ButtonStyle}" Content="Button" HorizontalAlignment="Left"  Height="90"  VerticalAlignment="Top" Width="192" Margin="100,170,0,0"/>
            <ComboBox HorizontalAlignment="Left" Margin="425,174,0,0" VerticalAlignment="Top" Width="120"/>
        </Grid>

    Best regards

    Yong Lu


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by HexJacranda Tuesday, June 18, 2019 8:12 AM
    Monday, June 17, 2019 9:09 AM
    Moderator

All replies

  • Hi HexJacranda,

    We can’t give an accurate analysis based on the code you provided, could you give us a sample which could reproduce the issue to analyze? Thanks for your understanding.

    Best regards

    Yong Lu


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Thursday, June 13, 2019 10:20 AM
    Moderator
  • Here is a rather simple program to simulate the strange behaviour.

    A button style with two states,"Normal" and "Click".

    <Style x:Key="ButtonStyle" TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <Grid.Background>
                                    <SolidColorBrush x:Name="Brush"></SolidColorBrush>
                                </Grid.Background>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal">
                                            <Storyboard>
                                                <ColorAnimation Storyboard.TargetName="Brush" Storyboard.TargetProperty="Color" To="Red"></ColorAnimation>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Click">
                                            <Storyboard>
                                                <ColorAnimation Storyboard.TargetName="Brush" Storyboard.TargetProperty="Color" To="Green"></ColorAnimation>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition To="Normal">
                                                <Storyboard>
                                                    <ColorAnimation Storyboard.TargetName="Brush" Storyboard.TargetProperty="Color" To="Red" Duration="0:0:1"></ColorAnimation>
                                                </Storyboard>
                                            </VisualTransition>
                                            <VisualTransition To="Click">
                                                <Storyboard>
                                                    <ColorAnimation Storyboard.TargetName="Brush" Storyboard.TargetProperty="Color" To="Green" Duration="0:0:1"></ColorAnimation>
                                                </Storyboard>
                                            </VisualTransition>
                                        </VisualStateGroup.Transitions>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    And the logic is that when the button is clicked, it goes from one state to another.

    So the following is the Click event code, very easily done with a boolean variable to record the state.

            public MainWindow()
            {
                InitializeComponent();
                Target.Click += (sender, e) =>
                {
                    if (IsSelected)
                    {
                        Console.WriteLine("Let's go to Normal state!");
                        VisualStateManager.GoToState(sender as FrameworkElement, "Normal", true);
                    }
                    else
                    {
                        Console.WriteLine("Let's go to Click state!");
                        VisualStateManager.GoToState(sender as FrameworkElement, "Click", true);
                    }
                    IsSelected = !IsSelected;
                };
            }
            private bool IsSelected = false;

    When test began, the button was Red. After I clicked the button, it turned Green. However, when I moved the mouse away from the button, the button automatically turned to Red without the “Let's go to Normal state” printed in the debug console. I wonder why it is so. And the same happened after the button lost its focus.

    It's very strange, because normally the state should always keep when there is no transitions.


    • Edited by HexJacranda Thursday, June 13, 2019 2:33 PM
    Thursday, June 13, 2019 2:29 PM
  • Hi  HexJacranda,   

    >>When test began, the button was Red. After I clicked the button, it turned Green. However, when I moved the mouse away from the button, the button automatically turned to Red without the “Let's go to Normal state” printed in the debug console. I wonder why it is so. And the same happened after the button lost its focus.

    It's very strange, because normally the state should always keep when there is no transitions.


    The Normal VisualState is The default state for the Button control.

    It seems when your moved the mouse away from the button and the button will go to the Normal state(The Normal state is the state the button is in when it is not in another state from this VisualStateGroup). You can just rename Normal to Normaltemp.

       <Window.Resources>
            <Style x:Key="ButtonStyle" TargetType="Button">
                 
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <Grid.Background>
                                    <SolidColorBrush x:Name="Brush" Color="Black"></SolidColorBrush>
                                </Grid.Background>
                                
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normatemp">
                                            <Storyboard>
                                                <ColorAnimation Duration="0:0:0"  Storyboard.TargetName="Brush" Storyboard.TargetProperty="Color" To="Red"></ColorAnimation>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Click">
                                            <Storyboard>
                                                <ColorAnimation Duration="0:0:0" Storyboard.TargetName="Brush" Storyboard.TargetProperty="Color" To="Green"></ColorAnimation>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition To="Normatemp">
                                                <Storyboard>
                                                    <ColorAnimation Storyboard.TargetName="Brush" Storyboard.TargetProperty="Color" To="Red" Duration="0:0:1" ></ColorAnimation>
                                                </Storyboard>
                                            </VisualTransition>
                                            
                                            <VisualTransition To="Click">
                                                <Storyboard>
                                                    <ColorAnimation Storyboard.TargetName="Brush" Storyboard.TargetProperty="Color" To="Green" Duration="0:0:1"></ColorAnimation>
                                                </Storyboard>
                                            </VisualTransition>
                                            
                                        </VisualStateGroup.Transitions>
                                    </VisualStateGroup>
    
                                    <VisualStateGroup x:Name="FocusStates">
                                        <VisualState x:Name="Focused">
                                            <Storyboard>
                                                <ColorAnimation Storyboard.TargetName="Brush" Storyboard.TargetProperty="Color" To="Yellow"></ColorAnimation>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unfocused" />
                                    </VisualStateGroup>
                                    
                                </VisualStateManager.VisualStateGroups>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>
        <Grid>
            <Button x:Name="Target" Style="{DynamicResource  ButtonStyle}" Content="Button" HorizontalAlignment="Left"  Height="90"  VerticalAlignment="Top" Width="192" Margin="100,170,0,0"/>
            <ComboBox HorizontalAlignment="Left" Margin="425,174,0,0" VerticalAlignment="Top" Width="120"/>
        </Grid>

    Best regards

    Yong Lu


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by HexJacranda Tuesday, June 18, 2019 8:12 AM
    Monday, June 17, 2019 9:09 AM
    Moderator
  • Problem solved! Thank you!
    Tuesday, June 18, 2019 8:12 AM