We Keep Coding

UWP C# Add Button Dynamically and Organizing On StackPanel

I understand there are a few post asking about adding buttons dynamically but I could not find out how to organize them on the stackpanel.
I have no issue adding new buttons but is there any way to organize them in column and row?
<Grid Margin="400,0,0,0">
<StackPanel x:Name="stackpanel">
<Button x:Name="Button" Height="30" Width="100" Content="Button" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="20,20,0,0" Click="Button_Click"/>
</StackPanel>
</Grid>
private void Button_Click(object sender, RoutedEventArgs e)
{
Button b = new Button(); ;
stackpanel.Children.Add(b);
b.Content = "Button";
}
Please help.
Thanks.
Update:
I'd like to add button(s) based on how many times the button is clicked. It adds until 4th rom then move to the next/new column.

From the comments i took, that it is possbile to use a Grid too. To achieve the desired layout you could use the following:
XAML:
<Grid Margin="400,0,0,0">
<Grid x:Name="myGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button x:Name="addBtn" Height="30" Width="100" Content="Button" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="20,20,0,0" Click="Button_Click"></Button>
</Grid>
</Grid>
I replaced your StackPanel with a Grid and added definitions for the four rows and the first column.
CS:
First we need to add a counter:
public int buttonCounter = 1;
Then we need to change the Button_Click method:
private void Button_Click(object sender, RoutedEventArgs e)
{
//Create the button
Button b = new Button();
b.Height = 30;
b.Width = 100;
b.VerticalAlignment = VerticalAlignment.Top;
b.HorizontalAlignment = HorizontalAlignment.Left;
b.Margin = new Thickness(20, 20, 0, 0);
b.Content = "Button " + buttonCounter;
b.Click += Button_Click;
//Calculate the place of the button
int column = (int)(buttonCounter / 4);
int row = buttonCounter % 4;
//Check if you need to add a columns
if(row == 0)
{
ColumnDefinition col = new ColumnDefinition();
col.Width = new GridLength(column, GridUnitType.Auto);
myGrid.ColumnDefinitions.Add(col);
}
//Add the button
myGrid.Children.Add(b);
Grid.SetColumn(b, column);
Grid.SetRow(b, row);
buttonCounter++;
}
Inside this method, the position of the new button is automatically calculated and if needed, a new column is added to the grid.

Try this:
<Grid Margin="400,0,0,0">
<UniformGrid x:Name="ButtonsUniformGrid" Columns="2" Rows="4"/>
</Grid>
If you need to have a button at the beginning, when you initialize your view do the following:
Button b = new Button(); ;
b.Content = "Button";
b.Click += Button_Click;
ButtonsUniformGrid.Children.Add(b);
Then, everytime you click on it will put a new button in the grid. Let me know if you have any other questions about this :)
As commented Uwp doesn't include UniformGrid if you don't specify it in your xaml. If you want to use it, just include this:
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
and your UniformGrid will be like this:
<controls:UniformGrid...../>

Collapse Control under a GridSplitter - Unwanted White space appears

Given the following XAML;
<Grid>
<Grid.RowDefinitions>
<RowDefinition MinHeight="100"/>
<RowDefinition Height="2"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border Grid.Row="0"
Background="LightBlue">
<Button Height="30"
Click="Button_Click">Hide Lower Panel</Button>
</Border>
<GridSplitter Grid.Row="1"
ResizeDirection="Rows"
Width="Auto"
HorizontalAlignment="Stretch"
Margin="0"
x:Name="Splitter"/>
<Border Grid.Row="2"
Background="LightCoral"
x:Name="LowerPanel" MinHeight="25"/>
</Grid>
Where Button_Click is;
this.LowerPanel.Visibility = this.LowerPanel.Visibility == Visibility.Visible
? Visibility.Collapsed
: Visibility.Visible;
This looks like this;
If the button is clicked before doing anything else, then it collapses as expected;
However, if I resize using the grid splitter..
Then when I press the button, the following happens;
Is there any way to make the lower element collapse correctly again after it has been resized?
Note: for the purposes of this question I've just used code-behind event handers and a button to trigger this, but in real-life it's done in the proper MVVM way with the visibility being determined by a bound property on the view model.

AFAIK, when GridSplitter is used, its rewrites the Height or Width properties of the corresponding RowDefinitions and ColumnDefinitions. In order to do what you want, you should to play with RowDefinitions.Height property, like this:
public MainWindow()
{
InitializeComponent();
//gr is the name of the Grid
basepr1 = gr.RowDefinitions[0].Height;
basepr2 = gr.RowDefinitions[2].Height;
}
static GridLength zero = new GridLength(0);
GridLength basepr1;
GridLength basepr2;
private void Button_Click(object sender, RoutedEventArgs e)
{
if (this.LowerPanel.Visibility == Visibility.Visible)
{
this.LowerPanel.Visibility = Visibility.Collapsed;
basepr2 = gr.RowDefinitions[2].Height; // remember previos height
gr.RowDefinitions[2].Height = zero;
}
else
{
this.LowerPanel.Visibility = Visibility.Visible;
gr.RowDefinitions[2].Height = basepr2;
}
}

I think you need to mark one of the row definitions as '*':
<Grid.RowDefinitions>
<RowDefinition MinHeight="100"/>
<RowDefinition Height="2"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

Layout to use for dynamic grid of images in a ScrollViewer

I have a ScrollViewer that contains a Grid of images. I am not sure if using a grid is the correct choice. Here is a mockup image of what I want it to look like:
The red box represents the ScrollViewer. Inside it, is some type of layout container (Grid at the moment) that has two rows of images (green squares) but a dynamic amount of columns that can change at runtime, that can be scrolled to. Another condition is that I want to resize them so that 6 images (and only 6!) are always visible.
So in XAML:
<ScrollViewer Name="scrollViewer1">
<Grid Name="grid1"></Grid>
</ScrollViewer>
Then using C# I think I need to dynamically add columns. Then listening to scrollViewer1's SizeChanged event I need to dynamically calculate the size of the rows and columns so that 3 images are always in view. For example:
ColumnDefinition gridColN = new ColumnDefinition();
grid1.ColumnDefinitions.Add(gridColN);
Problem #1: Dynamically adding more columns makes the grid cells keep getting smaller and smaller and never scroll within the ScrollViewer until there are 10+ columns.
Expected result: The end result should be a horizontal stream of images, 6 visible at a time, that will resize when the outter container or window is resized. I am trying to size their width dynamically, but setting them to 1/3 of the containers width does not work.
Questions: Is this the correct approach? Should I use Grid inside the ScrollViewer? Do I have to manually calculate the sizes or is there a way to let them fill the container?

Grid width should be calculated as
grid1.Width = (scrollViewer1.ViewportWidth / 3) * grid1.ColumnDefinitions.Count;
grid1.Height = (scrollViewer1.ViewportHeight / 2) * grid1.RowDefinitions.Count;
This seemed to work for me:
XAML:
<DockPanel>
<ListBox Width="150" DockPanel.Dock="Left" BorderBrush="AliceBlue" BorderThickness="2">
<Button Name="AddColumn_Button" Width="100" Height="25" Content="Add Column" Click="AddColumn_Button_Click" Margin="5"/>
<Button Name="AddRow_Button" Width="100" Height="25" Content="Add Row" Margin="5" Click="AddRow_Button_Click" />
</ListBox>
<ScrollViewer Name="scrollViewer1" BorderBrush="AliceBlue" BorderThickness="2" SizeChanged="scrollViewer1_SizeChanged" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Margin="1">
<Grid Name="grid1" ShowGridLines="True" >
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
</ScrollViewer>
</DockPanel>
CODE BEHIND:
private void scrollViewer1_SizeChanged(object sender, SizeChangedEventArgs e)
{
SizeGrid();
}
private void AddColumn_Button_Click(object sender, RoutedEventArgs e)
{
ColumnDefinition gridColN = new ColumnDefinition();
grid1.ColumnDefinitions.Add(gridColN);
SizeGrid();
}
private void AddRow_Button_Click(object sender, RoutedEventArgs e)
{
RowDefinition row = new RowDefinition();
grid1.RowDefinitions.Add(row);
SizeGrid();
}
private void SizeGrid()
{
grid1.Width = (scrollViewer1.ViewportWidth / 3) * grid1.ColumnDefinitions.Count;
grid1.Height = (scrollViewer1.ViewportHeight / 2) * grid1.RowDefinitions.Count;
}

Add a textblock to grid dynamically

My grid has 2 rows, 2 columns, and I want to add a textblock dynamically to first row, second column.
This is my code, which doesnt throw an exception but it doesnt show anything
<Grid HorizontalAlignment="Left" Height="768" VerticalAlignment="Top" Width="1366">
<Grid.RowDefinitions>
<RowDefinition Height="150"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="250"/>
</Grid.ColumnDefinitions>
</Grid>
protected async override void OnNavigatedTo(NavigationEventArgs e)
{
TextBlock txt = new TextBlock();
txt.Width = 200;
txt.Height = 100;
txt.Foreground = new SolidColorBrush(Colors.Yellow);
var location = await InitializeLocationServices();
txt.Text = location;
Grid.SetRow(txt, 0);
Grid.SetColumn(txt, 1);
}

You are never adding your TextBlock to the grid. You should name your Grid (eg. x:Name="myGrid") and call myGrid.Children.Add(txt) at some point.

WPF resizing, * vs Auto

I have a XAML with 2 columns in a Grid and I have a button that when I click it, in the code behind, I set the visibility to collapse, and want to resize the other half of the screen to try to take up the whole screen. The collapsing part works, and the RHS then shifts over to the LHS, but it does not take up the entire screen. I tried using both the Auto and Star to resize in HidePlots, but it never takes the full screen. I thought if I collapsed the LHS, and set the column to * for the RHS, it would take up the whole screen. Any thoughts? Thanks.
Here's some code to make it more clear:
<Grid Grid.Row="1" x:Name="ExpandableGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="1.5*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" x:Name="TableGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<GroupBox Grid.Row="0" Grid.Column="0" x:Name="SampleViewGroupBox" Header="SampleView" HorizontalAlignment="Stretch" FontFamily="Arial" FontSize="12" Margin="5,0,5,0" >
<ContentControl Content="{Binding LayoutManager.SampleView}" Height="Auto" Width="Auto"/>
</GroupBox>
<Button x:Name="TableButton" HorizontalAlignment="Right" Content="Button" Width="15" Height="15" VerticalAlignment="Top" Margin="0,0,-2,0" Click="MaxButton_Click" Grid.Column="0" Grid.Row="0"/>
</Grid>
<Grid Grid.Column="1" x:Name="BaseViewGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<GroupBox Grid.RowSpan="2" Grid.Column="1" Name="BaseViewGroupBox" Header="PLOTS" Margin="5,0,5,0" >
<ContentControl Content="{Binding LayoutManager.ConsensusView}" Height="Auto" Width="Auto" />
</GroupBox>
</Grid>
</Grid>
private void MaxButton_Click(object sender, RoutedEventArgs e)
{
UIElement senderElement = (UIElement)sender;
if (_tableMinimized)
{
HideTables(false);
_tableMinimized = false;
((Button)senderElement).Style = (Style)FindResource("DashboardDetailsButton");
}
else
{
HideTables(true);
_tableMinimized = true;
((Button)senderElement).Style = (Style)FindResource("DashboardDetailsButtonReverse");
}
}
private void HideTables(bool hide)
{
if (hide)
{
foreach (UIElement child in TableGrid.Children)
child.Visibility = Visibility.Collapsed;
for (int i = 0; i < ExpandableGrid.ColumnDefinitions.Count; i++)
ExpandableGrid.ColumnDefinitions[i].Width = GridLength.Auto;
ExpandableGrid.ColumnDefinitions[1].MinWidth = 500;
for (int i = 0; i < ExpandableGrid.RowDefinitions.Count; i++)
ExpandableGrid.RowDefinitions[i].Height = GridLength.Auto;
TableButton.Visibility = Visibility.Visible;
}
else
{
foreach (UIElement child in TableGrid.Children)
child.Visibility = Visibility.Visible;
for (int i = 0; i < ExpandableGrid.ColumnDefinitions.Count; i++)
ExpandableGrid.ColumnDefinitions[i].Width = new GridLength(1, GridUnitType.Star);
for (int i = 0; i < ExpandableGrid.RowDefinitions.Count; i++)
ExpandableGrid.RowDefinitions[i].Height = new GridLength(1, GridUnitType.Star);
}
}
Edit: I tried to also change one line to:
ExpandableGrid.ColumnDefinitions[1].MinWidth = System.Windows.SystemParameters.PrimaryScreenWidth-20;
instead of the hard-coded 500 value, it looks correct. However, if I try to click the button again to revert back to normal, the RHS takes up the bulk of the screen without getting back to its original position.

Your current column definition says to make Column B equal to 1.5 times the size of Column A, so even if ColumnB's content is hidden, the column will still take up 3/5 of the screen.
Change it so the column that collapses has a Width="Auto", and set it's Content's Width equal to whatever size it should be when it's expanded. If you want to keep the 1.5* default width, I'd recommend using something like a MathConverter to figure out what size it should be based on the parent Grid's width. I have the code for one posted here
<Grid x:Name="ParentGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid x:Name="RHS" Grid.Column="0" />
<!-- Collapse this Grid -->
<Grid x:Name="LHS" Grid.Column="1"
Width="{Binding ElementName=ParentGrid, Path=ActualWidth,
Converter={StaticResource MathConverter},
ConverterParameter=((#VALUE/5)*3)}" />
</Grid>

You need to set column 0 to be whatever you desire (Auto, 150, etc...) and set column 1 to be *.
It looks like your Grid is also within a Grid, so the parent's behavior also has to be taken into account.