如何創建帶圖像背景的圓形按鈕和點擊感覺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

回答

相關問題