了解如何样式和模板的工作在Silverlight

Question

我想了解的风格是如何工作在Silverlight中，这是我做了什么：

<UserControl x:Class="SilverlightApplication1.MainPage" 
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" 
xmlns:vm="clr-namespace:SilverlightApplication1" mc:Ignorable="d" 
d:DesignHeight="300" d:DesignWidth="400"> 

<UserControl.DataContext> 
    <vm:ViewModel /> 
</UserControl.DataContext> 

<UserControl.Resources> 
    <Style x:Key="TestStyle" TargetType="Button"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Image Source="test.png" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" /> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</UserControl.Resources> 

<StackPanel x:Name="LayoutRoot" Background="White"> 
    <TextBlock Text="{Binding SayHello}" /> 
    <Button Style="{StaticResource TestStyle}" Width="100" Height="100 /> 
</StackPanel> 

的文本和图像显示正常请注意，test.png是我谟的根目录中的资源文件。

第一件事，我不明白：为什么我的形象正确地在运行时显示出来，而不是在Visual Studio的设计？

然后，我想在我的风格使用databinded值，所以我用：

<UserControl x:Class="SilverlightApplication1.MainPage" 
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" 
xmlns:vm="clr-namespace:SilverlightApplication1" mc:Ignorable="d" 
d:DesignHeight="300" d:DesignWidth="400"> 

<UserControl.DataContext> 
    <vm:ViewModel /> 
</UserControl.DataContext> 

<UserControl.Resources> 
    <Style x:Key="TestStyle" TargetType="Button"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Image Source="{Binding MyUrl}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" /> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</UserControl.Resources> 

<StackPanel x:Name="LayoutRoot" Background="White"> 
    <TextBlock Text="{Binding SayHello}" /> 
    <Button Style="{StaticResource TestStyle}" Width="100" Height="100" /> 
</StackPanel> 

好，它的工作，我的视图模型暴露了一个开放的与test.png为相对。 我想现在要做的就是与许多图像使用按钮，所以它可能是伟大的，能够做这样的事情：

<UserControl x:Class="SilverlightApplication1.MainPage" 
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" 
xmlns:vm="clr-namespace:SilverlightApplication1" mc:Ignorable="d" 
d:DesignHeight="300" d:DesignWidth="400"> 

<UserControl.DataContext> 
    <vm:ViewModel /> 
</UserControl.DataContext> 

<UserControl.Resources> 
    <Style x:Key="TestStyle" TargetType="Button"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Image Source="{TemplateBinding TheUrl}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" /> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</UserControl.Resources> 

<StackPanel x:Name="LayoutRoot" Background="White"> 
    <TextBlock Text="{Binding SayHello}" /> 
    <Button Style="{StaticResource TestStyle}" Width="100" Height="100" TheUrl="{Binding MyUrl}" /> 
</StackPanel> 

当然的财产TheUrl没有按按钮中不存在。 我不希望创建自己的控制，目的是了解样式。

我该怎么做？

在此先感谢您的帮助。 最好的问候

Answer 1

你在你的观察很正确，按钮没有一个TheUrl财产。你必须在这里选择。一种是使用Button的Tag属性：

<UserControl.Resources> 
    <Style x:Key="TestStyle" TargetType="Button"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Image Source="{TemplateBinding Tag}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" /> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</UserControl.Resources> 

<StackPanel x:Name="LayoutRoot" Background="White"> 
    <TextBlock Text="{Binding SayHello}" /> 
    <Button Style="{StaticResource TestStyle}" Width="100" Height="100" Tag="{Binding MyUrl}" /> 
</StackPanel> 

顺便说一下，我不会绑定到宽度/高度属性，这些属性可能不会显式设置。相反，结合的ActualHeight和ActualWidth的，你能保证将始终设置。

标签是可用于一般的扩展类型的对象的属性。另一个更优雅的选项是定义一个附加属性。请参阅下面的博客文章教程：

http://www.hardcodet.net/2009/01/create-wpf-image-button-through-attached-properties