将 ToolbarTray 拉伸为其 Row 的宽度

Question

工具栏位于第一行。如何将工具栏拉伸到整行的宽度？

<Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

<ToolBarTray Background="Transparent">
        <!--Toolbar.xaml-->
        <ToolBar x:Name="mainToolbar" 
                 Style="{StaticResource mainToolBarStyle}"
                 ItemsSource="{Binding ToolbarItems}"
                 ItemTemplateSelector="{StaticResource toolBarItemTemplateSelector}"
                 DataContext="{Binding}">
        </ToolBar>
    </ToolBarTray>

Answer 1

我删除了 ToolbarTray 并设置了 Horizo​​ntalContentAlignment="Stretch"。

Answer 2

如果您要离开 ToolBarTray，您可以在 ToolBar.Width 属性上使用绑定，如下所示：

<ToolBarTray Background="Transparent">
    <!--Toolbar.xaml-->
    <ToolBar Width="{Binding ActualWidth,
                             RelativeSource={RelativeSource FindAncestor,
                                           AncestorType={x:Type ToolBarTray}}}">
      <Button>Hello</Button>
    </ToolBar>
</ToolBarTray>

Answer 3

您尝试过水平内容对齐吗？

<ToolBarTray Background="Transparent" Width="Auto">
    <!--Toolbar.xaml-->  
    <ToolBar x:Name="mainToolbar" HorizontalContentAlignment="Stretch"  
             Style="{StaticResource mainToolBarStyle}"  
             ItemsSource="{Binding ToolbarItems}"  
             ItemTemplateSelector="{StaticResource toolBarItemTemplateSelector}"  
             DataContext="{Binding}">  
    </ToolBar>  
</ToolBarTray>

Answer 4

我就是这样做的：

首先，我删除了工具栏托盘并保留了工具栏

<ToolBar>
                <Button x:Name="OpenTabsButton1" Click="OpenTabs_Click" Style="{StaticResource OpenTabs}">Open Tabs</Button>
                <Button x:Name="ShortcutsButton1" Click="OpenTabs_Click" Style="{StaticResource Shortcuts}">Shortcuts</Button>
                <Button x:Name="HelpButton1" Click="OpenTabs_Click" Style="{StaticResource Help}">Help</Button>
                <Button x:Name="ProfileButton1" Click="Profile_Click" Style="{StaticResource Profile}">Profile</Button>
                <Button Style="{DynamicResource CloseButton}"></Button>
            </ToolBar>

然后，我为工具栏创建了一个样式

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

使用父级的宽度，例如

    <Grid x:Name="GrdToolbar" Height="auto" Margin="0">
    <ToolBarTray Width="{Binding Path=ActualWidth, ElementName=GrdToolbar}" >
        <ToolBar ItemsSource="{Binding MenuItems}" HorizontalContentAlignment="Stretch">
            <ToolBar.ItemTemplate>
                <DataTemplate>
                    <Button ToolTip="{Binding Name}" Tag ="{Binding Name}"
                            Command="{Binding DataContext.ButtonCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}}"
                            CommandParameter="{Binding RelativeSource={RelativeSource Self}}">
                        <Button.Content>
                            <Image Width="32" Height="32" Source="{Binding Icon}"></Image>
                        </Button.Content>
                    </Button>
                </DataTemplate>
            </ToolBar.ItemTemplate>
        </ToolBar>
    </ToolBarTray>
</Grid>