Как создать полупрозрачные кнопки для изображений - PullRequest
Новая
       8

Как создать полупрозрачные кнопки для изображений

1 голос
/ 22 октября 2011

У меня есть несколько кнопок, которые выполняют операции с изображением.Мне нужно поместить эти кнопки в верхней части изображения.Кнопки должны быть самими изображениями.

  • Кнопка должна быть полупрозрачной.

  • Изображение / цвет должны быть изменены одним щелчком мыши, чтобы пользователь мог знать, какой элемент управления активен.

  • При наведении курсора на кнопку непрозрачность должна увеличиться.

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

1 Ответ

1 голос
/ 22 октября 2011

Если я правильно понимаю ваши требования, я думаю, что ToggleButton должен дать вам то, что вы хотите.

По сути, вам нужно создать один полупрозрачный Border для мыши над визуалом и другой полупрозрачный Border для непроверенного визуального.Затем в VisualStateManger, когда состояние MouseOver активно, вы показываете MouseOverVisual;когда состояние Unchecked активно, вы показываете UncheckedVisual.

Я быстро смоделировал для вас стиль в Expression Blend.Это не идеально, но в leasat даст вам некоторые идеи.:) 

    <Style x:Key="SemiTransparentImageToggleButtonStyle" TargetType="ToggleButton">
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="MouseOverVisual">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="UncheckedVisual" d:IsOptimized="True"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed"/>
                                <VisualState x:Name="Disabled"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked"/>
                                <VisualState x:Name="Unchecked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="UncheckedVisual">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused"/>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <Border x:Name="MouseOverVisual" Background="White" Opacity="0.5" Visibility="Collapsed" OpacityMask="Black"/>
                        <Border x:Name="UncheckedVisual" Background="White" Opacity="0.7" Visibility="Collapsed"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
...