如何使工具欄按鈕共享相同的寬度？

Toolbar add/edit/remove

代碼：

<ToolBarTray> 
    <ToolBar> 
     <Button> 
      <StackPanel> 
       <Image/> 
       <Label/> 
      </StackPanel> 
     </Button> 
     <Button> 
      <StackPanel> 
       <Image/> 
       <Label/> 
      </StackPanel> 
     </Button> 
     <Button> 
      <StackPanel> 
       <Image/> 
       <Label/> 
      </StackPanel> 
     </Button> 
    </ToolBar> 
</ToolBarTray>

在圖片我只設置Source和標籤我只設置Content。

但是，如圖所示，按鈕沒有共享相同的寬度。「刪除」按鈕比其他人寬。

我該如何使所有工具欄按鈕與「刪除」按鈕共享相同的寬度？

來源

2015-02-10 BrunoLM

如果您願意，您可以手動設置「寬度」屬性或「MinWidth」屬性。默認情況下，它們被設置爲內容的自動大小，這就是爲什麼您的「遠程」按鈕比其他兩個大。 – 2015-02-10 00:19:03

我在下面的答案中添加了'Stretch'屬性，可以像答案中所示的'Width'那樣設置。 :) – 2015-02-10 01:02:59

的一種方式，是在你的ToolBar.Resources使用Setter，像這樣：

<ToolBar> 
    <ToolBar.Resources> 
    <Style x:Key="{x:Static ToolBar.ButtonStyleKey}" TargetType="Button"> 
     <Setter Property="Width" Value="80"/> 
    </Style> 
    </ToolBar.Resources> 
    <Button> 
    ... 
    <Button> 
    ... 
</ToolBar>

這樣，你不需要分別手動設置每個Button的寬度。

你也可以使用一個Setter設置Stretch屬性，像這樣：

 <Setter Property="Stretch" Value="None"/>

編輯：

顯然，根據https://stackoverflow.com/a/2406213/3101082，你需要確保你正在設置Style使用x:Key="{x:Static ToolBar.ButtonStyleKey}"爲了它適用於ToolBar按鈕。我已經更新了我的答案以反映這一點。

來源

2015-02-10 00:27:30

這比我自己的建議要好得多。接得好。 – 2015-02-10 00:31:19

此外，'寬度'可能會有所不同。我只是以80爲例，但根據按鈕的內容，您可能需要使用更大的值。 – 2015-02-10 00:34:27

這可能會起作用，我沒有測試過，但通過指定按鈕的寬度和圖像縮放比例，您應該發現它確實有效。你可以設置你所有的在同一時間按鈕的Width

<Button Width="intValue"> 
    <StackPanel> 
     <Image Source="yourImage" 
       RenderOptions.BitmapScalingMode="Fant" /> 
     <Label/> 
    </StackPanel> 
</Button>

來源

2015-02-10 00:19:02

幾乎，只是而不是使用RenderOptions，你實際上必須將'Stretch'設置爲'None' :) – BrunoLM 2015-02-10 00:34:54

如何使工具欄按鈕共享相同的寬度？

回答

相關問題