Question

是否可以使WPF工具栏中的元素的HorizontalAlignment为Right？

<ToolBar Height="38" VerticalAlignment="Top" Grid.Row="1">
    <Button HorizontalAlignment="Left" Width="50" VerticalAlignment="Stretch"/>
    <Button HorizontalAlignment="Left" Width="50" VerticalAlignment="Stretch"/>
    <ComboBox Width="120" HorizontalAlignment="Right"/>
</ToolBar>

我尝试将内部元素添加到网格中，并将ColumnDefinition分配给左/右。我也试过StackPanel。无论我尝试什么，我似乎都无法将ComboBox“锚定”在工具栏的右侧。

更新

<DockPanel LastChildFill="True">

不起作用，它不会像普通元素那样填充ToolBar元素。

Answer 1

进一步的调查显示，为了做到这一点，我需要在Grid内设置ToolBar的宽度，或者如Chris Nicol所说，在{{1}内设置DockPanel使用ToolBar动态调整到Toolbar宽度的那个。

但是，这不是一个干净的解决方案。让RelativeSource在调整大小时正确更新非常复杂。所以相反，我发现了一些看起来很糟糕且操作更清洁的黑客。

Toolbar

由于我的所有元素都在网格上，因此我可以将<ToolBar Height="38" VerticalAlignment="Top" Grid.Row="1"> <Button HorizontalAlignment="Left" Width="50" VerticalAlignment="Stretch"/> <Button HorizontalAlignment="Left" Width="50" VerticalAlignment="Stretch"/> </ToolBar> <ComboBox Margin="0,0,15,0" Width="120" HorizontalAlignment="Right" Grid.Row="1"/>放在ComboBox之上，方法是将ToolBar指定给与工具栏相同的行。设置我的Grid.Row以稍微拉出Margins以免干扰外观后，它会根据需要运行而不会出现错误。由于我发现这样做的唯一另一种方法是动态设置DockPanel / Grid的Width属性，实际上我觉得这是更清洁更有效的方法。

Answer 2

对于其他寻求解决方案的人来说，以下内容对我有用：

<ToolBar HorizontalAlignment="Stretch" ToolBarTray.IsLocked="True">
  <ToolBar.Resources>
    <Style TargetType="{x:Type DockPanel}">
      <Setter Property="HorizontalAlignment" Value="Right" />
    </Style>
</ToolBar.Resources>

我正在使用.NET 4.6和VS2015，但我相信这也适用于以前的版本。

Answer 3

您是否尝试使用填充工具栏的DockPanel，然后可以将ComboBox停靠在右侧。

请记住，使用dockpanel，您放置项目的顺序非常重要。

HTH

Answer 4

    <ToolBar Width="100" VerticalAlignment="Top" >
        <ToolBar.Resources>
            <Style TargetType="{x:Type ToolBarPanel}">
                <Setter Property="Orientation" Value="Vertical"/>
            </Style>
        </ToolBar.Resources>

        <DockPanel>
            <ToolBarPanel Orientation="Horizontal" >
                <Button>A</Button>
                <Button>B</Button>
            </ToolBarPanel>
            <Button DockPanel.Dock="Right" HorizontalAlignment="Right">C</Button>
        </DockPanel>
    </ToolBar>

Answer 5

我的解决方案是创建一个具有类似“弹簧”能力的标签控件，这样它就会填充工具栏上按钮之间的空虚空白，从而“右对齐”工具栏的组合框（或任何其他控件）需要“右对齐”。

为此，我创建了一个WidthConverter，它将采用ToolBar Control的实际宽度，然后减去右对齐组合框所需的空间。：

public class WidthConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return Math.Max(System.Convert.ToDouble(value) - System.Convert.ToDouble(parameter), 0.0);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

然后，我在工具栏中添加了一个标签控件，放置在需要右对齐的组合框的左侧。将标签的宽度绑定到工具栏的ActualWidth并应用WidthConverter：

<Label Width="{Binding Converter={StaticResource WidthConverter}, ElementName=toolBar1, Path=ActualWidth, ConverterParameter=50}" />

您需要根据具体需要调整ConverterParameter，直到获得所需的“右对齐”。较高的数字为组合框提供了更多的空间，而较低的数字提供了较少的空间。

使用此解决方案，只要您的工具栏调整大小，标签就会自动调整大小，使您看起来已对齐您的组合框。

与向工具栏添加网格相比，此解决方案有两大好处。首先，如果您需要使用工具栏上的按钮，您将不会丢失工具栏按钮样式。第二个是如果通过窗口大小调整减小工具栏长度，溢出将按预期工作。各个按钮将根据需要进入溢出。如果将按钮放入网格中，则网格将被放入溢出中，并带有所有按钮。

正在使用的XAML：

<ToolBarPanel>
    <ToolBar Name="toolBar1">
        <Button>
            <Image Source="save.png"/>
        </Button>
    <Label Width="{Binding Converter={StaticResource Converters.WidthConverter},
                  ElementName=toolBar1,
                  Path=ActualWidth,
                  ConverterParameter=231}" HorizontalAlignment="Stretch" ToolBar.OverflowMode="Never"/>
    <Button>
        <Image Source="open.png"/>
    </Button>
</ToolBar>

如果您希望始终保留工具栏上的最后一个按钮，请说出您始终希望显示的帮助按钮，请将属性 ToolBar.OverflowMode =“Never”添加到其元素中。

Answer 6

我就这样做了：

我为工具栏创建了一种样式

    <Style x:Key="{x:Type ToolBar}" TargetType="{x:Type ToolBar}">
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToolBar}">
                <Grid Background="{StaticResource ToolGridBackground}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Image Grid.Column="0" Style="{StaticResource LogoImage}"/>
                    <ToolBarPanel Grid.Column="2" x:Name="PART_ToolBarPanel" IsItemsHost="true" Margin="0,1,2,2" Orientation="Horizontal"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

重要的部分是：

<Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

并且

<ToolBarPanel Grid.Column="2"/>

这样，您的按钮将右对齐

Answer 7

我对“WidthConverter”解决方案不是很满意，因为我最后得到了一些动态元素。进一步搜索引导我here，这对我来说似乎很有用。以下是我感兴趣的代码示例：

<ToolBar Name="toolBar">
    <DockPanel Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type ToolBarPanel}}}">
        <DockPanel.Resources>
            <Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"></Style>
        </DockPanel.Resources>
        <Button x:Name="btnRefresh" ToolTip="Refresh" Click="btnRefresh_Click">
            <Image Margin="2 0" Source="/Resources/refresh.ico" Height="16" Width="16"/>
        </Button>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
            <Image Margin="2 0" Source="/Resources/Help.ico" Height="16" Width="16"/>
            <TextBlock Text="Help" Margin="2 0" VerticalAlignment="Center"/>
        </StackPanel>
    </DockPanel>
</ToolBar>

Answer 8

我意识到这是一个古老的话题，但在提出这个问题时它仍会弹出。这就是我处理这个问题的方法：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition x:Name="MenuRow"    Height="25"/>
        <RowDefinition x:Name="ToolbarRow" Height="25"/>
        <RowDefinition x:Name="CatalogRow" Height="*"/>
        <RowDefinition x:Name="RecipeRow"  Height="0.4*"/>
    </Grid.RowDefinitions>
    <ToolBar Grid.Row="1">
        <Button x:Name="tbFileOpen" Margin="0,0,0,0" Click="MenuItem_Click"><Image Source="Icons/Main/File/Load.png"/></Button>
        <Button x:Name="tbFileSave" Margin="0,0,0,0" Click="MenuItem_Click"><Image Source="Icons/Main/File/Save.png"/></Button>
        <Button x:Name="tbFileClear" Margin="0,0,0,0" Click="MenuItem_Click"><Image Source="Icons/Main/File/New document.png"/></Button>
    </ToolBar>
    <ToolBar Grid.Row="1" HorizontalAlignment="Right">
        <Button x:Name="tbFileExit" Margin="0,0,0,0" Click="MenuItem_Click"><Image Source="Icons/Main/File/Exit.png"/></Button>
    </ToolBar>
</Grid>

有效地：我创建了两个工具栏对象并将它们放在同一个Grid.row上。第一个具有默认（左）对齐，第二个具有右对齐。它似乎为我做了伎俩。

WPF工具栏项HorizontalAligment =“右”

8 个答案:

WPF工具栏项Horizo​​ntalAligment =“右”

8 个答案:

WPF工具栏项HorizontalAligment =“右”