Develop Reference

How to make a border around a stackpanel which stops at the last element inside it?

Currently I have a stackpanel with 2 buttons which I have placed in a single row whithin my grid. I want to draw a border around the stackpanel, but the stackpanel is filling the whole row, it doesnt stop at the last button (as expected I suppose):
Image of border around stackpanel
How can I modify this so the stackpanel or border stops at the last element without hardcoding or dynamically calculating a bottom margin?
<Border Background="#FF303841"
Margin="5"
CornerRadius="3"
Grid.Row="2"
Grid.Column="4">
<StackPanel>
<TextBlock Text="OTHER"
Foreground="White"
FontWeight="Medium"
FontFamily="Poppins"
FontSize="16"
HorizontalAlignment="Left"
Margin="5,5,0,0"/>
<Button Style="{StaticResource linkBtn}">TEST1</Button>
<Button Style="{StaticResource linkBtn}">TEST2</Button>
</StackPanel>
</Border>

As per emoacht's comment above, the solution was to simply add VerticalAlignment="Top" to the border. That made it stop filling the parent which was the grid row.
The cause of this behavior is that the default parameter for VerticalAlignment is stretch, so it needs to be overridden.

Why can I not use .AutoSize in a label

In my program, I have a TextBlock where my result text is shown. In a textbox I can just use TextWrapping="Wrap" and I can scroll down if it's still too much for the textbox. Now in my TextBlock that I talked about I wanted to have the same thing and used TextWrapping="Wrap" again. That works except for the scrolling thing. What can I do now to let it scroll like in the textbox?

Use following structure
<ScrollViewer HorizontalScrollBarVisibility="Auto" x:Name="scrView" VerticalScrollBarVisibility="Auto" Width="100" Height="100">
<TextBlock Width="{Binding Path=ActualWidth, ElementName=scrView}" TextWrapping="Wrap">your text</TextBlock>
</ScrollViewer>

UWP: Wrapping text at textbox doesn't work

I trying to wrap text at textBox but there are no success..
<Grid Margin="0,0,0,0" BorderThickness="1" BorderBrush="Gray">
<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Auto" >
<TextBox x:Name="Details" IsReadOnly="True" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Stretch" BorderThickness="0" Height="500" />
</ScrollViewer>
</Grid>
If I have long line without \n I have long string with horizontal scrollbar. But how I understand TextWrapping="Wrap" should cut this string.
I saw this answer but this is not suitable for me because I can have different width of this textBox.
Also I tried to use AcceptsReturn="True" with no success.
I glad to hear any ideas on how to make it works.

I'm not sure if this is what you are looking for, but i'm wondering why you don'disable horizontal Scrolling.
<ScrollViewer Grid.Column="2" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Disabled">
<TextBlock Text="TextusLongusTextusLongusTextusLongusTextusLongusTextusLongusTextusLongusTextusLongus" TextWrapping="Wrap" VerticalAlignment="Stretch"/>
</ScrollViewer>

You don't define any sort of width restriction. Which means that your TextBox can theoratically expand infinitely in width.
Try to either set its width in your XAML code or its maxwidth.
You can also forget about the ScrollViewer. It's already a part of the TextBox and you could just add the elements that you set in your ScrollViewer as an element of the TextBox.
Justt add it like ScrollViewer.VerticalScrollBarVisibility="Visible"

how to give height of a parent to child in UWP

I have a stack panel and it has one grid and I'd like the grid to have same height as stack panel.
I tried playing with VerticalAlignment stretch or height 100% nothing works
I tried setting the values programatically OnNavigatedTo but it doesn't have the effect
Any suggestions to resolve this are welcome
Please find the code below
<StackPanel Grid.Row="0" Grid.RowSpan="4" Background="#CFFF" Visibility="Visible" Orientation="Vertical" Name="ProgressOverlay">
<Grid Name="Overlaygrid"">
<StackPanel VerticalAlignment="Center" Grid.Row="0">
<ProgressBar
IsIndeterminate="True"
IsEnabled="True" Foreground="Black"/>
<TextBlock Visibility="Visible" Foreground="Black" FontSize="25” T HorizontalAlignment="Center" Text="Loading"/>
</StackPanel>
</Grid>
</StackPanel>

A StackPanel takes by default the size needed by its content and shrinks to the size required, while a container control like Grid stretches to the full size available (e.g full page).
If you want to keep the outer StackPanel, you will have to set VerticalAlignment="Stretch" on the StackPanel, not on the Grid.
But since the Grid is the only single content item in your outer StackPanel, you can remove it and move the properties Grid.RowSpan="4" Background="#CFFF" Visibility="Visible" to the Grid. Always try to keep your XAML structure as simple as possible.

Layout cycle detected error with two progressRings

I want to create a custom user control with two grids in which I want to load images and until images are loaded I want to show the progressRing control. The problem occurs when I add a second ProgressRing. My XAML looks like this:
<Grid Margin="0,0,0,21" Background="{ThemeResource PhoneAccentBrush}">
<Grid x:Name="leftImage" Margin="10" Width="190" Height="190"
HorizontalAlignment="Left">
<Image x:Name="imageHolderLeft" x:FieldModifier="public" Width="180"
Height="180" ImageFailed="imageHolderLeft_ImageFailed"
ImageOpened="imageHolderLeft_ImageOpened"/>
<Grid>
<ProgressRing x:Name="waitImageLeft" IsActive="True"
VerticalAlignment="Center" HorizontalAlignment="Center"
Background="Transparent"
Foreground="{ThemeResource AppBarBackgroundThemeBrush}"/>
</Grid>
</Grid>
<Grid x:Name="rightImage" Margin="10" Width="190" Height="190"
HorizontalAlignment="Right">
<Image x:Name="imageHolderRight" x:FieldModifier="public" Width="180"
Height="180" ImageOpened="imageHolderRight_ImageOpened"
ImageFailed="imageHolderRight_ImageFailed"/>
<Grid>
<ProgressRing x:Name="waitImageRight" IsActive="True"
VerticalAlignment="Center" HorizontalAlignment="Center"
Background="Transparent"
Foreground="{ThemeResource AppBarBackgroundThemeBrush}"/>
</Grid>
</Grid>
</Grid>
So when I comment out one ProgressRing it works fine, but when there are two of them my program crashes with the following error: Layout cycle detected. Layout could not complete
Does anyone knows why?
Thanks :)

This error indicates that the layout of an element depends on other elements that indirectly depend on the original element. Windows was not able to figure out the overall layout... Much like an infinite loop or infinite recursion.
In your case the cause probably relates to the alignments and sizes. You should be able to solve the problem by simplifying the layout. Keep the outer Grid but add 5 ColumnDefinitions, the middle one having width * and the other ones width Auto. Get rid of the other 4 Grids. Instead, put the two images and progress rings directly into the main Grid in columns number 0, 1, 3, and 4 (using the Grid.Column attached property). Put the desired sizes on the Width and Height properties of the images and progress rings, not on the Grid.