UWP：如何根據網格寬度重排控件

Question

我有兩個水平放置的按鈕。 它們位於網格內。 這個包含兩個按鈕的網格寬度為 370。當按鈕上的文本變大時，它需要超過 370 的寬度。所以我想要做的是，而不是水平放置，我想在文本開始時動態垂直放置它們種植。 基本上，我希望根據網格的寬度（而不是基於主窗口的寬度）在此網格內為這兩個按鈕自動重排行為。 所以我希望它們適合 370 寬度，如果它們不能，我希望它們垂直放置。 我怎樣才能做到這一點？

我探索了 GridView 但它會在 GridView 附帶的框內顯示按鈕，所以我不想要 GridView 附帶的額外 UI，除非我們可以選擇隱藏它？

我檢查了 AdaptiveTrigger 但那是基於 window 的寬度而不是控件的寬度（在這種情況下是網格）

<Grid
    Grid.Row="2"
    Margin="0,36,0,28"
    Width="370"
    HorizontalAlignment="Left"
    VerticalAlignment="Bottom">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid
        Grid.Column="0"
        CornerRadius="3">
        <Button
            MinWidth="118"
            MinHeight="30"
            HorizontalAlignment="Left"
            HorizontalContentAlignment="Center"
            VerticalContentAlignment="Center"
            AutomationProperties.Name="{x:Bind ViewModel.PrimaryActionAutomationName, Mode=OneWay}"
            BorderThickness="1"
            Click="{x:Bind ViewModel.InvokePrimaryAction}"
            Content="{x:Bind ViewModel.PrimaryAction, Mode=OneWay}"
            CornerRadius="3"
            Style="{StaticResource AccentButtonStyle}" />
    </Grid>
    <Grid
        Grid.Column="1"
        CornerRadius="3"
        Margin="32,0,0,0">
        <HyperlinkButton
            AutomationProperties.Name="{x:Bind ViewModel.SecondaryLinkAutomationName, Mode=OneWay}"
            AutomationProperties.AutomationId="{Binding AutomationId, ConverterParameter=HyperlinkButton, Converter={StaticResource AutomationIdConverter}}"
            Content="{x:Bind ViewModel.SecondaryText, Mode=OneWay}"
            FontSize="14"
            Margin="0,0,0,0"
            Style="{StaticResource HyperlinkButtonStyle}"
            NavigateUri="{x:Bind ViewModel.SecondaryLink, Mode=OneWay}" />
    </Grid>
</Grid>

Answer 1

對於您的場景，我建議您根據StateTriggerBase Class 自定義一個StateTrigger來監控 Grid 的寬度並根據寬度應用視覺狀態。

我制作了一個簡單的示例，您可以參考。

控件大小觸發器：

 public class ControlSizeTrigger : StateTriggerBase
{
    //private variables
    private double _minHeight, _minWidth = -1;
    private FrameworkElement _targetElement;
    private double _currentHeight, _currentWidth;
    //public properties to set from XAML
    public double MinHeight
    {
        get
        {
            return _minHeight;
        }
        set
        {
            _minHeight = value;
        }
    }
    public double MinWidth
    {
        get
        {
            return _minWidth;
        }
        set
        {
            _minWidth = value;
        }
    }
    public FrameworkElement TargetElement
    {
        get
        {
            return _targetElement;
        }
        set
        {
            if (_targetElement != null)
            {
                _targetElement.SizeChanged -= _targetElement_SizeChanged;
            }
            _targetElement = value;
            _targetElement.SizeChanged += _targetElement_SizeChanged;
        }
    }
    //Handle event to get current values
    private void _targetElement_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        _currentHeight = e.NewSize.Height;
        _currentWidth = e.NewSize.Width;
        UpdateTrigger();
    }
    //Logic to evaluate and apply trigger value
    private void UpdateTrigger()
    {
        //if target is set and either minHeight or minWidth is set, proceed
        if (_targetElement != null && (_minWidth > 0 || _minHeight > 0))
        {
            //if both minHeight and minWidth are set, then both conditions must be satisfied
            if (_minHeight > 0 && _minWidth > 0)
            {
                SetActive((_currentHeight >= _minHeight) && (_currentWidth >= _minWidth));
            }
            //if only one of them is set, then only that condition needs to be satisfied
            else if (_minHeight > 0)
            {
                SetActive(_currentHeight >= _minHeight);

            }
            else
            {
                SetActive(_currentWidth >= _minWidth);
                bool bbb = _currentWidth >= _minWidth;
                Debug.WriteLine("Widthtrigger :" + bbb);
            }
        }
        else
        {
            SetActive(false);
        }
    }

}

主頁.xaml：

 <Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="ControlSizeStates">
            <VisualState x:Name="SizeChange">
                <VisualState.StateTriggers>
                    <local:ControlSizeTrigger MinWidth="800" TargetElement="{x:Bind Path=MyStackPanel}" />
                    <!--<AdaptiveTrigger MinWindowHeight="500" />-->
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MyStackPanel.Background" Value="Red" />
                    <Setter Target="MyStackPanel.Orientation" Value="Horizontal" />
                    <Setter Target="MyButton.Foreground" Value="Black" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    
    <StackPanel x:Name="MyStackPanel" Width="100" Height="200" Background="AliceBlue" Orientation="Vertical">
        
       
        <Button x:Name="MyButton" Foreground="Red" Content="Click" Click="Button_Click"/>
        <Button x:Name="MyButton2" Foreground="Red" Content="Click" />
    </StackPanel>
   
</Grid>

主頁.cs：

  public MainPage()
    {
        this.InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        MyStackPanel.Width = 1100;
    }