Понимание того, как стили и шаблоны работают в 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>

Текст и изображение отображаются правильно, обратите внимание, что тест.png - это файл ресурсов в корне моего проекта.

Первое, чего я не понимаю: почему мое изображение корректно отображается во время выполнения, а не при проектировании в visual studio?

Затем я хотел бы использовать значение с данными в моем стиле, поэтому я использую:

<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>

Хорошо, это работает, моя модель представления предоставляет Uri с 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. Вы должны варианты здесь. Одним из них является использование свойства Tag для Button:

<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>

Кроме того, я бы не стал связывать свойства Width / Height, они не могут быть установлены явно. Вместо этого привязка к ActualHeight и ActualWidth, которые вы можете гарантировать, всегда будет установлена.

Tag - это свойство объекта типа, которое можно использовать для общей расширяемости. Другой, более элегантный вариант - определить вложенное свойство. См. Учебник в следующем сообщении в блоге:

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