Question

我想在矩形的右上角添加一个图像（我最终会将其用作一种切换按钮）。

我该怎么做？

这是xaml：

<UserControl x:Class="EmulationScreenControl.RectangleSelectionControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:emulationScreenControl="clr-namespace:EmulationScreenControl"
         mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300">    
<Grid SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
    <Border BorderBrush="GhostWhite" BorderThickness="0" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
        <Rectangle Fill="LightSkyBlue" Opacity="0.2" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased"></Rectangle>
    </Border>
</Grid>

Answer 1

只需使用Grid打包Rectangle和Image。

<Grid SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
        <Border BorderBrush="GhostWhite" BorderThickness="0" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">
            <Grid>
            <Rectangle Fill="LightSkyBlue" Opacity="0.2" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">

            </Rectangle>
                <Image HorizontalAlignment="Right" VerticalAlignment="Top" Width="100" Height="100" Source="http://www.citgroup.in/images/icon/wcf.png"/>
            </Grid>
        </Border>
    </Grid>

这是：

Answer 2

我找到的解决方案是模板创建：

<ControlTemplate x:Key="TopRightTemplate" TargetType="{x:Type local:SizeChrome}">
        <Grid SnapsToDevicePixels="True" HorizontalAlignment="Right" VerticalAlignment="Top">
            <StackPanel
                Margin="-50,-50,-20,5"
                Background="White"
                   HorizontalAlignment="Right"
                   VerticalAlignment="Bottom"
                Orientation="Horizontal">
                <Image Cursor="Hand" ToolTip="Bla"
                        RenderOptions.EdgeMode="Aliased" 
                        SnapsToDevicePixels="True" 
                        RenderOptions.BitmapScalingMode="NearestNeighbor"
                        Width="16" Height="16"
                       MouseLeftButtonUp="ToggleIsMultipleScreensSelection"
                        >
                    <Image.Style>
                        <Style TargetType="{x:Type Image}">
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver"
                                                                 Value="true">
                                    <Setter Property="Cursor"
                                                                    Value="Hand" />
                                </Trigger>
                                <DataTrigger Binding="{Binding IsMultipleScreens}"
                                                                 Value="false">
                                    <Setter Property="Source"
                                                                Value="C:\\Users\\liorl\\Desktop\\I1.png" />
                                    <Setter Property="ToolTip"
                                                                Value="NotMul" />
                                </DataTrigger>
                                <DataTrigger Binding="{Binding IsMultipleScreens}"
                                                                 Value="true">
                                    <Setter Property="Source"
                                                                Value="C:\\Users\\liorl\\Desktop\\I1.png" />
                                    <Setter Property="ToolTip"
                                                                Value="Mul" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Image.Style>
                </Image>
            </StackPanel>

        </Grid>
    </ControlTemplate>

如何在矩形的边角添加图标？

2 个答案: