Установка свойств шаблонов управления в XAML - PullRequest
Новая
       25

Установка свойств шаблонов управления в XAML

0 голосов
/ 10 февраля 2009

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

<Button x:Name="btnClose" Template="{DynamicResource GlassButton}" Width="32" Height="32" GlowStartColor="Red" GlowEndColor="DarkRed">Button1</Button>

GlowStartColor и GlowEndColor - это свойства, которые я хочу изменить в шаблоне элемента управления.

Вот мой шаблон управления 

    <ControlTemplate x:Key="DefaultGlassButton" TargetType="{x:Type Button}">
    <!-- Internal Resources -->
    <ControlTemplate.Resources>
        <Storyboard x:Key="Storyboard1" RepeatBehavior="Forever" AutoReverse="True">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Glow" Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Glow" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                <SplineColorKeyFrame KeyTime="00:00:00.3000000" Value="#00C080FF"/>
                <SplineColorKeyFrame KeyTime="00:00:00.7000000" Value="#00C080FF"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="Storyboard2">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Glow" Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.745"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </ControlTemplate.Resources>

    <!-- Actual Control Template-->
    <Border x:Name="OuterBorder" BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
        <Border x:Name="InnerBorder" Background="#7F000000" BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
            <Grid x:Name="MainGrid">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.5*"/>
                    <RowDefinition Height="0.5*"/>
                </Grid.RowDefinitions>
                <Border x:Name="Glow" HorizontalAlignment="Stretch" Width="Auto" Opacity="0" Grid.RowSpan="2" CornerRadius="4,4,4,4">
                    <Border.Background>
                        <RadialGradientBrush>
                            <RadialGradientBrush.RelativeTransform>
                                <TransformGroup>
                                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.852" ScaleY="2.281"/>
                                    <SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.5"/>
                                    <RotateTransform Angle="0" CenterX="0.5" CenterY="0.5"/>
                                    <TranslateTransform X="0.014" Y="0.458"/>
                                </TransformGroup>
                            </RadialGradientBrush.RelativeTransform>
                            <GradientStop x:Name="GlowStartColor" Color="#B1FF80FF" Offset="0"/>
                            <GradientStop x:Name="GlowEndColor" Color="#00C080FF" Offset="1"/>
                        </RadialGradientBrush>
                    </Border.Background>
                </Border>
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2"/>
                <Border x:Name="Shine" HorizontalAlignment="Stretch" Margin="0,0,0,0" CornerRadius="4,4,0,0">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop x:Name="ShineStartColor" Color="#99FFFFFF" Offset="0"/>
                            <GradientStop x:Name="ShineEndColor" Color="#26FFFFFF" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
            </Grid>
        </Border>
    </Border>

    <!-- Triggers -->
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
        </Trigger>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard x:Name="Storyboard2_BeginStoryboard" Storyboard="{StaticResource Storyboard2}"/>
            </Trigger.ExitActions>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Opacity" TargetName="Shine" Value="0.4"/>
            <Setter Property="Background" TargetName="InnerBorder" Value="#CC000000"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Это правильный способ сделать это, или есть лучший способ? Все еще довольно плохо знакомы с WPF и XAML, поэтому многое еще предстоит изучить.

Ответы [ 4 ]

2 голосов
/ 18 февраля 2009

Мне пришлось сделать что-то подобное в последнее время. Оказывается, вы можете использовать другие свойства, которые уже определены в элементе управления. Таким образом, если ваш новый шаблон не использует TemplateBinding s, скажем, для Foreground и Background, тогда вы можете вставить туда свои начальные / конечные цвета свечения. Также на всех элементах управления есть свойство Tag, которое обычно пустое.

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

2 голосов
/ 11 февраля 2009

Вам нужно либо создать подкласс Button и добавить эти два свойства, либо добавить эти два свойства как присоединенные свойства (путем создания нового класса с двумя присоединенными свойствами зависимостей).

0 голосов
/ 10 февраля 2009

Я не мог заставить вышесказанное работать правильно. Это на правильном пути, хотя я думаю. Я просто хотел иметь возможность устанавливать свойства свечения при определении кнопки. Единственный другой способ сделать это - создать пользовательский элемент управления для кнопки, но кажется немного излишним просто добавить некоторые дополнительные свойства.

0 голосов
/ 10 февраля 2009

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

<GradientStop x:Name="GlowStartColor" Color="{TemplateBinding GlowStartColor}" Offset="0"/>
<GradientStop x:Name="GlowEndColor" Color="{TemplateBinding GlowEndColor}" Offset="1"/>
...