橫向拉伸物品

Question

我正在尋找以水平方式顯示動態數量的按鈕，以便它們總是水平填充空間，無論有多少物品。

例如，當有兩個按鈕

__________________________________ 
| other controls     | 
|        | 
|________________________________| 
| Button 1 | Button 2 | Button 3 | 
---------------------------------- 

和按鈕2獲取隱藏（摺疊），這應該成爲

__________________________________ 
| other controls     | 
|        | 
|________________________________| 
| Button 1 | Button 3 | 
---------------------------------- 

這可能與WinRT中/ WP 8.1 XAML？

Answer 1

我會使用網格並將列寬設置爲零以隱藏它。由於所有其他列都有星號值，因此它們應該相應地延伸如果一切都失敗，您可以手動重新計算星形值，因爲您知道可見按鈕的數量。

樣品：

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="50" /> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="*" /> 
    </Grid.ColumnDefinitions> 

    <Button Grid.Column="0" Content="Foo" Margin="0,0,0,0" HorizontalAlignment="Stretch" /> 
    <Button Grid.Column="1" Content="Foo" Margin="0,0,0,0" HorizontalAlignment="Stretch" /> 
    <Button Grid.Column="2" Content="Foo" Margin="0,0,0,0" HorizontalAlignment="Stretch" /> 
</Grid> 

設置一列的ColumnDefinition到零並且該按鈕被隱藏，其它列相應的調整。

Answer 2

您可以始終從Panel派生出您自己的自定義佈局邏輯。以下是我想出了：

StretchPanel.cs

class StretchPanel : Panel 
{ 
    #region Properties 

    public bool EqualWidths 
    { 
     get { return (bool)GetValue(EqualWidthsProperty); } 
     set { SetValue(EqualWidthsProperty, value); } 
    } 

    public static readonly DependencyProperty EqualWidthsProperty = 
     DependencyProperty.Register("EqualWidths", typeof(bool), typeof(StretchPanel), new PropertyMetadata(false, onEqualWidthsChanged)); 

    #endregion 

    static void onEqualWidthsChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) 
    { 
     var panel = (StretchPanel)d; 
     panel.InvalidateMeasure(); 
     panel.InvalidateArrange(); 
    } 

    protected override Size MeasureOverride(Size availableSize) 
    { 
     var renderedChildren = Children.Where(c => c.Visibility == Visibility.Visible); 
     var count = renderedChildren.Count(); 

     Size childAvailableSize = availableSize; 
     if (EqualWidths) 
      childAvailableSize = new Size(availableSize.Width/count, availableSize.Height); 

     foreach (var child in renderedChildren) 
      child.Measure(childAvailableSize); 

     var totalHeight = renderedChildren.Max(c => c.DesiredSize.Height); 
     return new Size(availableSize.Width, totalHeight); 
    } 

    protected override Size ArrangeOverride(Size finalSize) 
    { 
     var renderedChildren = Children.Where(c => c.Visibility == Visibility.Visible); 
     var count = renderedChildren.Count(); 
     var equalWidth = finalSize.Width/count; 

     var totalWidth = renderedChildren.Sum(c => c.DesiredSize.Width); 
     var totalHeight = renderedChildren.Max(c => c.DesiredSize.Height); 

     var x = 0.0; 

     foreach (var child in renderedChildren) 
     { 
      var r = new Rect(); 
      r.X = x; 
      r.Y = 0; 
      r.Width = EqualWidths ? equalWidth : child.DesiredSize.Width/totalWidth * finalSize.Width; 
      r.Height = child.DesiredSize.Height; 

      child.Arrange(r); 

      x += r.Width; 
     } 

     return new Size(finalSize.Width, totalHeight); 
    } 
} 

您可以使用它像這樣：

<Page 
    x:Class="App19.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:App19" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 

    <Page.Resources> 
     <Style TargetType="Button"> 
      <Setter Property="HorizontalAlignment" Value="Stretch" /> 
      <Setter Property="MinWidth" Value="0" /> 
     </Style> 
     <Style TargetType="TextBlock"> 
      <Setter Property="FontSize" Value="16" /> 
      <Setter Property="Foreground" Value="Yellow" /> 
      <Setter Property="Margin" Value="0,10,0,0" /> 
     </Style> 
    </Page.Resources> 

    <StackPanel> 
     <TextBlock>Different widths</TextBlock> 
     <local:StretchPanel EqualWidths="False"> 
      <Button>a</Button> 
      <Button>big</Button> 
      <Button>purple</Button> 
      <Button>dishwasher</Button> 
     </local:StretchPanel> 

     <TextBlock>Equal widths</TextBlock> 
     <local:StretchPanel EqualWidths="True"> 
      <Button>a</Button> 
      <Button>big</Button> 
      <Button>purple</Button> 
      <Button>dishwasher</Button> 
     </local:StretchPanel> 

     <TextBlock>Different widths, one child hidden</TextBlock> 
     <local:StretchPanel EqualWidths="False"> 
      <Button>a</Button> 
      <Button>big</Button> 
      <Button Visibility="Collapsed">purple</Button> 
      <Button>dishwasher</Button> 
     </local:StretchPanel> 

     <TextBlock>Equal widths, one child hidden</TextBlock> 
     <local:StretchPanel EqualWidths="True"> 
      <Button>a</Button> 
      <Button>big</Button> 
      <Button Visibility="Collapsed">purple</Button> 
      <Button>dishwasher</Button> 
     </local:StretchPanel> 
    </StackPanel> 
</Page> 

而且截圖：