简单的 WPF“面板”问题

Question

关于 wpf 中控件布局的“简单”。有一个带有网格的自定义控件，该面板上有一个“面板”，三个元素之间有两个按钮和滑块。右键必须固定在“面板”的右侧，左键必须固定在“面板”的左侧，滑块必须填充按钮之间的所有可用空间。按钮和网格的宽度（和高度）将在之后的代码中设置。问题是 - 我必须使用什么样的“面板”以及如何使它与给定的任务一起操作？ （堆栈，停靠 - 即使使用这种“水平分层”也没有这样的功能） 在 WinForms - 没有问题滑块宽度 = widthOfGrid - (widtOfBothButtons) 这可以在wpf中做到吗？或者我必须在一些类似构造函数的函数中编写上面的代码？ （offtop-对我来说，这是 wpf 控制的典型任务，我很惊讶它的自动解决方案太少）

代码：

<UserControl x:Class="WpfApplication1.UserControl2"
             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="42" d:DesignWidth="291">
    <Grid x:Name="gridCtrl">
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="clnmLbl" Width="Auto"/>
            <ColumnDefinition x:Name="clnmPnl" />
        </Grid.ColumnDefinitions>

        <Label x:Name="lblText" Grid.Column="0" Content="" VerticalAlignment="Center">

        </Label>
        <DockPanel x:Name="pnlDock" Grid.Column="1">
            <Button x:Name="btnLeft"  HorizontalAlignment="Left" DockPanel.Dock="Left">
            </Button>
        <Border  x:Name="BorderOfSlider"  BorderBrush="#FF000000" BorderThickness="3,3,3,3" CornerRadius="8,8,8,8" >
                <Slider x:Name="sldSlider" HorizontalAlignment="Stretch" VerticalAlignment="Center" >
            </Slider>
            </Border>
        <Button x:Name="btnRight"  HorizontalAlignment="Right" DockPanel.Dock="Right">
            </Button>
        </DockPanel>


    </Grid>
</UserControl>

Answer 1

这听起来就像DockPanel 所做的那样......它将控件停靠在面板的两侧，默认情况下，最后添加的控件将拉伸并填充所有剩余空间

<DockPanel>
    <Button DockPanel.Dock="Left" Content="Left Button" />
    <Button DockPanel.Dock="Right" Content="Right Button" />
    <Slider />
</DockPanel>

另外，如果您是 WPF 的新手，我建议您查看 this site 以快速查看 WPF 的布局控件。

编辑

确保填充所有剩余空间的控件是添加到 DockPanel 的最后一个项。如果不是，它将使用默认值DockPanel.Dock="Left"

Answer 2

有几种方法可以做到：

1) DockPanel。左键将占据 DockPanel 左侧的某个位置，右键将在剩余空间的右侧占据所需空间。其余的将用于显示 Slider。

<DockPanel>
    <Button DockPanel.Dock="Left">Left button</Button>
    <Button DockPanel.Dock="Right">Right button</Button>
    <Slider />
</DockPanel>

2) 网格。创建具有 3 列的网格。左列和右列将只占用所需的空间，其余的将留给中心列。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Button Grid.Column="0">Left button</Button>
    <Slider Grid.Column="1" />
    <Button Grid.Column="2">Right button</Button>
</Grid>