UWP: how to reflow controls based on grid width

Question

I have two buttons placed horizontally. They are inside a grid. This grid containing two buttons has width 370. When the text on the button becomes large, it needs width more than 370. So what I want to do is, instead of placing then horizontally, I want to place them vertically dynamically when text will start cropping. Basically, I want auto-reflow behavior inside this grid for these two buttons based on width of the grid (not based on width of main window). So I want them to fit in 370 width and if they cannot, I want them to place themselves vertically. How can I achieve this?

I explored GridView but it will show buttons inside the box that comes with GridView so I do not want extra UI that comes with GridView unless we have an option to hide it?

I checked AdaptiveTrigger but that is based on width of window not of the control (grid in this case)

<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

For your scenario, I'd suggest you custom a StateTrigger based on the StateTriggerBase Class to monitor the width of the Grid and apply visual states based on the width.

I've made a simple sample that you could refer to.

ControlSizeTrigger:

 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);
        }
    }

}

MainPage.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>

MainPage.cs:

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

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