How to set width and height to wrap to content of UserControl

Question

Is there a way to wrap the width of a UserControl? The current XAML setup causes the UserControl to stretch to the screen width and this doesn't look great at all. Setting specific widths & heights with numberical values isn't ideal due to differing screen sizes.

<UserControl  
    x:Class="MyApp.UserControls.MyUserControl"  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    xmlns:local="using:MyApp.UserControls"  
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
    mc:Ignorable="d">  
  
    <Grid Background="BlueViolet">  
        <StackPanel Orientation="Horizontal">  
            <TextBlock Text="&#xE7BF;" FontFamily="Segoe MDL2 Assets"/>  
            <TextBlock Text="test" Style="{StaticResource TitleTextBlockStyle}"/>  
        </StackPanel>  
    </Grid>  
</UserControl>  

Current result

Expected result

Answer 1

You can simplify your user control

   <UserControl x:Class="TestAppUWP.AppShell.Samples.Test.MyUserControl"  
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
                xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
                xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
                mc:Ignorable="d"  
                d:DesignHeight="300"  
                d:DesignWidth="400">  
       <StackPanel Orientation="Horizontal" Background="BlueViolet">  
           <TextBlock Text="&#xE7BF;" FontFamily="Segoe MDL2 Assets"/>  
           <TextBlock Text="test" Style="{StaticResource TitleTextBlockStyle}"/>  
       </StackPanel>  
   </UserControl>  

And you have to set the layout in when you use it, this depends on the Panel that contains it (a Grid, a StackPanel), for example you can do this

   <Grid>  
       <test:MyUserControl HorizontalAlignment="Left" VerticalAlignment="Center"/>  
   </Grid>  

or you can do this

   <Grid>  
       <Grid.RowDefinitions>  
           <RowDefinition Height="Auto"/>  
       </Grid.RowDefinitions>  
       <Grid.ColumnDefinitions>  
           <ColumnDefinition Width="Auto"/>  
       </Grid.ColumnDefinitions>  
       <test:MyUserControl/>  
   </Grid>  

Here https://learn.microsoft.com/en-us/windows/uwp/design/layout/layouts-with-xaml you can find relevant documentation.