question

ApptacularApps-8305 avatar image
0 Votes"
ApptacularApps-8305 asked danielescipioni commented

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

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

9890-current-result.png

Expected result

9991-expected-result.png


windows-uwp
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

What do you mean with wrap? Can you add a mockup image with the layout you want to realize?

0 Votes 0 ·

Images added. I want the width of the UserControl to fit its contents, not stretch to fill the whole screen width.

0 Votes 0 ·

1 Answer

danielescipioni avatar image
0 Votes"
danielescipioni answered danielescipioni commented

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://docs.microsoft.com/en-us/windows/uwp/design/layout/layouts-with-xaml you can find relevant documentation.

· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Interestingly, 1 thing I noticed is that if I use more than 1 user control in the same page, the width affects all items to make them all the same as the user control with the biggest width. Is there a way to prevent this from happening?

0 Votes 0 ·

Assuming that you have a Text dependency property on your MyUserControl so that you can assign different text to different instances, you can do like that.

<StackPanel>
    <test:MyUserControl Text="Short" HorizontalAlignment="Left"/>
    <test:MyUserControl Text="Long text" HorizontalAlignment="Left"/>
</StackPanel>
0 Votes 0 ·