如何樣式按鈕？

尋找最簡單的方式風格的按鈕，像這樣：如何樣式按鈕？

100％透明，無外觀，等等。唯一的視覺是「X」，它需要繪製

將鼠標懸停顏色「X」用不同的顏色。

想出這樣的控制的步驟是什麼？我不知道如何處理它。我知道的唯一方法是使用Blend獲取模板，然後通過刪除所有元素，邊框等進行編輯。有沒有更簡單的方法？

來源

2011-12-06 katit

在Blend Retemplating任何按鈕是easist方式我猜。 :) –

最簡單的方法是重新模板，既可以從現有模板開始，也可以通過竊取新模板。

我認爲，絕對值得讓模板更加舒適，您可以手工編寫這樣的模板。

大部分時間它是非常簡單的。最複雜的部分是獲取視覺狀態。您可以閱讀關於VisualStateManager類here的更多信息。

這裏是一個什麼樣的模板可能看起來像你的情況爲例：

<Grid x:Name="LayoutRoot" Background="White"> 
    <Grid.Resources> 
     <ControlTemplate x:Key="XButtonTemplate"> 
      <Grid> 
       <VisualStateManager.VisualStateGroups> 
        <VisualStateGroup> 
         <VisualState x:Name="MouseOver"> 
          <Storyboard> 
           <ColorAnimation Storyboard.TargetName="textblock" 
              Storyboard.TargetProperty="(Foreground).(Color)" To="Red" 
              Duration="0:0:0.2" /> 
          </Storyboard> 
         </VisualState> 
         <VisualState x:Name="Normal"> 
          <Storyboard> 
           <ColorAnimation Storyboard.TargetName="textblock" 
              Storyboard.TargetProperty="(Foreground).(Color)" To="Black" 
              Duration="0:0:0.2" /> 
          </Storyboard> 
         </VisualState> 
        </VisualStateGroup> 
       </VisualStateManager.VisualStateGroups> 

       <TextBlock x:Name="textblock" HorizontalAlignment="Center" VerticalAlignment="Center" Text="X" /> 
      </Grid> 
     </ControlTemplate> 
    </Grid.Resources> 
    <StackPanel> 
     <Button Height="23" Width="23" Template="{StaticResource XButtonTemplate}" /> 
    </StackPanel> 
</Grid>

來源

2011-12-06 06:54:54

Erik答案非常好 - 但爲了增加更多的靈活性，您可以將TextBlock替換爲：'現在您可以將任何文本任何其他元素）。 – Leo

絕對，很好的建議。只要您記得將模板的TargetType設置爲Button，並添加「X」作爲按鈕的內容。 –

Erik你絕對正確，我需要能夠自己寫這些。我越來越擅長，但每次我開始在VS和Blend之間跳躍，並在這些上工作 - 幾小時就像瘋了似的:) – katit

我可以幫你，當用戶按下

在App.xaml中

添加

<Style x:Key="btnStylePress" TargetType="Button"> 
<Setter Property="Background" Value="Transparent"/> 
<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/> 
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/> 
<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/> 
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/> 
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/> 
<Setter Property="Padding" Value="10,3,10,5"/> 
<Setter Property="Template"> 
<Setter.Value> 
    <ControlTemplate TargetType="Button"> 
    <Grid Background="Transparent"> 
    <VisualStateManager.VisualStateGroups> 
    <VisualStateGroup x:Name="CommonStates"> 
     <VisualState x:Name="Normal"/> 
     <VisualState x:Name="MouseOver"/> 
     <VisualState x:Name="Pressed"> 
     <Storyboard> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer"> 
     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/> 
     </ObjectAnimationUsingKeyFrames> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground"> 
     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/> 
     </ObjectAnimationUsingKeyFrames> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground"> 
     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/> 
     </ObjectAnimationUsingKeyFrames> 
     <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ContentContainer" /> 
     <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ContentContainer" /> 
     <DoubleAnimation Duration="0" To="-0.652" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="ContentContainer"/> 
     <DoubleAnimation Duration="0" To="-76" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ContentContainer"/> 
     <DoubleAnimation Duration="0" To="0.826" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="ButtonBackground" /> 
     <DoubleAnimation Duration="0" To="-8" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ButtonBackground"/> 
     <DoubleAnimation Duration="0" To="0.552" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ButtonBackground" /> 
     <DoubleAnimation Duration="0" To="-24" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ButtonBackground" /> 
     <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ButtonBackground" /> 
     </Storyboard> 
     </VisualState> 
     <VisualState x:Name="Disabled"> 
     <Storyboard> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer"> 
     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
     </ObjectAnimationUsingKeyFrames> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground"> 
     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
     </ObjectAnimationUsingKeyFrames> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground"> 
     <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/> 
     </ObjectAnimationUsingKeyFrames> 
     </Storyboard> 
     </VisualState> 
    </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}" RenderTransformOrigin="0.5,0.5"> 
    <Border.RenderTransform> 
     <CompositeTransform/> 
    </Border.RenderTransform> 
    <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" RenderTransformOrigin="0.5,0.5"> 
     <ContentControl.RenderTransform> 
     <CompositeTransform/> 
     </ContentControl.RenderTransform> 
    </ContentControl> 
    </Border> 
    </Grid> 
    </ControlTemplate> 
</Setter.Value> 
</Setter> 
</Style>

和你想獲得這種風格

<Button **Style="{StaticResource btnStylePress}"** Grid.Row="1" Height="266" HorizontalAlignment="Left" Margin="252,419,0,0" Name="BtnStore" VerticalAlignment="Top" Width="154" Click="BtnStore_Click" BorderThickness="0" Background="{x:Null}" />

來源

2011-12-06 10:40:31 raed

如何樣式按鈕？

回答

相關問題