WPF中自定義按鈕的可視化反饋

我在主窗口中有一個自定義按鈕，我希望能夠在用戶點擊鼠標時將鼠標懸停在其上，並向用戶提供一些視覺反饋。我使用RadialGrandientBrush爲我的按鈕着色。我想繼續在這些事件中使用它，但我不知道如何在trigger內部實現它。WPF中自定義按鈕的可視化反饋

這裏是我當前的代碼：

<Button Width="100" 
     Height="100" Click="Button_Click_1"> 
     <Button.Template> 
      <ControlTemplate TargetType="Button"> 
       <Grid> 
        <Ellipse Stroke="Black" 
         StrokeThickness="1"> 
         <Ellipse.Fill> 
          <RadialGradientBrush> 
           <GradientStop Offset="0" 
              Color="White" /> 
           <GradientStop Offset="1" 
              Color="LightSkyBlue" /> 
           <GradientStop Offset="1" 
              Color="LightSkyBlue" /> 
           <RadialGradientBrush.Transform> 
            <TransformGroup> 
             <ScaleTransform ScaleY="0.65" /> 
            </TransformGroup> 
           </RadialGradientBrush.Transform> 
          </RadialGradientBrush> 
         </Ellipse.Fill> 
        </Ellipse> 
        <ContentPresenter HorizontalAlignment="Center" 
            VerticalAlignment="Center"/> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <!--- THIS IS WHERE I NEED TO USE THE RADIALGRADIENTBRUSH AGAIN --> 
         <Setter ........ /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Button.Template> 
    </Button> 

</Window>

如何使用畫筆，如RadialGradientBrush作爲二傳手，在觸發器？

謝謝。

來源

2013-07-15 Eric after dark

可以使用x:Name和訪問它通過使用觸發器中部分SetterTargetName屬性名在控件模板您Ellipse。

示例代碼如下：

<Button Width="100" 
     Height="100" > 
     <Button.Template> 
      <ControlTemplate TargetType="Button"> 
       <Grid> 
        <Ellipse Stroke="Black" x:Name="ellipse" 
         StrokeThickness="1"> 
         <Ellipse.Fill> 
          <RadialGradientBrush> 
           <GradientStop Offset="0" 
              Color="White" /> 
           <GradientStop Offset="1" 
              Color="LightSkyBlue" /> 
           <GradientStop Offset="1" 
              Color="LightSkyBlue" /> 
           <RadialGradientBrush.Transform> 
            <TransformGroup> 
             <ScaleTransform ScaleY="0.65" /> 
            </TransformGroup> 
           </RadialGradientBrush.Transform> 
          </RadialGradientBrush> 
         </Ellipse.Fill> 
        </Ellipse> 
        <ContentPresenter HorizontalAlignment="Center" 
            VerticalAlignment="Center"/> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
          <Setter TargetName="ellipse" Property="Fill"> 
           <Setter.Value> 
           <RadialGradientBrush> 
           <GradientStop Offset="0" 
              Color="White" /> 
           <GradientStop Offset="1" 
              Color="LightGreen" /> 
           <GradientStop Offset="1" 
              Color="Green" /> 
           <RadialGradientBrush.Transform> 
            <TransformGroup> 
             <ScaleTransform ScaleY="0.65" /> 
            </TransformGroup> 
           </RadialGradientBrush.Transform> 
          </RadialGradientBrush> 
           </Setter.Value> 
          </Setter> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Button.Template> 
    </Button>

理想情況下，你應該使用VisualStateManager實現這一目標。

請參閱本MSDN Walkthrough有關使用控件模板和VisualStateManager

來源

2013-07-15 16:00:13 sthotakura

+1的XAML和相關的MSDN鏈接自定義按鈕的外觀。 –

這正是我所期待的，非常感謝。 –

WPF中自定義按鈕的可視化反饋

回答

相關問題