Question

如何在dockpanel内画一条线？在这里

<DockPanel DockPanel.Dock="Bottom"
           VerticalAlignment="Center">
    <StackPanel DockPanel.Dock="Left"
                VerticalAlignment="Center"
                Orientation="Horizontal">
        <Grid>
            <!-- Play button. -->
            <Button Name="btnPlay"
                    Click="btnPlay_Click"
                    Style="{StaticResource ResourceKey=PlayButton}"></Button>
            <!-- Pause button. -->
            <Button Name="btnPause"
                    Click="btnPause_Click"
                    Style="{StaticResource ResourceKey=PauseButton}"></Button>
        </Grid> How to draw a Red color line here with height eqals to content of dockpanel ?
    </StackPanel>
</DockPanel>

Answer 1

您应在其中指定DockPanel或StackPanel的名称并添加分隔符：

<Separator Width="{Binding ElementName=NameOfDockPanel, Path=ActualWidth}" 
           Background="Black" />

Answer 2

分隔符是个好主意，或者你可以在dockpanel中绘制一个简单的矩形：

<DockPanel DockPanel.Dock="Bottom"
           VerticalAlignment="Center">
    <StackPanel  DockPanel.Dock="Left"
                 VerticalAlignment="Center"
                 Orientation="Horizontal">
        <Grid>
            <!-- Play button. -->
            <Button Name="btnPlay"
                    Click="btnPlay_Click"
                    Style="{StaticResource ResourceKey=PlayButton}"></Button>
            <!-- Pause button. -->
            <Button Name="btnPause"
                    Click="btnPause_Click"
                    Style="{StaticResource ResourceKey=PauseButton}"></Button>
        </Grid>
        <Rectangle Width="5"
                   Fill="Red"
                   Margin="0" />
    </StackPanel>
</DockPanel>

Answer 3

如果您只是将“分隔符”放入DockPanel而不是其中一个子项目中，它们将堆叠，“分隔符”将具有DockPanel的完整高度。

 <DockPanel>

    <StackPanel DockPanel.Dock="Left">
        <TextBlock Text="Some other controls"/>
    </StackPanel>
    <Border Width="5"
            Background="Red"
            DockPanel.Dock="Left" />
    <StackPanel  DockPanel.Dock="Left"
                 VerticalAlignment="Center"
                 Orientation="Horizontal">
        <TextBlock Text="Buttons and controls"/>

    </StackPanel>

</DockPanel>

Answer 4

使用矩形并将其停靠在您想要的位置......并根据您的要求填写它。

示例

Answer 5

底部一行的示例：

<DockPanel Name="MyDockPanel"
           DockPanel.Dock="Bottom"
           VerticalAlignment="Center">
    <StackPanel  DockPanel.Dock="Left"
                 VerticalAlignment="Center"
                 Orientation="Horizontal">
        <Grid>
            <Button Name="btnPlay"
                    Click="btnPlay_Click"></Button>
            <Button Name="btnPause"
                    Click="btnPause_Click"></Button>
        </Grid>
    </StackPanel>
    <Line Stroke="Red"
          VerticalAlignment="Bottom"
          X1="0"
          X2="{Binding ActualWidth, ElementName=MyDockPanel}"
          StrokeThickness="3"></Line>
</DockPanel>

Answer 6

控件周围的一行示例（如果您愿意，可以在您的dockPanel周围，只需将边框设置得更高）：

<DockPanel Name="MyDockPanel"
           DockPanel.Dock="Bottom"
           VerticalAlignment="Center">
    <Border  BorderBrush="Blue"
             BorderThickness="3">
        <!-- line around control -->
        <StackPanel  DockPanel.Dock="Left"
                     VerticalAlignment="Center"
                     Orientation="Horizontal">
            <Grid>
                <Button Name="btnPlay"
                        Click="btnPlay_Click"></Button>
                <Button Name="btnPause"
                        Click="btnPause_Click"></Button>
            </Grid>
        </StackPanel>
    </Border>
</DockPanel>

在WPF Dockpanel中画一条线

6 个答案: