StackPanel WPF中的中心控件

Question

I have the following stackPanel in WPF that contians a MediaElement and controls:

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

All these controls are appearing to the very left of the stack.

How can I get them to be centered?

Answer 1

I hate StackPanels: they always seem to take way too much effort to position/align as you want. Personally I'd use a grid for getting the layout correct, and a StackPanel just for grouping the items together within that layout cell.

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

Answer 2

As you have given width to the main stackpanel hence the children aren't coming centered.

try this.

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