C#•8mo ago

✅ Help with XAML

I have a problem while designing my UI, I'm creating a panel (the app has dynamic UI so that it can fit any resolution) for the sake of simplicity let's say I have a bunch of buttons (quite big in size) inside a wrap panel so that the content is adjusted when the app is resized, but the problem is if the app is resized and there is not enough space to hold a button on the same row of the wrap panel it leaves a blank space until there is enough room to fit that button, so my question is, is there any way I can somehow extend the buttons to fill out that gap and then return to their original width once there is enough room to hold one more button in the wrap panel?

7 Replies

leowest•8mo ago

normally a viewbox is used for that have u tried it? https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/how-to-apply-stretch-properties-to-the-contents-of-a-viewbox?view=netframeworkdesktop-4.8

How to: Apply Stretch Properties to the Contents of a Viewbox - WPF...

Learn how to apply stretch properties to the contents of a Viewbox via the included code examples in XAML, C#, and Visual Basic.

leowest•8mo ago

assuming this is for WPF since u did not specify

remi.nzOP•8mo ago

Yes, I was asking for WPF and thank you I'll try it asap when I'm home and let you know! Okay so the viewbox is expanding it's child contents but I can't seem to have the sequential positioning of the wrap panel, am I doing something wrong? This is what my layout looks like: ScollView -> StackPanel -> Bunch of Wrap Panels -> Buttons

<ScrollViewer Margin="0,30,0,0">
    <StackPanel>

<Viewbox> 
        <WrapPanel>

            <Button Style="{DynamicResource optBtn}" BorderThickness="0" Height="180" Width="308" Margin="18,20,0,0">
                <Grid>
                    <Image Source="res\img.png" Width="120"/>
                    <TextBlock Style="{DynamicResource welcome}" FontSize="25" Margin="0,120,0,0" Text="Button 1" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                </Grid>
            </Button>

            <Button Style="{DynamicResource optBtn}" BorderThickness="0" Height="180" Width="308" Margin="18,20,0,0">
                <Grid>
                    <Image Source="res\img1.png" Width="120"/>
                    <TextBlock Style="{DynamicResource welcome}" FontSize="25" Margin="0,120,0,0" Text="Button 2" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                </Grid>
            </Button>

<!-- More buttons here -->

        </WrapPanel>
</ViewBox>

<!-- More wrap panels down below -->

</StackPanel>
</ScrollViewer>

<ScrollViewer Margin="0,30,0,0">
    <StackPanel>

<Viewbox> 
        <WrapPanel>

            <Button Style="{DynamicResource optBtn}" BorderThickness="0" Height="180" Width="308" Margin="18,20,0,0">
                <Grid>
                    <Image Source="res\img.png" Width="120"/>
                    <TextBlock Style="{DynamicResource welcome}" FontSize="25" Margin="0,120,0,0" Text="Button 1" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                </Grid>
            </Button>

            <Button Style="{DynamicResource optBtn}" BorderThickness="0" Height="180" Width="308" Margin="18,20,0,0">
                <Grid>
                    <Image Source="res\img1.png" Width="120"/>
                    <TextBlock Style="{DynamicResource welcome}" FontSize="25" Margin="0,120,0,0" Text="Button 2" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                </Grid>
            </Button>

<!-- More buttons here -->

        </WrapPanel>
</ViewBox>

<!-- More wrap panels down below -->

</StackPanel>
</ScrollViewer>

I guess it's probably because I've placed the wrap panel inside the viewbox but then I can't have viewbox inside the wrap panel itself, I'm super confused at this point. I don't know if I'm able to make myself clear but to make it more clear what I'm trying to achieve, go to your YouTube home page, and then zoom in, look how it auto expands the thumbnails of each video to fill out the empty space, that is what I want but only with the button's width, as the app is resized I'd like the buttons to expand to the right to fill out the empty space which the wrap panel does not by itself.

devaness•8mo ago

If all of the buttons have the same size, instead of a wrap panel you could try a UniformGrid. This will stretch the elements across the width of the control. You can then change the number of columns of the grid when resizing depending on how many items currently fit in a row. Change the Width property on the buttons to MinWidth so they can expand.

<UniformGrid SizeChanged="UniformGrid_SizeChanged">
    <Button MinWidth="300"/>
    <Button MinWidth="300"/>
    <Button MinWidth="300"/>
    <Button MinWidth="300"/>
    <Button MinWidth="300"/>
</UniformGrid>

private void UniformGrid_SizeChanged(object sender, SizeChangedEventArgs e)
{
    UniformGrid ug = sender as UniformGrid;

    double minButtonSize = 320;
    int numberofButtonsPerRow = (int)(ug.ActualWidth / minButtonSize);
    ug.Columns = numberofButtonsPerRow;
}

<UniformGrid SizeChanged="UniformGrid_SizeChanged">
    <Button MinWidth="300"/>
    <Button MinWidth="300"/>
    <Button MinWidth="300"/>
    <Button MinWidth="300"/>
    <Button MinWidth="300"/>
</UniformGrid>

private void UniformGrid_SizeChanged(object sender, SizeChangedEventArgs e)
{
    UniformGrid ug = sender as UniformGrid;

    double minButtonSize = 320;
    int numberofButtonsPerRow = (int)(ug.ActualWidth / minButtonSize);
    ug.Columns = numberofButtonsPerRow;
}

leowest•8mo ago

can you perhaps post some images of what your app looks like without resizing and a bit more of the xaml used

remi.nzOP•7mo ago

That did the job, thank you so much ❤️ !close

Accord•7mo ago

Closed!

Gaming

Programming

✅ Help with XAML