Question

我使用以下XAML来使用单选按钮实现菜单：

        <Grid.Resources>
        <Style TargetType="{x:Type RadioButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                        <TextBlock Text="{TemplateBinding Content}">
                            <TextBlock.Style>
                                <Style TargetType="{x:Type TextBlock}">
                                    <Setter Property="Foreground" Value="White" />
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource AncestorType={x:Type RadioButton}}}" Value="True">
                                            <Setter Property="Foreground" Value="Gold" />
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type RadioButton}}}" Value="True">
                                            <Setter Property="Foreground" Value="Gold" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBlock.Style>
                        </TextBlock>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>


        <StackPanel Margin="25,74,644,78" Background="{x:Null}">
        <RadioButton Content="1. Do something." Click="RadioButton1_Click" FontSize="16" Margin="5"/>
        <RadioButton Content="2. Do something else." Click="RadioButton2_Click" FontSize="16" Margin="5"/>
    </StackPanel>

这很好但我想将图像作为菜单选项而不是文本。（图像用于'Home'，它将具有正常图像并悬停在图像上）

这是我想要实现的目标：

enter image description here

我该怎么做？

Answer 1

您可以根据发布的现有样式定义另一种将单选按钮显示为图像的样式，只需稍微更改ControlTemplate的内容部分即可。以下是此类样式和用法的示例：

<StackPanel Orientation="Horizontal" Background="Black">
    <StackPanel.Resources>
        <Style x:Key="PictSTyle" TargetType="{x:Type RadioButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                        <Image Width="50" Height="50">
                            <Image.Style>
                                <Style TargetType="{x:Type Image}">
                                    <Setter Property="Source" Value="home_default.png" />
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type RadioButton}}}" Value="True">
                                            <Setter Property="Source" Value="home_hovered.png" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Image.Style>
                        </Image>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </StackPanel.Resources>
    <RadioButton Margin="5" Style="{StaticResource ResourceKey=PictSTyle}"/>
</StackPanel>

Answer 2

为菜单项提供图像：

        <MenuItem>
            <MenuItem.Icon>
                <Image Source=""/>
            </MenuItem.Icon>
        </MenuItem>

当用户将鼠标悬停在菜单项（IsMouseOver）上时，通过更改Icon的图像源，只需将MenuItem的图标更改为“突出显示的图标”。

Answer 3

将图像元素作为单选按钮的“内容”属性

<RadioButton Click=HomRadioButtonClick>
   <RadioButton.Content>
      <Image Source=""/>
   </RadioButton.Content>
</RadioButton>

你需要一些额外的悬停行为逻辑，但至少应该在你的菜单中获取图像。

在WPF中使用图像作为菜单选项

3 个答案: