none
当鼠标移动到按钮上时,按钮消失了(即变成白色) RRS feed

答案

  • Hi pingglala,

    我建议你先把Canvas的background颜色改成其他颜色,比如说蓝色红色之类的,你就能看到其实button并没有消失。

    根本的原因在于系统默认颜色的设定,当鼠标位于按钮上方的时候,按钮的前景色会根据按钮所处的背景色所改变(其实是带有透明度的白色,下面详细说明),下面这段代码将会被执行(如果你对Button的Style选择Edit the Copy)

    <VisualState x:Name="PointerOver">
    <Storyboard>
       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPointerOverBackgroundThemeBrush}"/>
       </ObjectAnimationUsingKeyFrames>
       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPointerOverForegroundThemeBrush}"/>
       </ObjectAnimationUsingKeyFrames>
    </Storyboard>
    </VisualState>

    而此时 ButtonPointerOverBackgroundThemeBrush以及ButtonPointerOverForegroundThemeBrush 的颜色对应的正好是(文档:http://msdn.microsoft.com/zh-cn/library/windows/apps/jj709909.aspx

    <SolidColorBrush x:Key="ButtonPointerOverBackgroundThemeBrush" Color="#21FFFFFF" />
    <SolidColorBrush x:Key="ButtonPointerOverForegroundThemeBrush" Color="#FFFFFFFF" />

    可以看到前景色为白色(FFFFFF),背景色同样为带有透明度的白色(21FFFFFF),所以才会看上去消失了一样,

    解决方案目前可以有:

    1,修改Canvas的背景色,从白色到其他颜色。

    2,修改Button的PointOver以及Pressed中涉及到的颜色。

    希望以上能帮你清楚的理解xaml中button的工作原理

    --James


    <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.



    2013年11月20日 14:02
    版主

全部回复

  • Hi pingglala,

    看起来你是在用一个Flyout的控件对吧,能把代码share给我看一下么,目前很难推测你的问题在哪里。

    --James


    <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.

    2013年11月20日 6:17
    版主
  •         <Popup
                x:Name="m_renameItemPopup"
                Margin="0,0,0,0"  
                Grid.Column="0" 
                Grid.ColumnSpan="5"
                Grid.Row="3"
                Width="270" 
                Height="130"
                IsLightDismissEnabled="True"
                HorizontalAlignment="Left" 
                VerticalAlignment="Bottom" >
                <Popup.ChildTransitions>
                    <TransitionCollection>
                        <EdgeUIThemeTransition Edge="Bottom"/>
                    </TransitionCollection>
                </Popup.ChildTransitions>
    
                <Canvas 
                x:Name="m_renameItemCanvas" 
                Visibility="Collapsed" 
                Background="White" 
                Width="270" 
                Height="130" >
    
                    <Rectangle Width="270" Height="130" Canvas.ZIndex="0" Stroke="Black" StrokeThickness="3" Fill="White"/>
                    <TextBox x:Name="m_renameTextBox" Foreground="Black" Width="205" Height="auto" Text="" BorderThickness="1" BorderBrush="Gray"  Canvas.ZIndex="1" Canvas.Left="25" Canvas.Top="24" />
                    <Button Canvas.ZIndex="1" Foreground="Black" Canvas.Left="171" Canvas.Top="83" Content="确认" Background="#7425d0" BorderThickness="0" BorderBrush="White" Height="37" Width="89" RenderTransformOrigin="0.647,0.432" Click="RenameEnsureBut_ClickEvent"/>
    
                </Canvas>
    
            </Popup>
    以上是弹出的框代码
    2013年11月20日 11:20
  • void MYPT::SecondMainPage::AppbarRenameBut_ClickEvent(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
    	if(m_renameItemPopup->IsOpen == false)
    	{
    		if(m_fileSelItems.size() + m_folderSelItems.size() == 1)
    		{
    			m_renameItemPopup->IsOpen = true;
    			m_renameItemCanvas->Visibility = Windows::UI::Xaml::Visibility::Visible;
    		}	
    	}
    	else
    	{
    		m_renameItemPopup->IsOpen = false;
    		m_renameItemCanvas->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
    	}
    }
    以上是点击按钮时,弹出框框的代码。
    2013年11月20日 11:26
  • Hi pingglala,

    我建议你先把Canvas的background颜色改成其他颜色,比如说蓝色红色之类的,你就能看到其实button并没有消失。

    根本的原因在于系统默认颜色的设定,当鼠标位于按钮上方的时候,按钮的前景色会根据按钮所处的背景色所改变(其实是带有透明度的白色,下面详细说明),下面这段代码将会被执行(如果你对Button的Style选择Edit the Copy)

    <VisualState x:Name="PointerOver">
    <Storyboard>
       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPointerOverBackgroundThemeBrush}"/>
       </ObjectAnimationUsingKeyFrames>
       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPointerOverForegroundThemeBrush}"/>
       </ObjectAnimationUsingKeyFrames>
    </Storyboard>
    </VisualState>

    而此时 ButtonPointerOverBackgroundThemeBrush以及ButtonPointerOverForegroundThemeBrush 的颜色对应的正好是(文档:http://msdn.microsoft.com/zh-cn/library/windows/apps/jj709909.aspx

    <SolidColorBrush x:Key="ButtonPointerOverBackgroundThemeBrush" Color="#21FFFFFF" />
    <SolidColorBrush x:Key="ButtonPointerOverForegroundThemeBrush" Color="#FFFFFFFF" />

    可以看到前景色为白色(FFFFFF),背景色同样为带有透明度的白色(21FFFFFF),所以才会看上去消失了一样,

    解决方案目前可以有:

    1,修改Canvas的背景色,从白色到其他颜色。

    2,修改Button的PointOver以及Pressed中涉及到的颜色。

    希望以上能帮你清楚的理解xaml中button的工作原理

    --James


    <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.



    2013年11月20日 14:02
    版主
  • 我已经在APP.XAML里添加了以下代码,改变了鼠标移到按钮上的前景色与背景色。但是,添加后,鼠标移动到按钮上时颜色都变一样。

    但我程序里面按钮有很多个,有的按钮是紫色的,有的是灰色的,我想让鼠标移到按钮上面时,他们的颜色都不变。请问这应该如何操作呢?

                <SolidColorBrush x:Key="ButtonPointerOverBackgroundThemeBrush" Color="#7425d0" />
                <SolidColorBrush x:Key="ButtonPointerOverForegroundThemeBrush" Color="Black" />
    

    2013年11月21日 2:36
  • 在APP.xaml中直接添加代码不是一个好的办法,因为如果其他控件也引用了buttonPointerOverBackgroundThemeBrush,会同样受到影响,建议你单独改变button的样式来实现。

    在VS的xaml页面对button单击右键,选择EditTemplate->Edit a Copy,可以选择在Application中定义,然后修改PointOver和Pressed中Background以及Foreground的值。

    这样做的好处就是你的目标button会使用你新定义的ButtonStyle,而不会影响到其他button的正常工作。


    <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.

    2013年11月21日 7:08
    版主
  • 好的,目前也是这么做的!thanks~
    2013年11月22日 3:42