Блог

Главная - Вопросы по программированию - Проблемы с выравниванием WPF RibbonTextBox

Проблемы с выравниванием WPF RibbonTextBox

#wpf #ribbon

#wpf #лента

Вопрос:

Я создавал интерфейс при использовании элемента управления Ribbon, где столкнулся с этой проблемой. Это объясняется на скриншотах ниже.

введите описание изображения здесь

Разметка XAML как таковая.

 <ribbon:RibbonGroup x:Name="PSO2" Header="Data Entry Section">
    <ribbon:RibbonTextBox Label="x1_min" SmallImageSource="Images/Document.png"  TextBoxWidth="50"/>
    <ribbon:RibbonTextBox Label="x1_max" SmallImageSource="Images/Document.png"  TextBoxWidth="50"/>
    <ribbon:RibbonTextBox Label="x2_min" SmallImageSource="Images/Document.png"  TextBoxWidth="50"/>
    <ribbon:RibbonTextBox Label="x2_max" SmallImageSource="Images/Document.png"  TextBoxWidth="50"/>
    <ribbon:RibbonTextBox Label="Iterations" SmallImageSource="Images/Document.png"  TextBoxWidth="50"/>

Я хотел, чтобы текстовые поля были точно выровнены, однако независимо от того, что я делал, они не выравнивались. Установка или отключение свойства TextBoxWidth также не помогло. Какие-либо решения? Извините, у меня репутация <10, поэтому я не смог опубликовать изображение напрямую.
Спасибо за любую помощь.

Комментарии:

1. разместите разметку xaml для x1 max здесь

2. Написал @Sivasubramanian. Должен ли я опубликовать полный XAML?

3. Привет, попробуйте удалить тег SmallImageSource в вашем XAML и сообщите мне, можете ли вы правильно его выровнять??

4. Также почему выравнивание / поле элемента управления не задано??

5. @Sivasubramanian проблема сохраняется: (Это выглядит еще хуже! Настройка выравнивания / поля не устраняет проблему.

Ответ №1:

Это немного халтурно, но решение, которое я нашел, состоит в том, чтобы забыть о попытке выровнять элементы непосредственно с помощью элементов управления выравниванием элементов ленты и выровнять элементы с помощью сетки внутри RibbonGroup

Первая проблема заключается в том, что сама сетка не выравнивается должным образом внутри группы лент, но я решил эту проблему, привязав ширину сетки к ширине группы лент, поэтому ее размер будет изменяться по мере изменения размера группы лент.

2-й — выравнивание меток, поскольку метка является частью элемента RibbonTextBox управления. Решение состоит в том, чтобы использовать другой элемент управления для предоставления текстовой метки ( Label или TextBlock ) и просто оставить RibbonTextBox.Label пустым.

 <RibbonGroup x:Name="PSO2" Header="Data Entry Section" Width="270">
    <Grid Width="{Binding ElementName=PSO2, Path=ActualWidth}" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <TextBlock Text="x1_min" Grid.Column="0" Grid.Row="0" />
        <RibbonTextBox Label="" SmallImageSource="Images/Document.png"  TextBoxWidth="50" Grid.Column="1" Grid.Row="0"/>
        <TextBlock Text="x1_max" Grid.Column="0" Grid.Row="1" />
        <RibbonTextBox Label="" SmallImageSource="Images/Document.png"  TextBoxWidth="50" Grid.Column="1" Grid.Row="1"/>
        <TextBlock Text="x2_min" Grid.Column="0" Grid.Row="2" />
        <RibbonTextBox Label="" SmallImageSource="Images/Document.png"  TextBoxWidth="50" Grid.Column="1" Grid.Row="2"/>

        <TextBlock Text="x2_max" Grid.Column="2" Grid.Row="0" />
        <RibbonTextBox Label="" SmallImageSource="Images/Document.png"  TextBoxWidth="50" Grid.Column="3" Grid.Row="0"/>
        <TextBlock Text="Iterations" Grid.Column="2" Grid.Row="1" />
        <RibbonTextBox Label="" SmallImageSource="Images/Document.png"  TextBoxWidth="50" Grid.Column="3" Grid.Row="1"/>
    </Grid>
</RibbonGroup>

И, используя это, вы получаете RibbonGroup, который выглядит как

введите описание изображения здесь

Самым большим ограничением является то, что изображение RibbonTextBox будет неуместно между меткой и текстовым полем. Чтобы преодолеть это, вам нужно будет добавить дополнительный набор столбцов и поместить туда значок вместо использования RibbonTextBox.SmallImageSource

Метки: