如何重用元素的样式模板 [英] How do I reuse style template for elements

查看：51
本文介绍了如何重用元素的样式模板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在我的应用程序中创建按钮样式，但我注意到对于每个按钮我必须一次又一次地重复相同的步骤，我在下面的模板中寻找一种方式，以便我可以传递Path元素的特定属性或者每个按钮的路径不同，但所有其他元素都是相同的，并且顺序相同，我在这里尝试搜索但是找不到任何对我有帮助的特定示例，这里是xaml：





现在在上面的模板中我想要的是一些方法来绑定每个按钮的Path元素属性或某种方式为每个按钮注入不同的Path元素，休息将保持不变，所以我不想一次又一次地重复相同的风格。我是如何实现它的。



我尝试过：



这是我的模板xaml：



 <   ControlTemplate     x：Key   =  ButtonTemplate    TargetType   =  {x：Type Button} >  
 <  网格    x：名称  =  MainGrid  >  
 <  矩形    
   
                   x：名称  =  MainRectangle    
   
                  填充  = ＃00000000    
   
                   RadiusX   =  5    
   
                   RadiusY   =  5  /  >  
 <   ContentPresenter     
   
                           x：名称  =  Presenter    
   
                           Horizo​​ntalAlignment   = 中心    
   
                           VerticalAlignment   =  Center    
   
                           TextBlock.Foreground   = ＃BB225588 < span class =code-keyword> /  >  
 <  路径   名称  = 最小化   数据  =  M0,0L32,0 32,8.6899995 0,8.6899995z   拉伸  = 填充   填充  =  白色      StrokeThickness   =  2   宽度  =  17   高度  =  5    VerticalAlignment   = 中心    Horizo​​ntalAlignment   = 中心  
   
                < span class =code-attribute>                  笔划  = 白色   >  
 <   / Path  >  
 <   / Grid   >  
 <   ControlTemplate.Triggers  >  
 <  触发器   属性  =  IsMouseOver   值  =  True >  
 <   Setter    属性  = 效果 >  
 <   Setter.Value  >  
 <   DropShadowEffect     ShadowDepth   =  2   颜色  = 白色      BlurRadius   =  20 >  <   / DropShadowEffect  >  
 <   / Setter.Value  >  
 &   / Setter  >  
 <   / Trigger  >  
 <  触发器   属性  =  IsPressed   值  =  True >  
 <   Setter     TargetName   =  MainRectangle   属性  = 填写 < span class =code-attribute>  值  =  {StaticResource ClickEffect}  /  >  
 <   Setter     TargetName   = 最小化   属性  = 描边   值  = 白色    /  >  
 <   / Trigger  >  
 
 <   / ControlTemplate.Triggers  >  
 <   / ControlTemplate  >

解决方案

上面是 ControlTemplate 而不是样式 



 <   Window.Resources  >  
 <   SolidColorBrush     x：Key   =  Button.Static.Background   颜色  =  #FFFFFFF  /  >  
 <   SolidColorBrush     x：Key   =  Button.Static.Border   颜色  = ＃FF333333  /  >  
 
 <  样式    x：Key   =  ButtonStyle    TargetType   =  {x：Type Button} >  
 <   Setter    属性  = 背景   值  =  {StaticResource Button.Static.Background}  /  >  
 <   Setter    属性  =  BorderBrush   值  =  {StaticResource Button.Static.Border}  /  >  
 <   Setter    属性  = 前景   值  =  {DynamicResource {x：Static 
 SystemColors.ControlTextBrushKey}}  /  >  
 <  塞特   属性  =  Horizo​​ntalContentAlignment   值  =  左  /  >  
 <   Setter    属性  =  BorderThickness   值  =  1  /  >  
 <   Setter    属性  =  SnapsToDevicePixels   值  =  True  /  >  
 < span class =code-keyword><   Setter     Property   = 模板 >  
 <   Setter.Value  >  
 <   ControlTemplate     TargetType   =  {x：类型按钮} >  
 <  网格    x：名称  =  MainGrid < span class =code-keyword>>  
 <  矩形    
   
                   x：名称  =   MainRectangle    
   
      < span class =code-attribute>            填充  = ＃00000000    
   
                   RadiusX   =  5    
   
                   RadiusY   =  5  /  >  
 <   ContentPresenter     
   
                           x：名称  =  Presenter    
   
                           Horizo​​ntalAlignment   = 中心    
   
                           VerticalAlignment   = 中心    
   
                           TextBlock.Foreground   = ＃BB225588  /  >  
 <  路径   名称  = 最小化   数据  =  M0,0L32,0 32,8.6899995 0,8.6899995z    拉伸  = < span class =code-keyword>填写   填充  = 白色      StrokeThickness   =  2   宽度  =  17   高度  =  5    VerticalAlignment   = 中心    Horizo​​ntalAlignment   = 中心  
   
                  < span class =code-attribute>                描边  = 白色   >  
 <   / Path  >  
 <   / Grid  >  
 <   ControlTemplate.Triggers  >  
 <  触发器   属性  =  IsMouseOver   值  =  True >  
 <   Setter  < span class =code-attribute>  属性  = 效果 >  
 <   Setter.Value  >  
 <  < span class =code-leadattribute> DropShadowEffect     ShadowDepth   =  2   颜色  = 白色      BlurRadius   =  20 >  <   / DropShadowEffect  >  
 <   / Setter.Value  >  
 <   / Setter  < span class =code-keyword>>  
 <   / Trigger  >  
 <  触发器   属性  =  IsPressed  Value=\"True\"> 
                 <Setter TargetName=\"MainRectangle\" Property=\"Fill\" Value=\"{StaticResource ClickEffect}\"/> 
                 <Setter TargetName=\"Minimize\" Property=\"Stroke\" Value=\"White\" /> 
             </Trigger> 
  
           </ControlTemplate.Triggers> 
         </ControlTemplate> 
       </Setter.Value> 
     </Setter> 
   </Style> 
  
 </Window.Resources> 
  
 <Button Style=\"{StaticResouce ButtonStyle}\"/>

Now, for unique button Paths, it is best to make your own so that you can pass a Path as a DP:using System.Windows;
使用 System.Windows.Controls;
使用 System.Windows.Media;

namespace WpfNet45.Core.Controls
{
public class PathButton : Button
{
static PathButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(PathButton), new FrameworkPropertyMetadata(typeof(PathButton)));
}

#region Properties

public static readonly DependencyProperty PathDataProperty = DependencyProperty.Register
(
\"PathData\",
typeof(Geometry),
typeof(PathButton),
new PropertyMetadata(null)
);

public Geometry PathData
{
get { return (Geometry) GetValue(PathDataProperty); }
set { SetValue(PathDataProperty, value); }
}

public static readonly DependencyProperty PathStyleProperty = DependencyProperty.Register
(
\"PathStyle\",
typeof(Style),
typeof(PathButton),
new PropertyMetadata(null)
);

public Style PathStyle
{
get { return (Style) GetValue(PathStyleProperty); }
set { SetValue(PathStyleProperty, value); }
}

#endregion
}
}

Now to use:

<Window.Resources> 
   <media:Geometry x:Key=\"Trash\">M13.004038,11.999008L15.004038,11.999008 15.004038,27.999008 13.004038,27.999008z M9.0040382,11.999008L11.004038,11.999008 11.004038,27.999008 9.0040382,27.999008z M5.0040382,11.999008L7.0040382,11.999008 7.0040382,27.999008 5.0040382,27.999008z M2.0040382,9.9990084L2.0040382,29.999008 18.005991,29.999008 18.004038,9.9990084z M0.0040382088,7.9990083L20.004038,7.9990083 20.004038,29.999008C20.004038,31.102036,19.107066,31.999008,18.004 038,31.999008L2.0040382,31.999008C0.90101089,31.999008,0.0040382347,31.102036,0.0040382088,29.999008z M9.382152,1.9928446C9.4311546,2.0108452,9.2901482,2.1378503,9.2241453,2.3918595L9.1588997,2.6454129 12.349724,3.4957047 12.411291,3.2568917C12.479293,2.9928818,12.41229,2.8088751,12.379289,2.7708735z M9.3526691,0.0019369125C9.5361752,-0.0065422058,9.7194179,0.01277113,9.8971762,0.060772896L12.969316,0.87780333C14.082366,1.1758142,14.686393,2.4398613,14.348379,3.7559104L14.282698,4.0108039 21.008067,5.8029819 20.492064,7.7349798 0,2.273984 0.51500203,0.34198523 7.2264289,2.1304479 7.2880572,1.8918409C7.4690656,1.189815 7.8960847,0.59879303 8.4571108,0.27178049 8.7402481,0.10739946 9.0468248,0.016067982 9.3526691,0.0019369125z</media:Geometry> 
  
   <Style < span class=\"code-attribute\">x:Key=\"ExPathStyle\" TargetType=\"Path\"> 
     <Setter Property=\"Fill\" Value=\"{DynamicResource {x:Static 
                                     SystemColors.ControlTextBrushKey}}\"/> 
     <Setter Property=\"StrokeThickness\" Value=\"0\"/> 
     <Setter Property=\"Width\" Value=\"16\"/> 
     <Setter Property=\"Height\" Value=\"16\"/> 
     <Setter Property=\"Stretch\" Value=\"Uniform\"/> 
     <Setter Property=\"VerticalAlignment\" Value=\"Center\"/> 
     <Setter Property=\"HorizontalAlignment\" Value=\"Center\"/> 
     <Setter Property=\"SnapsToDevicePixels\" Value=\"True\"/> 
   </Style> 
  
 </Window.Resources> 
  
   <local:PathButtonEx Content=\"PathButtonEx\"  
  
                       ContentPlacement=\"Right\"  
  
                       PathGeometry=\"{StaticResource Trash}\" 
  
                       PathStyle=\"{StaticResource ExPathS tyle}\"/>


I am creating button styles in my application, but i noticed that for every button i have to repeat the same steps again and again, i am looking for a way in the following template so that i can pass particular properties of Path element or Path for every button different but all the other elements would be same and in same order, i have tried here searching but not able to find any particular example that was helpful to me, here is the xaml :


Now in the above template what i want is some way to bind with every button the Path element properties or some way to inject the Path element different for every button, rest will remain same, so i don't want to repeat the same style again and again. How i can achieve it.

What I have tried:

Here is my xaml for Template:

<ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
        <Grid x:Name="MainGrid">
            <Rectangle 

        x:Name="MainRectangle" 

        Fill="#00000000" 

        RadiusX="5" 

        RadiusY="5"/>
            <ContentPresenter 

            x:Name="Presenter" 

            HorizontalAlignment="Center" 

            VerticalAlignment="Center" 

            TextBlock.Foreground="#BB225588"/>
            <Path Name="Minimize" Data="M0,0L32,0 32,8.6899995 0,8.6899995z" Stretch="Fill" Fill="White"  StrokeThickness="2" Width="17" Height="5" VerticalAlignment="Center" HorizontalAlignment="Center"

                Stroke="White" >
            </Path>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Effect">
                    <Setter.Value>
                        <DropShadowEffect ShadowDepth="2" Color="White"  BlurRadius="20"></DropShadowEffect>
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter TargetName="MainRectangle" Property="Fill" Value="{StaticResource ClickEffect}"/>
                <Setter TargetName="Minimize" Property="Stroke" Value="White" />
            </Trigger>

        </ControlTemplate.Triggers>
    </ControlTemplate>

解决方案

Above is a ControlTemplate and not a Style 

<Window.Resources>
  <SolidColorBrush x:Key="Button.Static.Background" Color="#FFFFFFFF"/>
  <SolidColorBrush x:Key="Button.Static.Border" Color="#FF333333"/>

  <Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
    <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static
                                          SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
        <Grid x:Name="MainGrid">
            <Rectangle 

        x:Name="MainRectangle" 

        Fill="#00000000" 

        RadiusX="5" 

        RadiusY="5"/>
            <ContentPresenter 

            x:Name="Presenter" 

            HorizontalAlignment="Center" 

            VerticalAlignment="Center" 

            TextBlock.Foreground="#BB225588"/>
            <Path Name="Minimize" Data="M0,0L32,0 32,8.6899995 0,8.6899995z" Stretch="Fill" Fill="White"  StrokeThickness="2" Width="17" Height="5" VerticalAlignment="Center" HorizontalAlignment="Center"

                Stroke="White" >
            </Path>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Effect">
                    <Setter.Value>
                        <DropShadowEffect ShadowDepth="2" Color="White"  BlurRadius="20"></DropShadowEffect>
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter TargetName="MainRectangle" Property="Fill" Value="{StaticResource ClickEffect}"/>
                <Setter TargetName="Minimize" Property="Stroke" Value="White" />
            </Trigger>

          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

</Window.Resources>

<Button Style="{StaticResouce ButtonStyle}"/>

Now, for unique button Paths, it is best to make your own so that you can pass a Path as a DP:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace WpfNet45.Core.Controls
{
    public class PathButton : Button
    {
        static PathButton()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(PathButton), new FrameworkPropertyMetadata(typeof(PathButton)));
        }

        #region Properties

        public static readonly DependencyProperty PathDataProperty = DependencyProperty.Register
            (
                "PathData",
                typeof(Geometry),
                typeof(PathButton),
                new PropertyMetadata(null)
            );

        public Geometry PathData
        {
            get { return (Geometry) GetValue(PathDataProperty); }
            set { SetValue(PathDataProperty, value); }
        }

        public static readonly DependencyProperty PathStyleProperty = DependencyProperty.Register
            (
                "PathStyle",
                typeof(Style),
                typeof(PathButton),
                new PropertyMetadata(null)
            );

        public Style PathStyle
        {
            get { return (Style) GetValue(PathStyleProperty); }
            set { SetValue(PathStyleProperty, value); }
        }

        #endregion
    }
}

Now to use:

<Window.Resources>
  <media:Geometry x:Key="Trash">M13.004038,11.999008L15.004038,11.999008 15.004038,27.999008 13.004038,27.999008z M9.0040382,11.999008L11.004038,11.999008 11.004038,27.999008 9.0040382,27.999008z M5.0040382,11.999008L7.0040382,11.999008 7.0040382,27.999008 5.0040382,27.999008z M2.0040382,9.9990084L2.0040382,29.999008 18.005991,29.999008 18.004038,9.9990084z M0.0040382088,7.9990083L20.004038,7.9990083 20.004038,29.999008C20.004038,31.102036,19.107066,31.999008,18.004038,31.999008L2.0040382,31.999008C0.90101089,31.999008,0.0040382347,31.102036,0.0040382088,29.999008z M9.382152,1.9928446C9.4311546,2.0108452,9.2901482,2.1378503,9.2241453,2.3918595L9.1588997,2.6454129 12.349724,3.4957047 12.411291,3.2568917C12.479293,2.9928818,12.41229,2.8088751,12.379289,2.7708735z M9.3526691,0.0019369125C9.5361752,-0.0065422058,9.7194179,0.01277113,9.8971762,0.060772896L12.969316,0.87780333C14.082366,1.1758142,14.686393,2.4398613,14.348379,3.7559104L14.282698,4.0108039 21.008067,5.8029819 20.492064,7.7349798 0,2.273984 0.51500203,0.34198523 7.2264289,2.1304479 7.2880572,1.8918409C7.4690656,1.189815 7.8960847,0.59879303 8.4571108,0.27178049 8.7402481,0.10739946 9.0468248,0.016067982 9.3526691,0.0019369125z</media:Geometry>

  <Style x:Key="ExPathStyle" TargetType="Path">
    <Setter Property="Fill" Value="{DynamicResource {x:Static
                                    SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="StrokeThickness" Value="0"/>
    <Setter Property="Width" Value="16"/>
    <Setter Property="Height" Value="16"/>
    <Setter Property="Stretch" Value="Uniform"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="SnapsToDevicePixels" Value="True"/>
  </Style>

</Window.Resources>

  <local:PathButtonEx Content="PathButtonEx" 

                      ContentPlacement="Right" 

                      PathGeometry="{StaticResource Trash}"

                      PathStyle="{StaticResource ExPathStyle}"/>


这篇关于如何重用元素的样式模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆