Wie füge ich ein Symbol an der Umrandung eines Rechtecks ​​hinzu?

Question

Ich möchte ein Bild in der oberen rechten Ecke eines Rechtecks ​​hinzufügen (etwas, das ich als eine Art Toggle-Taste schließlich verwenden werde).

Wie kann ich das tun?

Dies ist der 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

Die Lösung war ich von Template-Erstellung gefunden:

<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> 

Answer 2

Nur eine Grid verwenden sowohl die Rectangle und die Image zu wickeln.

<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> 

Hier ist sie: