将图像停靠在StackPanel WPF的右侧

Question

我创建了以下UserControl来显示视频：

<UserControl x:Class="InstallerToolkit.UserControls.UserControlVideoPlayer"
         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" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="464" Loaded="UserControl_Loaded"> 
<Grid Background="Black">
    <StackPanel VerticalAlignment="Bottom" Background="Black" >
        <MediaElement Name="MediaElement"  MediaOpened="Element_MediaOpened" MediaEnded="MediaElement_MediaEnded" LoadedBehavior="Manual" UnloadedBehavior="Stop" MouseEnter="MediaElement_MouseEnter" />
        <StackPanel Background="Gray">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Background="Gray">
                <Image Name="ImagePlay" Source="/Images/play.png" MouseDown="OnMouseDownPlayMedia"  VerticalAlignment="Center" Height="25" Width="25"/>
                <Slider x:Name="timelineSlider"  Thumb.DragStarted="DragStarted" Thumb.DragCompleted="DragCompleted" Margin="5" ValueChanged="SeekToMediaPosition"  Width="70"/>
                <TextBlock x:Name="lblProgressStatus" Margin="5"><Run Text="00:00"/></TextBlock>
                <TextBlock x:Name="lblSepatator" Margin="5"><Run Text="/"/></TextBlock>
                <TextBlock x:Name="lblTotalLength" Margin="5"><Run Text="00:00"/></TextBlock>
                <Image Name="ImageFullScreen" Source="/images/fullscreen.png"  MouseLeftButtonDown="Image_MouseLeftButtonDown" MouseEnter="ImageFullScreen_MouseEnter" MouseLeave="ImageFullScreen_MouseLeave" DockPanel.Dock="Right" Height="25" Width="25"/>
            </StackPanel>
        </StackPanel>
    </StackPanel> 
</Grid>

这看起来像这样：

我想把'全屏'图标的方式放在右边这样（我在Paint中嘲笑了这个）：

我希望全屏图标停留在右侧，控件（播放，滑块等）始终位于中心位置。

我该怎么做？

Answer 1

在我的回答的第一个版本中，我建议您可以使用DockPanel，但后来我意识到您可能希望控件在MediaElement中居中而不受大小的影响关闭按钮Image。

您可以使用网格并将控件和关闭按钮放在同一单元格中但具有不同的对齐方式：

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>
  <MediaElement/>
  <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center">
      ... player controls ...
  </StackPanel>
  <Image Grid.Row="1" HorizontalAlignment="Right" Source="/images/fullscreen.png" Height="25" Width="25"/>
</Grid>

StackPanel居中，而Image在底部Grid行右对齐。