CODEWITHSUNDEEP
c#wpfxaml
nikotromus
nikotromus

Reputation: 1054

Arranging issue when adding dynamic elements

I am adding dynamic elements to the screen. When the elements fill up the container I am putting them in, I want a vertical scroll bar to appear so that the user can scroll through all of the elements added. The code is performing as expected.

The problem is that when the elements are added to the interface, they are added in a haphazard and weird way. They start in the middle of the grid element, and then shift up. I want them to be added to the top left of the control, then to the right, all the way down the page with equal spacing between the rows. Then when there are too many on the screen, have the scroll bar appear.

Here is all of the code that is running this test. Thanks in advance for any help!

xaml:

<Window x:Class="GPWorkouts.MainWindow"
        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"
        xmlns:local="clr-namespace:GPWorkouts"
        mc:Ignorable="d"
        Title="MainWindow" Height="370" Width="1000" >
    <Grid>
        <StackPanel Orientation="Horizontal">

            <StackPanel Width="500">
                <StackPanel Orientation="Horizontal">                    
                    <Button Name="buttonAddNewPlayer" Content="Add New Player" Margin="5" Click="buttonAddNewPlayer_Click" />
                </StackPanel>

                <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Hidden"  Height="300">
                    <UniformGrid Columns="2" Name="playerContainer" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.CanContentScroll="True"   >
                    </UniformGrid>
                </ScrollViewer>
            </StackPanel>

        </StackPanel>
    </Grid>
</Window>

c# code behind:

using log4net;
using System.Windows;
using System.Windows.Controls;

namespace GPWorkouts
{
    public partial class MainWindow : Window
    {
        private static readonly ILog Log = LogManager.GetLogger(System.Reflection.MethodBase.GetCurrentMethod().DeclaringType);
        int x = 1;

        public MainWindow()
        {
            InitializeComponent();           
        }

        private void buttonAddNewPlayer_Click(object sender, RoutedEventArgs e)
        {   
            Button buttonDyno = new Button()
            {
                Content = x,
                Width = 150,
                Height = 32,
                Margin = new Thickness(5),
            };

            x++;
            playerContainer.Children.Add(buttonDyno);
        }      
    }
}

Upvotes: 1

Views: 38

Answers (1)

ASh
ASh

Reputation: 35646

the observed effect can be explaned by UniformGrid arrange approach. Buttons start in the middle of the grid element, and then shift up, because UniformGrid has less and less space after each button added.

the effect can be smoothed if you add VerticalAlignment = VerticalAlignment.Top in Button properties.

but I would suggest to use a different panel : WrapPanel

<Grid>
    <StackPanel Orientation="Horizontal">
        <StackPanel Width="500">
            <StackPanel Orientation="Horizontal">
                <Button Name="buttonAddNewPlayer"
                        Margin="5"
                        Click="buttonAddNewPlayer_Click"
                        Content="Add New Player" />
            </StackPanel>
            <ScrollViewer Height="300"
                          HorizontalScrollBarVisibility="Disabled"
                          VerticalScrollBarVisibility="Auto">
                <WrapPanel Name="playerContainer" 
                           Background="Wheat"
                           Orientation="Horizontal" />
            </ScrollViewer>
        </StackPanel>
    </StackPanel>
</Grid>

private void buttonAddNewPlayer_Click(object sender, RoutedEventArgs e)
{
    Button buttonDyno = new Button
    {
        Content = x,
        Width = 150,
        Height = 32,
        Margin = new Thickness(5),
        VerticalAlignment = VerticalAlignment.Top,
        HorizontalAlignment = HorizontalAlignment.Center
    };

    x++;
    playerContainer.Children.Add(buttonDyno);
    // ensure 2 controls per row
    playerContainer.ItemWidth = playerContainer.ActualWidth/2;
}

Upvotes: 2

Related Questions