我可以完全控制自定義WPF按鈕的繪圖嗎？

Question

我想你可以得出有足夠的經驗XAML多prety什麼，但我是一個C++的人新的WPF。我需要一個具有漸變顏色和周圍特殊邊框的按鈕。那麼我們C++的人呢？我們去找設計師，問一個左側的垂直圖像，中間的一個和一個右側的圖像，然後重寫Win32繪圖信息，實際上我們自己繪製按鈕。

什麼是這樣做的WPF的方式？我是否需要爲此掌握XAML，或者我能以某種方式利用這3張圖片來組成按鈕？我天真的想法是做這樣的事情，我是否將按鈕分成三部分，每一部分都有不同的背景，但是這並沒有給我想要的結果。我可以控制按鈕的繪製方式嗎？

<Style x:Key="NavButtonStyle" TargetType="{x:Type Button}"> 
     <Setter Property="OverridesDefaultStyle" Value="True" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <Grid ShowGridLines="False"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="*" /> 
          <ColumnDefinition Width="*" /> 
          <ColumnDefinition Width="*" /> 
         </Grid.ColumnDefinitions> 
         <Grid Grid.Column="0"> 
          <Grid.Background> 
           <ImageBrush ImageSource="/Images/left.png"/> 
          </Grid.Background> 
         </Grid> 
         <StackPanel Grid.Column="1" HorizontalAlignment="Center" Orientation="Horizontal"> 
          <StackPanel.Background> 
           <ImageBrush Stretch="Fill" ImageSource="/Images/middle.png"/> 
          </StackPanel.Background> 
          <Image Source="/Images/Icons/myIcon.png"/> 
          <TextBlock Text="myCaption"/> 
         </StackPanel> 
         <Grid Grid.Column="2"> 
          <Grid.Background> 
           <ImageBrush Stretch="Fill" ImageSource="/Images/right.png"/> 
          </Grid.Background> 
         </Grid> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

另一個問題是如何使這個通用模板，以便我可以複製的外觀和感覺，但只是改變圖標和文本。我想這個任務的正確方法是從Button繼承一個CustomControl類？

Answer 1

真正簡短的回答是，這是你用什麼Expression Blend中。

的略少簡短的回答是，大部分的你的描述可以通過編輯控制模板，如果你瞭解控件模板是如何工作的，你知道修改的內容來完成。 Expression Blend是一個很好的工具，因爲Blend使得編輯控件的模板變得相對簡單，並且因爲Blend記得很多你可能會忘記的東西，特別是當你對WPF比較陌生的時候。

舉例來說，如果我進入混合，畫在畫板上的按鈕，並編輯其控制模板的副本，這裏就是我得到之前，我甚至開始與任何搞亂：

<Style x:Key="ButtonFocusVisual"> 
    <Setter Property="Control.Template"> 
    <Setter.Value> 
     <ControlTemplate> 
     <Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="2" SnapsToDevicePixels="true"/> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style> 
<LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0"> 
    <GradientStop Color="#F3F3F3" Offset="0"/> 
    <GradientStop Color="#EBEBEB" Offset="0.5"/> 
    <GradientStop Color="#DDDDDD" Offset="0.5"/> 
    <GradientStop Color="#CDCDCD" Offset="1"/> 
</LinearGradientBrush> 
<SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/> 
<Style x:Key="ButtonControlTemplate" TargetType="{x:Type Button}"> 
    <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/> 
    <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/> 
    <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/> 
    <Setter Property="BorderThickness" Value="1"/> 
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
    <Setter Property="HorizontalContentAlignment" Value="Center"/> 
    <Setter Property="VerticalContentAlignment" Value="Center"/> 
    <Setter Property="Padding" Value="1"/> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="{x:Type Button}"> 
     <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" RenderDefaulted="{TemplateBinding IsDefaulted}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"> 
      <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/> 
     </Microsoft_Windows_Themes:ButtonChrome> 
     <ControlTemplate.Triggers> 
      <Trigger Property="IsKeyboardFocused" Value="true"> 
      <Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/> 
      </Trigger> 
      <Trigger Property="ToggleButton.IsChecked" Value="true"> 
      <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/> 
      </Trigger> 
      <Trigger Property="IsEnabled" Value="false"> 
      <Setter Property="Foreground" Value="#ADADAD"/> 
      </Trigger> 
     </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style> 

原則，所有你需要做的就是找到ContentPresenter元素（這是按鈕內容被插入的地方），並用你自己的漂亮東西替換它所包圍的內容。您可以將該XAML複製到您自己的項目中，並將其混淆，然後您將獲得某些作品。

但：有沒有在那裏，你需要了解之前，你會最終產生一個按鈕，其實你想要做什麼了很多東西。它的大部分代表了功能和行爲，如果你有像我這樣的聰明點子開發自己的按鈕，那麼你就沒有煩惱自己想想。像：

• 按鈕的外觀如何改變焦點？
• 按鈕的外觀在禁用時應如何更改？
• 什麼事件應該改變按鈕的視覺外觀？

你會注意到，如果你看這個模板，那麼最後一個問題的很多答案都嵌入在Microsoft_Windows_Themes:ButtonChrome元素中。它在代碼中執行的所有操作（例如RenderPressed）都是您必須通過觸發器構建到XAML中的東西。 （或者你可以編寫自己的按鈕 - 類似鉻的物體。）

我想我說的是你沒有錯誤的軌道，但有很多你需要學習。

至於你的第二個問題，是的，你可以創建一個UserControl並公開屬性的標題和圖像。您也可以嘗試一點，因爲該按鈕實際上是一個內容控件，例如：

<Button Height=50> 
    <DockPanel> 
    <Image Width="32" Source="image.png"/> 
    <TextBlock Text="My button's caption" TextWrapping="Wrap" VerticalAlignment="Center"/> 
    </DockPanel> 
</Button> 

Answer 2

1＃： 我不知道你是什麼讓控制按鈕是什麼意思？但是我們可以控制自己喜歡的按鈕風格。在上面的XAML中，我只看到了模板，但沒有觸發器或VisualState提及按鈕的不同狀態/行爲/效果，如鼠標懸停，鼠標離開，按鈕按下等。由於此控件覆蓋默認樣式，這些效果將表現爲默認按鈕。

2＃：由於這是一個自定義的控制，你可以在「主題」文件夾& generic.xaml添加的樣式。你不應該指定密鑰名稱，那麼它將被應用到下面所有customcontrol按鈕：

<Style TargetType="{x:Type custom:CustomerControlType}">