Элементы панели инструментов WPF HorizontalAligment = "Право" - PullRequest
12 голосов
/ 04 февраля 2010

Можно ли сделать так, чтобы элементы на панели инструментов WPF имели горизонтальное выравнивание вправо?

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

Я попытался добавить элементы внутри Grid и назначить ColumnDefinition s влево / вправо. Я также попробовал StackPanel. Независимо от того, что я пытаюсь, я не могу заставить ComboBox быть «закрепленным» на правой стороне панели инструментов.

UPDATE:

<DockPanel LastChildFill="True">

Не работает, он не будет заполнять элемент ToolBar, как обычный элемент.

Ответы [ 8 ]

15 голосов
/ 04 февраля 2010

Дальнейшие исследования показали, что для этого мне нужно установить ширину Grid в пределах ToolBar, или, как сказал Крис Николь, 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 слегка потянул ComboBox, чтобы не мешать взглядам, он работает по мере необходимости, без ошибок. Поскольку я нашел единственный другой способ сделать это - установить свойство ширины DockPanel / Grid динамически, я на самом деле чувствую, что это более чистый и эффективный способ сделать это.

3 голосов
/ 06 января 2016

Для тех, кто ищет решение, у меня работает следующее:

<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, но я считаю, что это будет работать и в предыдущих версиях.

2 голосов
/ 23 января 2014
    <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>

2 голосов
/ 04 февраля 2010

Вы пытались использовать панель DockPanel, которая заполняет панель инструментов, затем вы можете закрепить ComboBox вправо.

Помните, что с док-панелью последовательность, в которую вы помещаете предметы, очень важна.

НТН

1 голос
/ 24 февраля 2013

Вот как я это сделал:

Я создал стиль для панели инструментов

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

При этом ваши кнопки будут выровнены по правому краю

1 голос
/ 15 мая 2011

Мое решение для этого было создать элемент управления меткой с "пружинной" способностью, чтобы он заполнял пустое пространство между кнопками на панели инструментов, таким образом "выравнивая по правому краю" в выпадающем списке панели инструментов (или любом другом элементе управления).для этого нужно «выровнять по правому краю).

Для этого я создал WidthConverter, который будет принимать фактическую ширину элемента управления ToolBar, а затем вычитать пространство, необходимое для выравнивания по правому краю поля со списком .:

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" к его элементу.

0 голосов
/ 04 января 2016

Я понимаю, что это старая тема, но она все еще всплывает, когда задаешь вопрос. Вот как я решаю этот вопрос:

<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. Первый имеет выравнивание по умолчанию (слева), второй - по правому краю. Это, кажется, делает трюк для меня.

0 голосов
/ 25 мая 2012

Я не очень доволен решением "WidthConverter", потому что я получил некоторые динамические элементы в конце. Дальнейший поиск привел меня к здесь , что, кажется, работает идеально для меня. Вот мой пример кода на случай, если вы заинтересованы:

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...