2010-02-04 153 views
11

是否有可能使WPF工具栏中的元素具有Horizo​​ntalAlignment of Right?WPF工具栏项目Horizo​​ntalAligment =“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 s到左/右为好。我也尝试过StackPanel。无论我尝试什么,我都无法将ComboBox“锚定”在工具栏的右侧。

UPDATE:

<DockPanel LastChildFill="True"> 

不行的,它不会填补了工具栏元素就像一个通常的元素。

回答

15

进一步的调查表明,为了做到这一点,我需要设置ToolBarGrid的宽度,或作为克里斯尼科尔说,在ToolBarDockPanel动态到的宽度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"/> 

由于我所有的元素都在一个网格,我可以通过指定它的Grid.Row同一行的工具栏放在我的ToolBar的顶部ComboBox。在设置我的Margins以稍微拉动ComboBox以免干扰外观之后,它会根据需要进行操作而不会出现任何错误。因为我发现这样做的唯一方法是动态地设置DockPanel/Grid的Width属性,实际上我觉得这是更清洁更有效的方法。

+1

其实我觉得这是一个非常棒的(非常整洁的)解决方案。这个问题长期以来一直困扰着我。谢谢! – pongba 2010-07-22 07:42:56

+0

这真是一个绝妙的主意。谢谢! – newman 2012-11-11 04:06:49

+1

漂亮,漂亮,很不错。 – SmartK8 2014-08-04 14:33:33

2

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

请记住,使用dockpanel时,放置物品的顺序非常重要。

HTH

+0

你会如何用DockPanel填充工具栏?我尝试过,只能动态地执行它..除非有什么我不知道的,这是ToolBar的问题。这就是为什么这不适合我。 – jsmith 2010-02-04 21:54:15

+0

目前只是工作繁忙,本周末我会发布一个解决方案,应该感觉有点干净。 – 2010-02-05 18:10:56

1

我对此的解决方案是创建一个具有“弹簧”类似能力的标签控件,以便它可以填充工具栏上按钮之间的空白空白,从而“右对齐”工具栏的组合框(或任何其他需要控制“右对齐)。

要做到这一点,我创建了一个WidthConverter,这将需要工具栏控件的实际宽度,然后减去需要需要的空间右对齐的组合框:

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> 

如果你希望一直保持在工具栏上的最后一个按钮,说一个帮助按钮,你总是希望看到,添加属性工具栏。 OverflowMode =“从不”到它的元素。

+0

您的解决方案似乎更干净。但是,我无法为我工作。你能提供一个完整的工具栏样例,左边一个按钮,右边另一个按钮? – newman 2011-06-08 12:46:59

+0

更新了包含示例的答案。第一个按钮将左对齐,第二个按钮将右对齐。您将需要调整转换器参数以获得所需的结果。 – PocketDews 2011-06-15 05:11:29

0

我对“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> 
+0

啊,这个方法在窗口大小调整时不能很好地工作。 – newman 2012-11-03 19:27:05

+0

这不起作用,因为如果缩小窗口,所有工具栏按钮都会消失。否则,它是完美的。所以,如果对此方法进行小幅调整以使其发挥作用,那将会很不错。 – newman 2013-05-07 01:58:26

+0

好吧,我发现在http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/dd25fe90-4e39-4cba-bf91-5ca5ab662505另一篇文章中(从dhbusch2),它真的作品非常适合我,只是我有一个样式应用于按钮般的风格=“{StaticResource的{X:静态ToolBar.ButtonStyleKey}}” – newman 2013-05-07 02:22:54

1

这是我做的:

我创建了一个样式工具栏

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

and

<ToolBarPanel Grid.Column="2"/> 

有了这个,你的按钮将右对齐

+0

这工作,但它是不好的,因为我们完全替代工具栏的模板,从而失去默认样式。 – diimdeep 2013-06-17 10:58:51

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

0

我意识到这是一个老话题,但提出的问题时,它仍然弹出。这是我如何处理这个问题:

<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。第一个是默认(左)对齐,第二个是右对齐。它似乎为我做了诡计。

3

为别人寻找一个解决方案,以下为我工作:

<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,但我相信,这将在以前的版本中工作了。