2012-08-15 96 views
0

如何獲取以下XAML代碼以集成到按鈕背景中。我已經嘗試了很多方法,但我努力讓它工作。 PS我是XAML的新手。更改XAML中的按鈕背景?

<Viewbox Width="55.247" Height="55.247" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
<Canvas Width="55.247" Height="55.247"> 

    <Canvas> 

    <!-- button/circle --> 
    <Path StrokeThickness="1.0" Stroke="#ff335284" StrokeMiterLimit="1.0" Data="F1 M 54.747,27.624 C 54.747,42.603 42.603,54.747 27.624,54.747 C 12.644,54.747 0.500,42.603 0.500,27.624 C 0.500,12.644 12.644,0.500 27.624,0.500 C 42.603,0.500 54.747,12.644 54.747,27.624 Z"> 
    <Path.Fill> 
     <RadialGradientBrush MappingMode="Absolute" GradientOrigin="392.717,-251.469" Center="392.717,-251.469" RadiusX="27.123" RadiusY="27.123"> 
     <RadialGradientBrush.GradientStops> 
      <GradientStop Offset="0.00" Color="#ff00aae4"/> 
      <GradientStop Offset="1.00" Color="#ff2463a7"/> 
     </RadialGradientBrush.GradientStops> 
     <RadialGradientBrush.Transform> 
      <MatrixTransform Matrix="1.000,0.000,-0.000,-1.000,-365.093,-223.845" /> 
     </RadialGradientBrush.Transform> 
     </RadialGradientBrush> 
    </Path.Fill> 
    </Path> 

    </Canvas> 
</Canvas> 
</Viewbox> 

回答

3

以下示例將您的設計替換爲標準按鈕模板並添加內容展示器,以便您仍可以設置按鈕的內容。

<Button Content="OK" Width="75" Height="75"> 
    <Button.Template> 
     <ControlTemplate TargetType="Button"> 

      <Grid> 
       <Path StrokeThickness="1.0" Stroke="#ff335284" StrokeMiterLimit="1.0" Data="F1 M 54.747,27.624 C 54.747,42.603 42.603,54.747 27.624,54.747 C 12.644,54.747 0.500,42.603 0.500,27.624 C 0.500,12.644 12.644,0.500 27.624,0.500 C 42.603,0.500 54.747,12.644 54.747,27.624 Z"> 
        <Path.Fill> 
         <RadialGradientBrush MappingMode="Absolute" GradientOrigin="392.717,-251.469" Center="392.717,-251.469" RadiusX="27.123" RadiusY="27.123"> 
          <RadialGradientBrush.GradientStops> 
           <GradientStop Offset="0.00" Color="#ff00aae4"/> 
           <GradientStop Offset="1.00" Color="#ff2463a7"/> 
          </RadialGradientBrush.GradientStops> 
          <RadialGradientBrush.Transform> 
           <MatrixTransform Matrix="1.000,0.000,-0.000,-1.000,-365.093,-223.845" /> 
          </RadialGradientBrush.Transform> 
         </RadialGradientBrush> 
       </Path.Fill> 
      </Path> 
      <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> 
     </Grid> 

    </ControlTemplate> 
</Button.Template> 

+0

衛生署,我要做的事情,當他指定的WPF或SL。 +1時間。 :) – 2012-08-15 19:36:19

+0

@ChrisW。 WPF和silverlight在這裏是一樣的,所以我敢於回答;) – 2012-08-15 19:47:58

+0

除非他想了解更多關於模板的潛在狀態/轉換,如果每個WPF的SL或觸發器作爲一個整體模板,但嘿只要問題的解決方案是達到了,仍然是我的+1。歡呼聲 – 2012-08-15 20:06:48

1

那麼你有多種選擇來實現這一點。如果你真的只是試圖把你的路徑放在一個按鈕中,你可以用最小的努力來做到這一點;

<Button Width="75" Height="75"> 
    <!-- Embed our elements in a grid since Content can be set only once --> 
    <Grid> 
     <!-- Your Path --> 
     <Path StrokeThickness="1.0" Stroke="#ff335284" StrokeMiterLimit="1.0" Data="F1 M 54.747,27.624 C 54.747,42.603 42.603,54.747 27.624,54.747 C 12.644,54.747 0.500,42.603 0.500,27.624 C 0.500,12.644 12.644,0.500 27.624,0.500 C 42.603,0.500 54.747,12.644 54.747,27.624 Z"> 
      <Path.Fill> 
      <RadialGradientBrush MappingMode="Absolute" GradientOrigin="392.717,-251.469" Center="392.717,-251.469" RadiusX="27.123" RadiusY="27.123"> 
       <RadialGradientBrush.GradientStops> 
       <GradientStop Offset="0.00" Color="#ff00aae4"/> 
       <GradientStop Offset="1.00" Color="#ff2463a7"/> 
       </RadialGradientBrush.GradientStops> 
       <RadialGradientBrush.Transform> 
       <MatrixTransform Matrix="1.000,0.000,-0.000,-1.000,-365.093,-223.845" /> 
       </RadialGradientBrush.Transform> 
      </RadialGradientBrush> 
      </Path.Fill> 
     </Path> 
     <!-- Your Button Text --> 
     <TextBlock Text="Button" HorizontalAlignment="Center" VerticalAlignment="Center"/> 
    </Grid> 
</Button> 

如果您需要獲得更多技術/更清晰的信息,您可以將其直接放入控件模板中。這裏是關於WPF Button Control Template

的文檔希望這會有所幫助,幸運的是,還有很多網頁上的自定義WPF按鈕的教程。如果你想詳細說明你想要的內容,比如你是在拍攝WPF還是SL(與VisualStateManager或風格觸發器不同),人們可能會更有用。 :)