2010-02-04 154 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,但我相信,這將在以前的版本中工作了。