Silverlight - 將值傳遞給一個樣式元素

所以我一直在玩Silverlight的按鈕樣式和個人感受，你需要付出多少努力來做一個簡單的開/關狀態，我想知道是否有人可以告訴我如何改變目前爲止的內容，以便我可以使用任何圖像來顯示打開和關閉狀態，而不是每個按鈕都有7 x 60行XAML。Silverlight - 將值傳遞給一個樣式元素

<UserControl x:Class="Reader.LanguageSelection" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d" 
d:DesignHeight="800" d:DesignWidth="1280"> 
<UserControl.Resources> 
    <Style x:Key="btnLangStyle" TargetType="Button"> 
     <Setter Property="Background" Value="#FF1F3B53"/> 
     <Setter Property="Foreground" Value="#FF000000"/> 
     <Setter Property="Padding" Value="3"/> 
     <Setter Property="BorderThickness" Value="1"/> 
     <Setter Property="BorderBrush"> 
      <Setter.Value> 
       <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
        <GradientStop Color="#FFA3AEB9" Offset="0"/> 
        <GradientStop Color="#FF8399A9" Offset="0.375"/> 
        <GradientStop Color="#FF718597" Offset="0.375"/> 
        <GradientStop Color="#FF617584" Offset="1"/> 
       </LinearGradientBrush> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Grid> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"> 
            <Storyboard> 
             <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="btnLangEn_off" d:IsOptimized="True"/> 
             <DoubleAnimation Duration="0" To="-28" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="btnLangEn_off" d:IsOptimized="True"/> 
             <DoubleAnimation Duration="0" To="-25" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="btnLangEn_off" d:IsOptimized="True"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="MouseOver"/> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="btnLang_en" d:IsOptimized="True"/> 
             <DoubleAnimation Duration="0" To="-30" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="btnLang_en" d:IsOptimized="True"/> 
             <DoubleAnimation Duration="0" To="-20" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="btnLang_en" d:IsOptimized="True"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"/> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="FocusStates"> 
           <VisualState x:Name="Focused"/> 
           <VisualState x:Name="Unfocused"/> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Image x:Name="btnLangEn_off" Margin="27,24,-27,-24" Opacity="0" Source="Resources/Images/btnLangEn_off.png" Stretch="Fill" RenderTransformOrigin="0.5,0.5"> 
          <Image.RenderTransform> 
           <CompositeTransform/> 
          </Image.RenderTransform> 
         </Image> 
         <Image x:Name="btnLangEn_on" Margin="33,23,-33,-23" Opacity="0" Source="Resources/Images/btnLangEn_off.png" Stretch="Fill" RenderTransformOrigin="0.5,0.5"> 
          <Image.RenderTransform> 
           <CompositeTransform/> 
          </Image.RenderTransform> 
         </Image> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</UserControl.Resources> 

<Grid x:Name="LayoutRoot"> 
    <Canvas Width="1280" Height="800"> 
     <Button x:Name="btnLangEn" Width="93" Height="63" Click="btnLangEn_Click" Canvas.Left="417" Canvas.Top="463" Style="{StaticResource btnLangStyle}" /> 
     <Button x:Name="btnLangEs" Width="93" Height="63" Content="Español" Click="btnLangEs_Click" Canvas.Left="503" Canvas.Top="576" /> 
     <Button x:Name="btnLangDe" Width="93" Height="63" Content="Deutsch" Click="btnLangDe_Click" Canvas.Left="768" Canvas.Top="463" /> 
     <Button x:Name="btnLangFr" Width="93" Height="63" Content="French" Click="btnLangFr_Click" Canvas.Left="593" Canvas.Top="463" /> 
     <Button x:Name="btnLangIt" Width="93" Height="63" Content="Italian" Click="btnLangIt_Click" Canvas.Left="682" Canvas.Top="576" /> 
     <Button x:Name="btnLangDa" Width="93" Height="63" Content="Danish" Click="btnLangDa_Click" Canvas.Left="593" Canvas.Top="686" /> 
    </Canvas> 
</Grid>

命名btnLangEn_off和btnLangEn_on的圖像顯然是特定於一種類型的按鈕，但我需要應用該樣式到我所有的按鈕，告訴風格來呈現的每個圖像的方式州。

謝謝， Greg。

來源

2012-09-21 gfyans

我會做一個自定義的控制出於此。該控件將包含您的風格和一個按鈕。然後，您可以將您的圖像和圖像顯示爲DependencyProperties。您可以使用此控件而不是按鈕。 – cadrell0

如果你讓你的自定義控件繼承自Button而不是UserControl，那麼你將永遠可以在任何使用Button的地方使用它。 – cadrell0

這不是一個壞主意。如果你想補充說，作爲答案，我會在週末給它一個破解，並在週一回答它。 – gfyans

根據我在這裏的評論是我工作的一個例子。請注意，我沒有測試過，因此可能無法完美運行，但您應該瞭解一般想法。

代碼隱藏

public partial class CustomButton : Button 
{ 
    public static readonly DependencyProperty OnImageProperty = 
     DependencyProperty.Register("OnImageSource", 
            typeof (ImageSource), 
            typeof (CustomButton), 
            new PropertyMetadata(null)); 

    public static readonly DependencyProperty OffImageProperty = 
     DependencyProperty.Register("OffImageSource", 
            typeof (ImageSource), 
            typeof (CustomButton), 
            new PropertyMetadata(null)); 

    public CustomButton() 
    { 
     InitializeComponent(); 

     Binding offBinding = new Binding 
           { 
            Source = this, 
            Path = new PropertyPath(OffImageProperty) 
           }; 
     OffImage.SetBinding(Image.SourceProperty, offBinding); 

     Binding onBinding = new Binding 
           { 
            Source = this, 
            Path = new PropertyPath(OffImageProperty) 
           }; 

     OnImage.SetBinding(Image.SourceProperty, onBinding); 
    } 

    public ImageSource OffImageSource 
    { 
     get { return (ImageSource) GetValue(OffImageProperty); } 
     set { SetValue(OffImageProperty, value); } 
    } 

    public ImageSource OnImageSource 
    { 
     get { return (ImageSource) GetValue(OnImageProperty); } 
     set { SetValue(OnImageProperty, value); } 
    } 
}

XAML

<Button x:Class="CustomButton" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     mc:Ignorable="d" 
     d:DesignHeight="300" 
     d:DesignWidth="400"> 
    <Button.Resources> 
     <Image x:Name="OffImage" 
       Margin="27,24,-27,-24" 
       Opacity="0" 
       Stretch="Fill" 
       RenderTransformOrigin="0.5,0.5"> 
      <Image.RenderTransform> 
       <CompositeTransform /> 
      </Image.RenderTransform> 
     </Image> 
     <Image x:Name="OnImage" 
       Margin="33,23,-33,-23" 
       Opacity="0" 
       Stretch="Fill" 
       RenderTransformOrigin="0.5,0.5"> 
      <Image.RenderTransform> 
       <CompositeTransform /> 
      </Image.RenderTransform> 
     </Image> 
    </Button.Resources> 
    <Button.Style> 
     <Style TargetType="Button"> 
      <Setter Property="Background" 
        Value="#FF1F3B53" /> 
      <Setter Property="Foreground" 
        Value="#FF000000" /> 
      <Setter Property="Padding" 
        Value="3" /> 
      <Setter Property="BorderThickness" 
        Value="1" /> 
      <Setter Property="BorderBrush"> 
       <Setter.Value> 
        <LinearGradientBrush EndPoint="0.5,1" 
             StartPoint="0.5,0"> 
         <GradientStop Color="#FFA3AEB9" 
             Offset="0" /> 
         <GradientStop Color="#FF8399A9" 
             Offset="0.375" /> 
         <GradientStop Color="#FF718597" 
             Offset="0.375" /> 
         <GradientStop Color="#FF617584" 
             Offset="1" /> 
        </LinearGradientBrush> 
       </Setter.Value> 
      </Setter> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Grid> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Normal"> 
             <Storyboard> 
              <DoubleAnimation Duration="0" 
                  To="1" 
                  Storyboard.TargetProperty="(UIElement.Opacity)" 
                  Storyboard.TargetName="OffImage" 
                  d:IsOptimized="True" /> 
              <DoubleAnimation Duration="0" 
                  To="-28" 
                  Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" 
                  Storyboard.TargetName="OffImage" 
                  d:IsOptimized="True" /> 
              <DoubleAnimation Duration="0" 
                  To="-25" 
                  Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
                  Storyboard.TargetName="OffImage" 
                  d:IsOptimized="True" /> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="MouseOver" /> 
            <VisualState x:Name="Pressed"> 
             <Storyboard> 
              <DoubleAnimation Duration="0" 
                  To="1" 
                  Storyboard.TargetProperty="(UIElement.Opacity)" 
                  Storyboard.TargetName="OnImage" 
                  d:IsOptimized="True" /> 
              <DoubleAnimation Duration="0" 
                  To="-30" 
                  Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" 
                  Storyboard.TargetName="OnImage" 
                  d:IsOptimized="True" /> 
              <DoubleAnimation Duration="0" 
                  To="-20" 
                  Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
                  Storyboard.TargetName="OnImage" 
                  d:IsOptimized="True" /> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Disabled" /> 
           </VisualStateGroup> 
           <VisualStateGroup x:Name="FocusStates"> 
            <VisualState x:Name="Focused" /> 
            <VisualState x:Name="Unfocused" /> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Button.Style> 
</Button>

來源

2012-09-21 15:10:43 cadrell0

Silverlight - 將值傳遞給一個樣式元素

回答

相關問題