2014-06-19 35 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

偉大的夥伴! –