Add a textblock to grid dynamically - c#

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.

Related

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...../>

How to Move Button Beside Text Boxes in WPF using WrapPanel

I am new to WPF. I have a Button.I want to create Dynamic textBoxes.when ever I got the focus on dynamic textbox the button move to beside textbox. I dont know how to do this. please help me
<Grid Name="mymy" HorizontalAlignment="Left" Height="243" Grid.Column="0" Grid.Row="0" VerticalAlignment="Top" Width="263" Margin="462,105,0,0" Grid.RowSpan="2" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<WrapPanel Grid.Column="1" x:Name="abc" HorizontalAlignment="Left" Height="232" Margin="0,0,-250,-218" VerticalAlignment="Top" Width="262" Grid.Row="1"/>
</Grid>
<!--<DockPanel Name="mymy1" HorizontalAlignment="Left" Height="191" LastChildFill="True" Margin="424,94,0,0" VerticalAlignment="Top" Width="282" Grid.RowSpan="2"/>-->
.cs code
private void button_Click(object sender, RoutedEventArgs e)
{
txtSource = new TextBox();
txtSource.MinHeight = 15;
txtSource.Width = 100;
txtSource.Height = 25;
txtSource.Name = "txtSource";
//Binding txtBinding = new Binding("PurchaseOrder.PickupSrcCodeName"); /*txtBinding.Mode = BindingMode.OneWay;*/
//txtSource.SetBinding(TextBox.TextProperty, txtBinding);
ColumnDefinition colDef1;
colDef1 = new ColumnDefinition();
mymy.ColumnDefinitions.Add(colDef1);
RowDefinition rowDef1;
rowDef1 = new RowDefinition();
mymy.RowDefinitions.Add(rowDef1);
++count;
abc.Children.Add(txtSource);
Grid.SetColumn(txtSource, count);
Grid.SetRow(txtSource, 0);
txtSource.GotFocus += t_GotFocus;
txtSource.TextChanged += this.t_TextChanged;
}
private void t_TextChanged(object sender, RoutedEventArgs e)
{
button.Visibility = Visibility.Visible;
}
enter image description here
Welcome to SO.
Consider these two things:
It's extremely bad habit to change the layout of a grid at run time (and by layout I mean rows and columns)
Just the same way that you set your textboxes positions in your grid you can position your button within it as well. You just need to create the rows and columns required by it before head.
My opinion here is you should have a stack layout adding controls to it dynamically. That control then can be custom control consisting of a grid with a text box and a position for button (or maybe a button that can be hidden or visible with a property)
If you like my idea please see this to know how to create custom controls.

How to programmatically place a label inside a grid within another grid?

Take for example this xaml code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1">
<Label Content="Label"/>
</Grid>
</Grid>
</Grid>
How would one go about creating this form structure in c# code? The thing that is throwing me off is the grid with two columns within the parent grid's right column.
Thank you for your assistance.
You can do it this way:
public MainWindow()
{
InitializeComponent();
Grid grid1 = new Grid();
grid1.ColumnDefinitions.Add(new ColumnDefinition());
grid1.ColumnDefinitions.Add(new ColumnDefinition());
Content = grid1;
Grid grid2 = new Grid();
grid2.SetValue(Grid.ColumnProperty, 1);
grid2.ColumnDefinitions.Add(new ColumnDefinition());
grid2.ColumnDefinitions.Add(new ColumnDefinition());
grid1.Children.Add(grid2);
Label label = new Label {Content = "Label"};
label.SetValue(Grid.ColumnProperty, 1);
grid2.Children.Add(label);
}

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>

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.

Categories