对齐WPF RibbonTextBox问题

Question

我正在使用功能区控件创建一个界面，我遇到了这个问题。下面的截图解释了它。

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

我希望TextBoxes完全对齐，但无论我做了什么，都没有对齐。设置或取消选择 TextBoxWidth 属性也无济于事。有解决方案吗对不起，我有＆lt; 10声誉，因此无法直接发布图像。 谢谢你的帮助。

Answer 1

这有点hacky，但我找到的解决方案是忘记尝试使用Ribbon元素对齐控件直接对齐元素，并使用RibbonGroup

中的网格对齐元素

第一个挑战是网格本身在功能区组内没有正确对齐，但我通过将网格的宽度绑定到功能区组的宽度来解决这个问题，因此在功能区组调整大小时它将调整大小

第二个是对齐标签，因为标签是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