如何创建半透明的图像按钮

本文关键字：半透明 图像 按钮 创建 何创建 | 更新日期: 2023-09-27 18:12:17

我有几个按钮对图像进行操作。我需要把这些按钮放在图像的顶部。按钮本身应该是图像。

  • 按钮应为半透明的。

  • 应该在点击时改变图像/颜色，以便用户可以知道哪个控件是激活的。

  • 当鼠标悬停在按钮上时，不透明度应该增加。

我怎么做这些?任何关于如何创建自定义控件或使用哪些控件的指导都将非常有帮助。

如何创建半透明的图像按钮

如果我正确理解你的需求，我认为ToggleButton应该给你你想要的。

基本上你需要创建一个半透明的Border鼠标在视觉和另一个半透明的Border未检查的视觉。然后在VisualStateManger中，当MouseOver状态活跃时，显示MouseOverVisual;当Unchecked状态为活动状态时，显示UncheckedVisual。

我很快在Expression Blend中为你模拟了一个样式。它不是完美的，但至少会给你一些想法。:) 

    <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>
相关文章：