none
请教WPF Button显示图片 RRS feed

  • 问题

  • 我想为一个Button添加背景图片,代码如下
     <Button HorizontalAlignment="Left"Margin="10,7,0,6" Name="reset" Width="64" Click="on_command" >
                    <Image Source="res/reset.png" />
                </Button>
    总是提示不能将值

    res/reset.png赋给属性Source,值不在预期范围内,请教下这是为什么呢? 怎样才能为Button添加图片呢?

    还有,当Button被点击后,会一直这样的闪烁,请问如何去掉这个效果呢? 谢谢

    2012年6月14日 12:23

答案

  • 第一个问题,如果你编译运行是好的,那就好了,因为设计器无法再设计时探测到你的文件。还有,你在项目中建立了res目录并且将reset.png include到项目中放入res中了吗?且设置了reset.png 的Build Action为 Resoruces:

    闪烁的效果是Button的内部控制的VisualState决定的。http://msdn.microsoft.com/en-us/library/ms753328.aspx 文档列出了Button的默认样式和VisualState. 你可以重写他的模板来定义自己的行为。

    例如我们移除  RenderDefaulted="{TemplateBinding Button.IsDefaulted}" RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}"  ,就可以避免闪烁。

        <ControlTemplate TargetType="ButtonBase">
          <my:ButtonChrome Background="{TemplateBinding Control.Background}" BorderBrush="{TemplateBinding Control.BorderBrush}" Name="Chrome" RenderPressed="{TemplateBinding ButtonBase.IsPressed}" SnapsToDevicePixels="True">
            <ContentPresenter Content="{TemplateBinding ContentControl.Content}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" Margin="{TemplateBinding Control.Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" />
          </my:ButtonChrome>
          <ControlTemplate.Triggers>
            <Trigger Property="UIElement.IsKeyboardFocused" Value="True">
              <Setter Property="my:ButtonChrome.RenderDefaulted" TargetName="Chrome" Value="True" />
            </Trigger>
            <Trigger Property="ToggleButton.IsChecked" Value="True">
              <Setter Property="my:ButtonChrome.RenderPressed" TargetName="Chrome" Value="True" />
            </Trigger>
            <Trigger Property="UIElement.IsEnabled" Value="False">
              <Setter Property="Control.Foreground" Value="#FFADADAD" />
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>

    -------------------------------

    最后送你一个我写的图片按钮:http://code.msdn.microsoft.com/windowsdesktop/Dynamic-Image-Button-in-WPF-caec28b7

    做一个好的图片按钮,肯定是从修改重写样式模板开始。


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年6月15日 7:13
    版主

全部回复

  • 第一个问题,如果你编译运行是好的,那就好了,因为设计器无法再设计时探测到你的文件。还有,你在项目中建立了res目录并且将reset.png include到项目中放入res中了吗?且设置了reset.png 的Build Action为 Resoruces:

    闪烁的效果是Button的内部控制的VisualState决定的。http://msdn.microsoft.com/en-us/library/ms753328.aspx 文档列出了Button的默认样式和VisualState. 你可以重写他的模板来定义自己的行为。

    例如我们移除  RenderDefaulted="{TemplateBinding Button.IsDefaulted}" RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}"  ,就可以避免闪烁。

        <ControlTemplate TargetType="ButtonBase">
          <my:ButtonChrome Background="{TemplateBinding Control.Background}" BorderBrush="{TemplateBinding Control.BorderBrush}" Name="Chrome" RenderPressed="{TemplateBinding ButtonBase.IsPressed}" SnapsToDevicePixels="True">
            <ContentPresenter Content="{TemplateBinding ContentControl.Content}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" Margin="{TemplateBinding Control.Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" />
          </my:ButtonChrome>
          <ControlTemplate.Triggers>
            <Trigger Property="UIElement.IsKeyboardFocused" Value="True">
              <Setter Property="my:ButtonChrome.RenderDefaulted" TargetName="Chrome" Value="True" />
            </Trigger>
            <Trigger Property="ToggleButton.IsChecked" Value="True">
              <Setter Property="my:ButtonChrome.RenderPressed" TargetName="Chrome" Value="True" />
            </Trigger>
            <Trigger Property="UIElement.IsEnabled" Value="False">
              <Setter Property="Control.Foreground" Value="#FFADADAD" />
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>

    -------------------------------

    最后送你一个我写的图片按钮:http://code.msdn.microsoft.com/windowsdesktop/Dynamic-Image-Button-in-WPF-caec28b7

    做一个好的图片按钮,肯定是从修改重写样式模板开始。


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年6月15日 7:13
    版主
  • 谢谢耐心的讲解,感激不尽。
    2012年6月15日 9:53