locked
button in Popup won't change to Normal from PointerOver RRS feed

  • Question

  • Hello,

    I put a buttonA on appbar, click buttonA will call up a Popup, which contain a buttonB, click buttonB will disappear appbar  & popup.

    the style of buttonB is as followed:

    <Style x:Key="DCSquareButtonStyle" TargetType="Button">
                    <Setter Property="Background" Value="#9ab300"/>
                    <Setter Property="Foreground" Value="{StaticResource ButtonForegroundThemeBrush}"/>
                    <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderThemeBrush}"/>
                    <Setter Property="BorderThickness" Value="{StaticResource ButtonBorderThemeThickness}"/>
                    <Setter Property="Padding" Value="12,4,12,4"/>
                    <Setter Property="HorizontalAlignment" Value="Left"/>
                    <Setter Property="VerticalAlignment" Value="Center"/>
                    <Setter Property="VerticalContentAlignment" Value="Center"/>
                    <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
                    <Setter Property="FontWeight" Value="SemiBold"/>
                    <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                                <Grid>
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal"/>
                                            <VisualState x:Name="PointerOver">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Yellow"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Pressed">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="DarkGray"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                   
                                                </Storyboard>
                                            </VisualState>
                                           
                                            <VisualState x:Name="Disabled">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBackgroundThemeBrush}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBorderThemeBrush}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledForegroundThemeBrush}"/>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                        <VisualStateGroup x:Name="FocusStates">
                                            <VisualState x:Name="Focused">
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
                                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Unfocused"/>
                                            <VisualState x:Name="PointerFocused"/>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="3">
                                        <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                    </Border>
                                    <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
                                    <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

     

    the Popup is as followed:

    <Popup x:Name="DeleteConfirmPopup" IsLightDismissEnabled="True">
                <Grid Background="White">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <TextBlock x:Name="DeleteConfirmText" FontFamily="Microsoft YaHei UI" Foreground="Black" Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20,15,0,0"  Text="123" FontSize="20" TextWrapping="Wrap"/>

                    <Button x:Name="buttonB" FontSize="15" Grid.Row="1" Style="{StaticResource DCSquareButtonStyle}" Background="Red"  HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,20,20" Width="100" Height="40" Click="OnDeleteConfirmClicked"></Button>

                </Grid>
            </Popup>

    THE Problem is :

    Initially the buttonB is Red, move pointer to buttonB it will turn to Yellow, after click it changed to DarkGray; after click buttonB i hide the Popup by setting IsOpen = false; then I reopen the popup, but the color of buttonB still keep Yellow, buttonB won't be Red unless I first move the pointer into buttonB then move outside buttonB.

     

    Why?  did I hide the Popup won't reset the buttonB status ?

    (by the way, if i navigate to another page, then navigate back this page, try to show buttonB,  buttonB will show Red; If i keep in the same page, after click buttonB, then reopen to show buttonB, it always show Yellow, which is wrong.)

    Please help.

     


    programmer

    Sunday, April 7, 2013 9:10 AM

Answers

  • Known issue unfortunately, the suggestion of somehow calling the state before you lose the element is a good one.

    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer

    (if my post has answered your question, please consider using the 'mark as answer' feature in the forums to help others)

    Monday, April 8, 2013 12:00 AM

All replies

  • A bit of a kludge, but try calling VisualStateManager.GoToState(buttonB, "Normal", useTransitions) when you close the popup.


    Rebecca M. Riordan

    • Proposed as answer by sankarann Friday, April 26, 2013 6:28 AM
    Sunday, April 7, 2013 1:47 PM
  • Known issue unfortunately, the suggestion of somehow calling the state before you lose the element is a good one.

    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer

    (if my post has answered your question, please consider using the 'mark as answer' feature in the forums to help others)

    Monday, April 8, 2013 12:00 AM
  • Known issue unfortunately, the suggestion of somehow calling the state before you lose the element is a good one.

    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer

    (if my post has answered your question, please consider using the 'mark as answer' feature in the forums to help others)


    Thanks Tim, like your tech blogs. it helps much !

    programmer

    Monday, April 8, 2013 2:36 AM
  • Known issue unfortunately, the suggestion of somehow calling the state before you lose the element is a good one.

    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer

    (if my post has answered your question, please consider using the 'mark as answer' feature in the forums to help others)


    Add more question,

    how to call the state, how to know the element will lost?

    I hide the Popup in the following code, before I call “IsOpen = false”,  I try to use VisualStateManager to change to Normal state.

    but not work.

    So how to code as your suggestion ?

     private void DisappearPopupDeleteConfirm()
            {
                try
                {
                    if (DeleteConfirmPopup.IsOpen)
                    {
                        VisualStateManager.GoToState(DeleteConfirmBtn, "Normal", false);

                        DeleteConfirmPopup.IsOpen = false;
                    }
                }
                catch (Exception ex)
                {
                   //
                }

               
            }


    programmer


    • Edited by strongpan Thursday, April 11, 2013 9:49 AM change something.
    Thursday, April 11, 2013 9:48 AM
  • You need to move call GoToState on the button. I'm sorry I didn't make that clear.

    I think what Tim mean by "lose it" is lose the reference to it inside the event handler (but mind reading is not on my CV for a reason).


    Rebecca M. Riordan

    Thursday, April 11, 2013 11:41 AM
  • You need to move call GoToState on the button. I'm sorry I didn't make that clear.

    I think what Tim mean by "lose it" is lose the reference to it inside the event handler (but mind reading is not on my CV for a reason).


    Rebecca M. Riordan

    I don't quite understand. how to move the call GoToState On the button ?

    and which event handler ?

    thanks.


    programmer

    Friday, April 12, 2013 1:59 AM
  • You need to move call GoToState on the button. I'm sorry I didn't make that clear.

    I think what Tim mean by "lose it" is lose the reference to it inside the event handler (but mind reading is not on my CV for a reason).


    Rebecca M. Riordan

    I don't quite understand. how to move the call GoToState On the button ?

    and which event handler ?

    thanks.


    programmer

    Add more descirption:

    The button I want to change state have a customized style, how to change the button to the style defined in my customize style, as shown in my first thread DCSquareButtonStyle?


    programmer

    Friday, April 12, 2013 2:14 AM
  • hello,

    anyone can help on this ?


    programmer

    Monday, April 15, 2013 3:06 AM
  • Sorry, strongpan, the notifications on this thread somehow ended up in my junk folder...

    Looking back at your sample of calling GoToState(), you're doing precisely what I'd suggested, so clearly the kludge isn't going to fix the problem. The only other thing I can suggest is to try also setting it to UnFocused. If that doesn't work, try setting the state when you open the popup as well.

    And if none of those work, if you post a stripped down sample project somewhere, I'll be happy to fiddle around with it, but I don't know that I'll achieve anything, since you've already done what I thought might fix the problem.


    Rebecca M. Riordan

    Monday, April 15, 2013 12:12 PM
  • Hello Rebecca,

    I just upload my HelpProject.zip on my SkyDrive in the Public folder, (strongpan@live.com), but I don't know where to get the link to share the file with you.

    Maybe you can find it on the skydrive yourself, or tell me how.

    Please help to fiddle around with it.

    Thanks so much.


    programmer

    Tuesday, April 23, 2013 6:04 AM
  • Oh, sweetie. I'm pretty much the last person on the planet you should ask about something like that!

    I can tell you what I do: I go to the folder and copy the URL from the top of the browser and then paste it here. I'm pretty sure there's a more sophisticated way to do it, but that seems to work. (strongpan@live.com takes me to email.)


    Rebecca M. Riordan

    Tuesday, April 23, 2013 10:14 AM
  • Hello,

    Yes, the linkage is a little weird, help to check which one you can access, the Project name is :HelpProject.zip ;

    https://skydrive.live.com/redir?resid=6DDDD4F2639093C8!140

    or

    https://skydrive.live.com/redir.aspx?cid=6dddd4f2639093c8&page=self&resid=6DDDD4F2639093C8!570&parid=6DDDD4F2639093C8!140&authkey=!An2J8I7vOPlbTW8&Bpub=SDX.SkyDrive&Bsrc=Share

    or

    https://skydrive.live.com/#cid=6DDDD4F2639093C8&id=6DDDD4F2639093C8%21140


    programmer

    Wednesday, April 24, 2013 1:30 AM
  • Oh, sweetie. I'm pretty much the last person on the planet you should ask about something like that!

    I can tell you what I do: I go to the folder and copy the URL from the top of the browser and then paste it here. I'm pretty sure there's a more sophisticated way to do it, but that seems to work. (strongpan@live.com takes me to email.)


    Rebecca M. Riordan

    Hello Rebecca,

    Please help to check the HelpProject.zip on the Skydriver public folder , https://skydrive.live.com/redir?resid=6DDDD4F2639093C8!140

    Thanks.


    programmer

    Friday, April 26, 2013 1:12 AM
  • Oh, sweetie. I'm pretty much the last person on the planet you should ask about something like that!

    I can tell you what I do: I go to the folder and copy the URL from the top of the browser and then paste it here. I'm pretty sure there's a more sophisticated way to do it, but that seems to work. (strongpan@live.com takes me to email.)


    Rebecca M. Riordan


    Hello Rebecca,

    Please help to check the HelpProject.zip on the Skydriver public folder , https://skydrive.live.com/redir?resid=6DDDD4F2639093C8!140

    Thanks.


    programmer

    Saturday, April 27, 2013 7:34 AM
  • strongpan,

    Got it. My work has gone a bit insane the last few days, but I'll look at it as soon as I can. I'm afraid I don't love you enough to turn an 18-hour workday into a 20-hour workday ;)


    Rebecca M. Riordan

    Saturday, April 27, 2013 10:02 AM
  • Rebecca,

    I totally understand.

    When you are available, please offer your hand. Thanks so much.


    programmer

    Friday, May 3, 2013 7:32 AM