2014-06-19 22 views
1

我在使用Ribbon控件的地方创建了一个接口,我遇到了这个问题。下面的屏幕截图解释了它。Align WPF RibbonTextBox问题

enter image description here

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个声望,所以无法直接发布图片。 感谢您的帮助。

+0

在这里发布x1 max的xaml标记 – Sivasubramanian

+0

@Sivasubramanian发布。我应该发布完整的XAML吗? –

+0

嗨尝试删除您的XAML中的标记SmallImageSource,并让我是否可以正确对齐? – Sivasubramanian

回答

2

这是一个有点哈克,但我发现,解决办法是忘记试图对准直接使用功能区元素对齐控制元件和内RibbonGroup

的第一个挑战是对齐使用网格中的元素网格本身并没有在功能区组中正确对齐,但我通过将网格的宽度绑定到功能区组的宽度来解决该问题,因此将在功能区组调整大小时调整网格的宽度。

第二个是对齐标签,因为标签是RibbonTextBox控件的一部分。解决方案是使用另一个控件来提供文本标签(LabelTextBlock),并将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看起来像

enter image description here

最大的限制是RibbonTextBox的形象会在标签和文本框之间错位。为了克服这个问题,你必须添加一个额外的列集,并把图标放在那里,而不是使用RibbonTextBox.SmallImageSource

+0

伟大的伙伴! –