Как создать пользовательский элемент управления с включенным и отключенным визуальным состоянием и представителем содержимого - PullRequest
Новая
       14

Как создать пользовательский элемент управления с включенным и отключенным визуальным состоянием и представителем содержимого

0 голосов
/ 12 октября 2009

Я новичок в создании пользовательских элементов управления WPF, поэтому я очень признателен за небольшую помощь и некоторые пояснения. Вот ситуация:

Я пытаюсь создать пользовательский элемент управления со следующими чертами:

  • Элемент управления должен иметь предъявителя контента.
  • Элемент управления должен иметь либо отключенное / включенное визуальное состояние, либо быть в трех состояниях (не запущен / выполняется / завершен)
  • Элемент управления, если возможно, должен поддерживать анимацию в зависимости от состояния (включено / отключено)

В идеале, я бы хотел, чтобы что-то, что я мог сложить, было бы приятно вот так, поэтому любые предложения о том, как это сделать, были бы оценены.

Я использую Blend 3, если кто-то хочет, чтобы я использовал VSM, но у меня нет опыта работы с расширением blend 3, поэтому мне нужно небольшое руководство и объяснение, если это возможно. Спасибо вам за все время!

1 Ответ

3 голосов
/ 19 октября 2009

В WPF очень легко изменить внешний вид и поведение (стандартных) элементов управления. В этом случае вы можете использовать флажок в качестве отправной точки.

Сначала сделайте копию шаблона элемента управления:

"img43.imageshack.us/img43/1694/36338162.png"

Вы увидите следующее:

"img194.imageshack.us/img194/374/89409336.png"

Теперь сгруппируйте BulletDecorator в Grid, затем переместите ContentPresenter в эту Grid и удалите BulletDecorator и ist children.

"img9.imageshack.us/img9/7739/74247109.png"

На данный момент у вас есть флажок, подобный элементу управления, который имеет только ContentPresenter.

Теперь вы можете использовать вкладку триггера для настройки поведения.

"http://img43.imageshack.us/img43/3675/15279262.png"

код: 

<Window
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:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
x:Class="WpfApplication1.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480" mc:Ignorable="d">

<Window.Resources>
    <SolidColorBrush x:Key="CheckBoxFillNormal" Color="#F4F4F4"/>
    <SolidColorBrush x:Key="CheckBoxStroke" Color="#8E8F8F"/>
    <Style x:Key="EmptyCheckBoxFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="1" SnapsToDevicePixels="true"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="CheckRadioFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="14,0,0,0" SnapsToDevicePixels="true"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="CheckBoxStyle1" TargetType="{x:Type CheckBox}">
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="Background" Value="{StaticResource CheckBoxFillNormal}"/>
        <Setter Property="BorderBrush" Value="{StaticResource CheckBoxStroke}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="FocusVisualStyle" Value="{StaticResource EmptyCheckBoxFocusVisual}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type CheckBox}">
                    <Grid x:Name="grid" Width="64.42" Height="15.96">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="13,0,0,0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="False">
                            <Setter Property="Background" TargetName="grid" Value="#FF07FF00"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Background" TargetName="grid" Value="Red"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="{x:Null}">
                            <Setter Property="Background" Value="#FFFFDD00"/>
                            <Setter Property="Background" TargetName="grid" Value="#FFFFF400"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid x:Name="LayoutRoot">
    <CheckBox HorizontalAlignment="Left" Margin="117,72,0,0" Style="{DynamicResource CheckBoxStyle1}" VerticalAlignment="Top" Content="CheckBox" IsThreeState="True"/>
    <CheckBox HorizontalAlignment="Left" Margin="117,91.96,0,0" Style="{DynamicResource CheckBoxStyle1}" VerticalAlignment="Top" Content="CheckBox" IsThreeState="True" IsChecked="{x:Null}"/>
    <CheckBox HorizontalAlignment="Left" Margin="117,111.92,0,0" Style="{DynamicResource CheckBoxStyle1}" VerticalAlignment="Top" Content="CheckBox" IsThreeState="True" IsChecked="True"/>
    <CheckBox HorizontalAlignment="Left" Margin="209,72,0,0" VerticalAlignment="Top" Content="CheckBox" IsThreeState="True"/>
    <CheckBox HorizontalAlignment="Left" Margin="209,92.96,0,0" VerticalAlignment="Top" Content="CheckBox" IsChecked="{x:Null}" IsThreeState="True"/>
    <CheckBox HorizontalAlignment="Left" VerticalAlignment="Top" Content="CheckBox" Margin="209,111.92,0,0" IsThreeState="True" IsChecked="True"/>
</Grid>

Это тебе помогло?

Привет, Карл

...