WPF——給button添加背景圖片

首先要肯定，代碼：

<Button ToolTip="Set_Label" Name="set_label1" Click="set_label_Click" Height="45" VerticalAlignment="Stretch" Width="45" HorizontalAlignment="Stretch">
    <Image Stretch="UniformToFill" Name="Recogimg" Source="E:/梁棟凱/software/PstPro2016/PstPro2016/Images/set.png" />                                         
</Button >

是正確的。這里對Background的設置，就是用於添加一張背景圖片。
這樣的代碼，編譯絕對沒有問題。但一運行，馬上報錯。報的是XML解析的錯誤。

找來找去，問題在於圖片 “set.png" 上。圖片是存在的，但問題在於它還沒有被包含進項目中，所以運行就出錯了。在VS中，將圖片包含進項目，或是將路徑改成絕對路徑，就一切OK。

這種錯誤，不報找不到圖片，卻報XML解析錯誤，真讓人丈二金剛，摸不着頭腦。

 

出處：https://blog.csdn.net/u010159842/article/details/51672024

=============================================================================================

只是想做一個很簡單的圖片按鈕而已，不需要那么復雜。

<Button x:Name="btn" Width="145" Height="30" HorizontalAlignment="Center" Margin="5"  VerticalAlignment="Top" Command="{Binding BtnCommand}"> 
    <Button.Background>
        <ImageBrush ImageSource="圖片路徑" Stretch="Fill"/>
    <Button.Background/>
</Button>

 

出處：https://blog.csdn.net/qq_18995513/article/details/54310732

=============================================================================================

在WPF中，如果要想給按鈕控件Button加上圖片，最直接的做法是修改控件模板，在模板中加入想要的圖片，代碼如下圖所示：

<Button x:Name="btn" Width="23" Height="23" Click="btn_Click">  
     <Button.Template>  
         <ControlTemplate>  
             <Grid>  
                 <Image Margin="2" Source="Image/help1.png" />  
             </Grid>  
         </ControlTemplate>  
     </Button.Template>  
 </Button>

 
       但是這樣做有一個弊端——每次需要用到圖片按鈕的時候都要去修改模板。因為上面的示例代碼中，模板代碼過於精簡，所以乍看之下似乎這種做法也沒有什么不好。但是在實際的應用中，按鈕控件的模板往往復雜得多，比如，有很多的Trigger事件，往往需要根據鼠標或按鈕的狀態來調整控件的圖片、字體、背景等狀態。因此，如果每次應用圖片控件的時候都修改模板，很可能會導致xaml文件的代碼量爆炸。

      先給出一個簡單的MVVM的綁定方式，供大家參考吧，后面會給出控件重寫的方案。

                                <Button Name="BtnOpenWin" FontSize="30" Width="160" Height="100" ToolTip="{Binding DispName}"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
                                    cm:Message.Attach="[Event Click] = [Action BtnOpenWin(BtnOpenWin)]" >
                                    <Button.Template>
                                        <ControlTemplate>
                                            <Image Margin="2" Stretch="Fill" Source="{Binding ImageURL}"  />
                                        </ControlTemplate>
                                    </Button.Template>
                                </Button>

 

下面是控件重寫的方案：
       一個可行的解決方案為，封裝一個用於圖片按鈕的自定義按鈕控件，該控件繼承自Button控件，但是額外增加了一些用戶圖片綁定的依賴屬性，同時在控件的默認外觀模板中，通過TemplateBinding的方式綁定到依賴屬性上，這樣在使用的時候便可以直接通過綁定的方式設置圖片按鈕需要顯示的圖片，不再需要修改控件模板。

 

       其實現方式如下：

 

       一  代碼結構
       如圖所示，

           

 

 采用自定義控件（CustomControl）的方式對Button控件進行封裝。其中ImageButton.xaml為默認控件模板，ImageButton.cs為控件的邏輯控制文件，其中包含了ImageButton控件所需要的新的依賴屬性，包括圖片源屬性等。

       

        

       二 模板代碼

<ResourceDictionary  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    xmlns:local="clr-namespace:CustomControl">  
  
    <Style TargetType="{x:Type local:ImageButton}">  
        <Setter Property="Cursor" Value="Hand"/>  
        <Setter Property="Template">  
            <Setter.Value>  
                <ControlTemplate TargetType="{x:Type local:ImageButton}">  
  
                    <Border Background="{TemplateBinding Background}"  
                            BorderBrush="{TemplateBinding BorderBrush}"  
                            BorderThickness="{TemplateBinding BorderThickness}">  
                        <Grid x:Name="grid" Background="{TemplateBinding Background}">  
                            <Border x:Name="PART_Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}"/>  
  
                            <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">  
                                <StackPanel HorizontalAlignment="Center" Orientation="{TemplateBinding IconContentOrientation}" VerticalAlignment="Center" Margin="{TemplateBinding Padding}">  
                                    <Grid HorizontalAlignment="Center" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">  
                                        <Image x:Name="PART_Icon" Source="{TemplateBinding Icon}" Height="{TemplateBinding IconHeight}" Width="{TemplateBinding IconWidth}"/>  
                                        <Image x:Name="PART_MouseOverIcon" Visibility="Collapsed" Source="{TemplateBinding IconMouseOver}"  Height="{TemplateBinding IconHeight}" Width="{TemplateBinding IconWidth}"/>  
                                        <Image x:Name="PART_PressIcon" Visibility="Collapsed" Source="{TemplateBinding IconPress}"  Height="{TemplateBinding IconHeight}" Width="{TemplateBinding IconWidth}"/>  
                                    </Grid>  
                                    <TextBlock x:Name="PART_Content" Text="{TemplateBinding Content}"   
                                               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"   
                                               VerticalAlignment="{TemplateBinding VerticalContentAlignment}"  
                                               SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"    
                                               Margin="{TemplateBinding IconContentMargin}"  
                                               Foreground="{TemplateBinding Foreground}"   
                                               TextTrimming="CharacterEllipsis"/>  
                                </StackPanel>  
                            </Grid>  
                        </Grid>  
                    </Border>  
  
                    <ControlTemplate.Triggers>  
  
                        <Trigger Property="IsMouseOver" Value="True">  
                            <Setter Property="Foreground" TargetName="PART_Content" Value="{Binding MouseOverForeground,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:ImageButton}}}"/>  
                            <Setter Property="Background" TargetName="PART_Border" Value="{Binding MouseOverBackground,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:ImageButton}}}"/>  
                            <Setter Property="BorderBrush" TargetName="PART_Border" Value="{Binding MouseOverBorderBrush,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:ImageButton}}}"/>  
                            <Setter Property="Visibility" TargetName="PART_MouseOverIcon" Value="Visible"/>  
                            <Setter Property="Visibility" TargetName="PART_Icon" Value="Collapsed"/>  
                            <Setter Property="Visibility" TargetName="PART_PressIcon" Value="Collapsed"/>  
                        </Trigger>  
  
                        <Trigger Property="IsPressed" Value="True">  
                            <Setter Property="Foreground" TargetName="PART_Content" Value="{Binding MouseDownForeground,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:ImageButton}}}"/>  
                            <Setter Property="Background" TargetName="PART_Border" Value="{Binding MouseDownBackground,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:ImageButton}}}"/>  
                            <Setter Property="BorderBrush" TargetName="PART_Border" Value="{Binding MouseDownBorderBrush,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:ImageButton}}}"/>  
                            <Setter Property="Visibility" TargetName="PART_PressIcon" Value="Visible"/>  
                            <Setter Property="Visibility" TargetName="PART_Icon" Value="Collapsed"/>  
                            <Setter Property="Visibility" TargetName="PART_MouseOverIcon" Value="Collapsed"/>  
                        </Trigger>  
  
                        <Trigger Property="IsEnabled" Value="False">  
                            <Setter Property="Opacity" Value="0.5" />  
                        </Trigger>  
  
                        <Trigger Property="Text" SourceName="PART_Content" Value="">  
                            <Setter Property="Visibility" TargetName="PART_Content" Value="Collapsed"/>  
                        </Trigger>  
  
                        <Trigger Property="Text" SourceName="PART_Content" Value="{x:Null}">  
                            <Setter Property="Visibility" TargetName="PART_Content" Value="Collapsed"/>  
                        </Trigger>  
                    </ControlTemplate.Triggers>  
                </ControlTemplate>  
            </Setter.Value>  
        </Setter>  
    </Style>  
</ResourceDictionary>    

 

       在模板中，通過TemplateBinding 的方式綁定了控件中的自定義屬性，並默認顯示給定的圖標和文字。
       然后通過觸發器，當鼠標懸停或按下的時候，控制相關圖標的顯示隱藏以及文字的背景色、前景色和邊框顏色。

 

       三 自定義依賴屬性
       在ImageButton.cs中定義依賴屬性，這些依賴屬性包含了圖片按鈕控件的邊框、前景色、背景色，圖片等屬性。在復寫的OnApplyTemplate方法中，會判斷如果某些依賴屬性的值為null，則使用默認屬性。

public class ImageButton : Button  
{  
    static ImageButton()  
    {  
        DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageButton), new FrameworkPropertyMetadata(typeof(ImageButton)));  
    }  
  
    public override void OnApplyTemplate()  
    {  
        base.OnApplyTemplate();  
        if (this.MouseOverBackground == null)  
        {  
            this.MouseOverBackground = Background;  
        }  
        if (this.MouseDownBackground == null)  
        {  
            if (this.MouseOverBackground == null)  
            {  
                this.MouseDownBackground = Background;  
            }  
            else  
            {  
                this.MouseDownBackground = MouseOverBackground;  
            }  
        }  
        if (this.MouseOverBorderBrush == null)  
        {  
            this.MouseOverBorderBrush = BorderBrush;  
        }  
        if (this.MouseDownBorderBrush == null)  
        {  
            if (this.MouseOverBorderBrush == null)  
            {  
                this.MouseDownBorderBrush = BorderBrush;  
            }  
            else  
            {  
                this.MouseDownBorderBrush = MouseOverBorderBrush;  
            }  
        }  
        if (this.MouseOverForeground == null)  
        {  
            this.MouseOverForeground = Foreground;  
        }  
        if (this.MouseDownForeground == null)  
        {  
            if (this.MouseOverForeground == null)  
            {  
                this.MouseDownForeground = Foreground;  
            }  
            else  
            {  
                this.MouseDownForeground = this.MouseOverForeground;  
            }  
        }  
    }  
 
    #region Dependency Properties  
  
    /// <summary>  
    /// 鼠標移上去的背景顏色  
    /// </summary>  
    public static readonly DependencyProperty MouseOverBackgroundProperty  
        = DependencyProperty.Register("MouseOverBackground", typeof(Brush), typeof(ImageButton));  
  
    /// <summary>  
    /// 鼠標按下去的背景顏色  
    /// </summary>  
    public static readonly DependencyProperty MouseDownBackgroundProperty  
        = DependencyProperty.Register("MouseDownBackground", typeof(Brush), typeof(ImageButton));  
  
    /// <summary>  
    /// 鼠標移上去的字體顏色  
    /// </summary>  
    public static readonly DependencyProperty MouseOverForegroundProperty  
        = DependencyProperty.Register("MouseOverForeground", typeof(Brush), typeof(ImageButton), new PropertyMetadata(null, null));  
  
    /// <summary>  
    /// 鼠標按下去的字體顏色  
    /// </summary>  
    public static readonly DependencyProperty MouseDownForegroundProperty  
        = DependencyProperty.Register("MouseDownForeground", typeof(Brush), typeof(ImageButton), new PropertyMetadata(null, null));  
  
    /// <summary>  
    /// 鼠標移上去的邊框顏色  
    /// </summary>  
    public static readonly DependencyProperty MouseOverBorderBrushProperty  
        = DependencyProperty.Register("MouseOverBorderBrush", typeof(Brush), typeof(ImageButton), new PropertyMetadata(null, null));  
  
    /// <summary>  
    /// 鼠標按下去的邊框顏色  
    /// </summary>  
    public static readonly DependencyProperty MouseDownBorderBrushProperty  
        = DependencyProperty.Register("MouseDownBorderBrush", typeof(Brush), typeof(ImageButton), new PropertyMetadata(null, null));  
  
    /// <summary>  
    /// 圓角  
    /// </summary>  
    public static readonly DependencyProperty CornerRadiusProperty  
        = DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(ImageButton), null);  
  
    //圖標  
    public static readonly DependencyProperty IconProperty  
        = DependencyProperty.Register("Icon", typeof(ImageSource), typeof(ImageButton), null);  
  
    //鼠標移上去的圖標圖標  
    public static readonly DependencyProperty IconMouseOverProperty  
        = DependencyProperty.Register("IconMouseOver", typeof(ImageSource), typeof(ImageButton), null);  
  
    //鼠標按下去的圖標圖標  
    public static readonly DependencyProperty IconPressProperty  
        = DependencyProperty.Register("IconPress", typeof(ImageSource), typeof(ImageButton), null);  
  
    //圖標高度  
    public static readonly DependencyProperty IconHeightProperty  
        = DependencyProperty.Register("IconHeight", typeof(double), typeof(ImageButton), new PropertyMetadata(24.0, null));  
  
    //圖標寬度  
    public static readonly DependencyProperty IconWidthProperty  
        = DependencyProperty.Register("IconWidth", typeof(double), typeof(ImageButton), new PropertyMetadata(24.0, null));  
  
    //圖標和內容的對齊方式  
    public static readonly DependencyProperty IconContentOrientationProperty  
        = DependencyProperty.Register("IconContentOrientation", typeof(Orientation), typeof(ImageButton), new PropertyMetadata(Orientation.Horizontal, null));  
  
    //圖標和內容的距離  
    public static readonly DependencyProperty IconContentMarginProperty  
        = DependencyProperty.Register("IconContentMargin", typeof(Thickness), typeof(ImageButton), new PropertyMetadata(new Thickness(0, 0, 0, 0), null));  
 
    #endregion  
 
    #region Property Wrappers  
  
    public Brush MouseOverBackground  
    {  
        get  
        {  
            return (Brush)GetValue(MouseOverBackgroundProperty);  
        }  
        set { SetValue(MouseOverBackgroundProperty, value); }  
    }  
  
    public Brush MouseDownBackground  
    {  
        get  
        {  
            return (Brush)GetValue(MouseDownBackgroundProperty);  
        }  
        set { SetValue(MouseDownBackgroundProperty, value); }  
    }  
  
    public Brush MouseOverForeground  
    {  
        get  
        {  
            return (Brush)GetValue(MouseOverForegroundProperty);  
        }  
        set { SetValue(MouseOverForegroundProperty, value); }  
    }  
  
    public Brush MouseDownForeground  
    {  
        get  
        {  
            return (Brush)GetValue(MouseDownForegroundProperty);  
        }  
        set { SetValue(MouseDownForegroundProperty, value); }  
    }  
  
    public Brush MouseOverBorderBrush  
    {  
        get { return (Brush)GetValue(MouseOverBorderBrushProperty); }  
        set { SetValue(MouseOverBorderBrushProperty, value); }  
    }  
  
    public Brush MouseDownBorderBrush  
    {  
        get { return (Brush)GetValue(MouseDownBorderBrushProperty); }  
        set { SetValue(MouseDownBorderBrushProperty, value); }  
    }  
  
    public CornerRadius CornerRadius  
    {  
        get { return (CornerRadius)GetValue(CornerRadiusProperty); }  
        set { SetValue(CornerRadiusProperty, value); }  
    }  
  
    public ImageSource Icon  
    {  
        get { return (ImageSource)GetValue(IconProperty); }  
        set { SetValue(IconProperty, value); }  
    }  
  
    public ImageSource IconMouseOver  
    {  
        get { return (ImageSource)GetValue(IconMouseOverProperty); }  
        set { SetValue(IconMouseOverProperty, value); }  
    }  
  
    public ImageSource IconPress  
    {  
        get { return (ImageSource)GetValue(IconPressProperty); }  
        set { SetValue(IconPressProperty, value); }  
    }  
  
    public double IconHeight  
    {  
        get { return (double)GetValue(IconHeightProperty); }  
        set { SetValue(IconHeightProperty, value); }  
    }  
  
    public double IconWidth  
    {  
        get { return (double)GetValue(IconWidthProperty); }  
        set { SetValue(IconWidthProperty, value); }  
    }  
  
    public Orientation IconContentOrientation  
    {  
        get { return (Orientation)GetValue(IconContentOrientationProperty); }  
        set { SetValue(IconContentOrientationProperty, value); }  
    }  
  
    public Thickness IconContentMargin  
    {  
        get { return (Thickness)GetValue(IconContentMarginProperty); }  
        set { SetValue(IconContentMarginProperty, value); }  
    }  
 
    #endregion  
}

 

        四 控件的應用

 

       應用控件的時候，只需要簡單的綁定控件的相關屬性即可。

 

 <control:ImageButton x:Name="btn_Image"   
                                         HorizontalContentAlignment="Center"  
                                         VerticalContentAlignment="Center"  
                                         Background="Red"  
                                         Margin="5,0,5,0" ToolTip="播放" Content="播放"  
                                         Height="30" Width="80"  
                                         Icon="Images\BroadcastWhite.png"  
                                         IconMouseOver="Images\BroadcastGray.png"  
                                         IconPress="Images\BroadcastBlue.png"  
                                         IconHeight="24"  
                                         IconWidth="24"  
                                         FontSize="16"  
                                         IconContentMargin="10,0,0,0"   
                                         Foreground="#FFFFFF"  
                                         MouseOverForeground="Gray"  
                                         MouseDownForeground="Blue"/>

 

讓我們看看效果圖吧：

       正常狀態：

 

       鼠標懸停狀態：

 

 

       鼠標按下狀態：

 

 

 

出處：https://blog.csdn.net/zhuo_wp/article/details/78350760

=============================================================================================

=============================================================================================