如何创建带图像背景的圆形按钮和点击感觉Silverlight

现在，我可以将按钮的外观更改为具有背景图像的椭圆形。但是，当我点击它时，我不觉得Silverlight中的正常按钮的点击效果任何人都可以帮助我如何获得该效果？如何创建带图像背景的圆形按钮和点击感觉Silverlight

这是我的圆形按钮

<style x:Key="roundButton" TargetType="Button"> 
    <Setter Properties="Template"> 
     <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
       <Ellipse width="100" height="100"> 
        <Ellipse.Fill> 
          <ImageBrush ImageSource="./icon.png"> 
        </Ellipse.Fill> 
       </Ellipse> 

       </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</style>

摸索我知道我应该在Systems.Window使用VisualStateManager后XAML的风格。这是我的XAML现在的样子，但我仍然不能得到像普通按钮

<Style x:Key="roundButton" TargetType="Button"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Grid> 
        <Ellipse Width="100" Height="100"> 
         <Ellipse.Fill> 
          <ImageBrush ImageSource="./icon.png" /> 
         </Ellipse.Fill> 
        </Ellipse> 

        <vsm:VisualStateManager.VisualStateGroups> 
         <vsm:VisualStateGroup x:Name="CommonStates"> 
          <vsm:VisualState x:Name="MouseOver"/> 
          <vsm:VisualState x:Name="Normal"/> 
          <vsm:VisualState x:Name="Pressed"/> 
          <vsm:VisualState x:Name="Disabled"/> 
         </vsm:VisualStateGroup> 
         <vsm:VisualStateGroup x:Name="FocusStates"> 
          <vsm:VisualState x:Name="Unfocused"/> 
          <vsm:VisualState x:Name="Focused"/> 
         </vsm:VisualStateGroup> 
        </vsm:VisualStateManager.VisualStateGroups> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>

来源

2010-09-08 Tai

您需要设置触发器，您对各个状态按钮点击的感觉。

<style x:Key="roundButton" TargetType="Button"> 
    <Setter Properties="Template"> 
     <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
       <Ellipse width="100" height="100"> 
        <Ellipse.Fill> 
          <ImageBrush ImageSource="./icon.png"/> 
        </Ellipse.Fill> 
       </Ellipse> 

       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <!-- mouse over look and feel here --> 
        </Trigger> 
        <Trigger Property="IsPressed" Value="True"> 
         <!-- clicked look and feel here --> 
        </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</style>

来源

2010-09-08 07:31:08 MrDosu

您好，我很抱歉没有提及，我想这样做在Silverlight不上头。 ControlTemplate.Triggers将不会被找到。我应该怎么做才能让它得到承认。 – Tai 2010-09-08 17:36:31

更简单的方法是使用Blend。拖放椭圆，将其转换为控件（按钮）。转到StatesTab相应地调整状态。通常情况下，在按下的状态下，应用比例变换来减小按钮大小，并使用平移变换将按钮移动到底部/右边即可。

HTH

来源

2010-09-08 18:09:42

我使用混合来将椭圆形状转换为按钮。但是，当我点击状态标签，我看不到任何可用的设置。你能指导我如何设置它以获得点击感觉吗？谢谢 – Tai 2010-09-09 07:32:50

http://www.kirupa.com/blend_silverlight/creating_custom_button_pg1.htm 这可以帮助你:) – 2010-09-09 10:09:44

 <Setter Property="Template"> 

      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Grid> 
         <Ellipse Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"> 
          <Ellipse.Fill> 
           <RadialGradientBrush GradientOrigin=".2,.2"> 
            <GradientStop Offset="0.2" Color="White" /> 
            <GradientStop Offset="1" Color="Blue" /> 

           </RadialGradientBrush> 
          </Ellipse.Fill> 
         </Ellipse> 
         <ContentPresenter Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center"/> 
        </Grid> 
       </ControlTemplate> 

      </Setter.Value> 
     </Setter> 

    </Style>

来源

2012-03-09 13:50:59 Dhaval

如何创建带图像背景的圆形按钮和点击感觉Silverlight

回答

相关问题