Question

我的ToggleButton内有图片。当按钮被禁用时，我希望在按钮上显示半透明层，以指示按钮被禁用。

我想使用保存图像的Canvas和将用作半透明图层的矩形。但这就是我得到的

enter image description here

为什么矩形从按钮的中心开始？还有其他更好的方法吗？

<StackPanel>
        <ToggleButton Name="MyButton" Height="39" Width="39">               
            <Canvas>
                <Image />
                <Rectangle Fill="Black" Width="39" Height="39" Opacity="0.5" >
                    <Rectangle.Style>
                        <Style TargetType="{x:Type Rectangle}">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding ElementName=MyButton,Path=IsEnabled}" Value="True">
                                    <Setter Property="Visibility" Value="Hidden" />
                                </DataTrigger>
                                <DataTrigger Binding="{Binding ElementName=MyButton,Path=IsEnabled}" Value="False">
                                    <Setter Property="Visibility" Value="Visible" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Rectangle.Style>
                </Rectangle>                        
            </Canvas>
        </ToggleButton>
  </StackPanel>

Answer 1

尝试定义一个路径来说明绘制矩形的位置。更改值以适应您的按钮。

例如：

 <Path Data=" M0,0 L10,10 M0,10 L10,0" Stretch="Uniform" ></Path>

Answer 2

试试这个

<ToggleButton Name="MyButton">
        <ToggleButton.Template>
            <ControlTemplate TargetType="ToggleButton">
                <ControlTemplate.Resources>
                    <BitmapImage x:Key="Image" UriSource="ImageRoation.png"></BitmapImage>
                </ControlTemplate.Resources>
                <Grid Height="39" Width="39" Background="Transparent">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    <Border Name="UpperRect" CornerRadius="3" Background="DimGray" Visibility="Hidden" RenderOptions.BitmapScalingMode="HighQuality" Opacity="0.5" BorderBrush="Black" BorderThickness="1" SnapsToDevicePixels="True" UseLayoutRounding="True" Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="2">
                        <Image Height="7" Width="7" Source="{StaticResource Image}" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="3,3,0,0"></Image>
                    </Border>
                    <Border  Grid.Row="1" Grid.RowSpan="2" Grid.Column="1" Grid.ColumnSpan="2" Background="DimGray" SnapsToDevicePixels="True"></Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="UpperRect" Property="Panel.ZIndex" Value="1"></Setter>
                        <Setter TargetName="UpperRect" Property="Visibility" Value="Visible"></Setter>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="True">
                        <Setter TargetName="UpperRect" Property="Panel.ZIndex" Value="0"></Setter>
                        <Setter TargetName="UpperRect" Property="Visibility" Value="Hidden"></Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </ToggleButton.Template>
    </ToggleButton>

如何在ToggleButton中显示半透明层？

2 个答案: