在WPF Dockpanel中画一条线

本文关键字:一条 WPF Dockpanel | 更新日期: 2023-09-27 18:04:21

如何在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>

在WPF Dockpanel中画一条线

你应该给它一个DockPanel或StackPanel的名字,并添加分隔符:

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

如果你只是简单地把你的"Separator"放到DockPanel中,而不是放在其中一个子元素中,它们将堆叠起来,并且"Separator"将具有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>

使用一个矩形并停靠在你想停靠的地方…并按您的要求填写。

的例子

控件周围的线条示例(如果你喜欢,它可以围绕你的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>

底部一行的示例:

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

分隔符是个好主意,或者你可以在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>