Question

我在WPF中有以下stackPanel，它包含一个MediaElement并控制：

    <Grid Margin="0,0,0,0">
    <StackPanel Background="Black" Margin="0,0,0,0" Height="300" VerticalAlignment="Bottom">
        <MediaElement Name="MediaElement" MediaOpened="Element_MediaOpened"  Height="270" LoadedBehavior="Manual" UnloadedBehavior="Stop"/>
        <StackPanel Background="DarkGray"  HorizontalAlignment="Center" Width="464" Orientation="Horizontal">
            <!-- Play button. -->
            <Image Source="/Images/control_play.png" MouseDown="OnMouseDownPlayMedia" Margin="5" />
            <!-- Pause button. -->
            <Image Source="/images/control_pause.png" MouseDown="OnMouseDownPauseMedia" Margin="5" />
            <Image Source="/images/control_stop.png" MouseDown="OnMouseDownStopMedia" Margin="5" />
            <!-- Stop button. -->
            <TextBlock Foreground="White" Margin="5"  VerticalAlignment="Center"><Run Text="Seek To"/></TextBlock>
            <!-- Seek to slider. Ths slider allows you to jump to different parts of the media playback. -->
            <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" RenderTransformOrigin="3.607,0.455"><Run Text="00:00"/></TextBlock>
            <!-- Play button. -->
            <!-- Pause button. -->
        </StackPanel>
    </StackPanel>
</Grid>

所有这些控件都出现在堆栈的最左侧。

如何让它们居中？

Answer 1

因为你给主堆栈面板提供了宽度，所以孩子们不会集中在那里。

试试这个。

<StackPanel Background="DarkGray"  HorizontalAlignment="Center" Width="464" Orientation="Horizontal">
    <stackpanel HorizontalAlignment="Center">
        <!-- Play button. -->
        <Image Source="/Images/control_play.png" MouseDown="OnMouseDownPlayMedia" Margin="5" />
        <!-- Pause button. -->
        <Image Source="/images/control_pause.png" MouseDown="OnMouseDownPauseMedia" Margin="5" />
        <Image Source="/images/control_stop.png" MouseDown="OnMouseDownStopMedia" Margin="5" />
        <!-- Stop button. -->
        <TextBlock Foreground="White" Margin="5"  VerticalAlignment="Center"><Run Text="Seek To"/></TextBlock>
        <!-- Seek to slider. Ths slider allows you to jump to different parts of the media playback. -->
        <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" RenderTransformOrigin="3.607,0.455"><Run Text="00:00"/></TextBlock>
        <!-- Play button. -->
        <!-- Pause button. -->
    </StackPanel>
</StackPanel>

Answer 2

我讨厌StackPanels：他们似乎总是花费太多精力来定位/对齐你想要的东西。我个人使用网格来确保布局正确，而StackPanel只是用于将项目分组到布局单元格中。

<Grid Margin="0,0,0,0">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition = "*"/>
             <!-- this column will be centre aligned -->
            <ColumnDefinition = "Auto"/>
            <ColumnDefinition = "*"/>
        </Grid.ColumnDefinitions>

        <MediaElement Name="MediaElement" Grid.Column="0" MediaOpened="Element_MediaOpened"  Height="270" LoadedBehavior="Manual" UnloadedBehavior="Stop"/>
        <StackPanel Background="DarkGray" Grid.Column="1" Width="464" Orientation="Horizontal">
            <!-- Play button. -->
            <Image Source="/Images/control_play.png" MouseDown="OnMouseDownPlayMedia" Margin="5" />
            <!-- Pause button. -->
            <Image Source="/images/control_pause.png" MouseDown="OnMouseDownPauseMedia" Margin="5" />
            <Image Source="/images/control_stop.png" MouseDown="OnMouseDownStopMedia" Margin="5" />
            <!-- Stop button. -->
            <TextBlock Foreground="White" Margin="5"  VerticalAlignment="Center"><Run Text="Seek To"/></TextBlock>
            <!-- Seek to slider. Ths slider allows you to jump to different parts of the media playback. -->
            <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" RenderTransformOrigin="3.607,0.455"><Run Text="00:00"/></TextBlock>
            <!-- Play button. -->
            <!-- Pause button. -->
        </StackPanel>
    </Grid>
</Grid>

StackPanel WPF中的中心控件

2 个答案: