I am working on a silverlight application and am creating girds dynamically with each having one row and two columns. In the first grid I am populating column with some fields(text box/ combobox/ datepicker etc) and leaving column 2 blank. In the second grid I am populating the second column and leaving the first blank and so on alternately. Now I want the data from the second column in the second grid in the first grid. (In a way I want to merge two grids). Is there any way to do that?
It goes something like this:
<Grid>
<views:DynamicFieldsView IsTabStop="True" Grid.Column="0" DataContext="{Binding Path=FieldProperties}" />
</Grid>
And the dynamicFieldsView is like this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="{Binding GridColumnNumber}" width = 140 ....>
<Controls:FieldItemControl FieldType="{Binding Type}" Margin="10,0,0,0" Grid.Column="{Binding FieldGridColumnNumber}">
<Controls:FieldItemControl.DataTemplates>
<Controls:TemplateSelectorDataTemplate FieldType="TextBox">
<TextBox Text="{Binding UserText}" width = 200 ....>
</Controls:TemplateSelectorDataTemplate>
<Controls:TemplateSelectorDataTemplate FieldType="Button">
<Button x:Name="SearchButton" Margin="10 10 10 0" .....>
</Controls:TemplateSelectorDataTemplate>
<Controls:TemplateSelectorDataTemplate FieldType="DropDownList">
<DynamicControls:AutoCompleteComboBox VerticalAlignment="Top" Width =200 ....>
</Controls:TemplateSelectorDataTemplate>
....
....
....
</Controls:FieldItemControl.DataTemplates>
</Controls:FieldItemControl>
</Grid>
You should clone the control from the second grid into the first and make a binding so both display same data.
Related
I have this code and I would like to convert the ColumnDefinition to use the new syntax where it's on the first line.
Can someone explain to me in this case what is <ColumnDefinition /> used for:
<Grid Margin="5,5,5,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="TitleTapped" />
</Grid.GestureRecognizers>
<t:FaqTemplate
HorizontalOptions="Start"
Text="{Binding Source={x:Reference _accordion_view_123}, Path=Title}"
VerticalOptions="CenterAndExpand" />
<ContentView
x:Name="_indicatorContainer"
Grid.Column="1"
Content="{Binding Source={x:Reference _accordion_view_123}, Path=IndicatorView}"
HorizontalOptions="End"
VerticalOptions="Start" />
</Grid>
Using the new syntax, that would translate to:
<Grid ColumnDefinitions="*, 50">
For the complete specs on the new syntax, you can read this: https://github.com/microsoft/microsoft-ui-xaml/issues/673
Basically, <ColumnDefinition /> is the equivalent of <ColumnDefinition Width="*" /> (* is the default value for the Width property).
The width of a column can be expressed in 3 ways:
Auto means that the column will automatically size itself based on content, within the available space
absolute values like 50, in that case the column will be 50 density-independent pixels wide
or * which is actually the equivalent of 1*. * allows you to split the available space proportionally. For example, if you have column A with 1* and column B with 3*, column A will occupy 25% (1 of 4) and column B will occupy 75% (3 of 4).
In your particular case, the second column has a fixed value of 50, so your first column with * width will take up 100% of the remaining width after the 50 is subtracted.
You can check out different examples here:
https://learn.microsoft.com/en-us/windows/uwp/design/layout/grid-tutorial
https://learn.microsoft.com/en-us/xamarin/get-started/tutorials/grid/?tabs=vswin
You define two columns, one with a width value of 50 and one with default properties. The one with default properties is <ColumnDefinition />.
View the Xamarin 101 series to learn this:
https://www.youtube.com/playlist?list=PLdo4fOcmZ0oU10SXt2W58pu2L0v2dOW-1
It is the official series by Microsoft and a most basic entry point for learning Xamarin.
My goal is to have a Grid panel that has two columns of controls (each column will contain a vertical StackPanel), where both columns are the same width but auto-sized based on the controls they contain. So both column widths will be equal to the widest control in either column.
I tried doing something like this:
<Grid HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Content="This is a wide button" HorizontalAlignment="Center" />
<Button Grid.Column="1" Content="Button" HorizontalAlignment="Center" />
</Grid>
The problem here is that the column widths aren't equal. The effect is the same as if I would have specified Width="Auto" for the column definitions. Using a * width only makes the columns equal width if the grid has a HorizontalAlignment of Stretch instead of Center. (Except then the columns aren't auto-sized to the content anymore.)
Am I missing something? Is there a way to get equal-sized column widths based on the content in the grid cells? In a UWP app (so things like UniformGrid aren't available)?
Thats because you have set HorizontalAlignment to "Center" , Grid wont occupy complete page just occupies center part(its horizontal space depends on sum of child elements, in this case it wont add up to fill up whole page.
Just change the HorizontalAlignment = "Stretch" so that whole space available and individual grid components occupy half space.
<Grid HorizontalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0"
Content="This is a wide button"
HorizontalAlignment="Center" />
<Button Grid.Column="1"
Content="Button"
HorizontalAlignment="Center"/>
</Grid>
Image:
The Windows Community Toolkit has a Uniform Grid control you can use if you add in the NuGet package.
Telerik RadDataGrid control will help you with your scenario
Add\install Telerik.UI.Xaml.Controls.Grid from Nuget inorder to use RadDataGrid in your UWP App
In windows Phone XAML, I have a StackPanel in Horizontal Orientation and I want it's child UI controls to share equal available width equally or in my case, I want TextBlock to share 1/3 and TextBox to get 2/3 of available width. How I can get that without giving hard coded values to width?
Below is the code example.
<StackPanel Orientation="Horizontal">
<TextBlock Text="Bill Total: "
VerticalAlignment="Center"/>
<TextBox InputScope="Number"
VerticalAlignment="Center"
PlaceholderText="Bill Total"
AcceptsReturn="True"
x:Name="txtBillTotal"
/>
</StackPanel>
As far as I can see, you can't do that with StackPanel. Try to use Grid instead with column definitions width set proportionally :
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Bill Total: "
VerticalAlignment="Center"/>
<TextBox Grid.Column="1"
InputScope="Number"
VerticalAlignment="Center"
PlaceholderText="Bill Total"
AcceptsReturn="True"
x:Name="txtBillTotal"
/>
</Grid>
That will set the 2nd column twice wider than the 1st, which means 2/3 Grid width. And the rest 1/3 given to the 1st column.
I have a grid with two columns with width 3* and 1*. Inside the first column i have a stack panel with "width="Auto"" and with different grids inside it with vertical orientation. The grids have two columns with 15* and 1*.
So my question is how to set the first column of the first grid to adjust to the size of the screen and the second column to be always static lets say 50p? i've trayed to set auto to the first column and its elements but it didn't work.
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinitions Width="*"/>
<ColumnDefinitions Width="50"/>
</Grid.ColumnDefinitions>
<StackPanel>
<Grid>
</Grid>
<Grid>
</Grid>
<Grid>
</Grid>
<Grid>
</Grid>
</StackPanel>
</Grid>
I want to display two columns in my Grid. The first is a textblock that is sometimes longer than the row meant to hold it. The second is a button. Is there a way to give the textblock as much room as possible while still leaving room for the button to go immediately after?
When I use the following code, the textblock will sometimes push the button outside the viewable area of the grid.
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Description}" HorizontalAlignment="Stretch" />
<Button Margin="4,0" Height="0" Width="16" Grid.Column="1" MinWidth="20" VerticalAlignment="Center" />
</Grid>
I've tried setting the first column definition Width="*", but then the button is always at the very end of the row, when I want it next to the text. Any suggestions?
This is in Silverlight 4.
Thanks.
EDIT
I want the grid to resize as the user changes the window size, so setting a hard limit on the grid size is no good. That being said, I was able to manually set the MaxWidth in the code behind when the TextBlock loads and when the window changes size. It's clunky, but it works.
Following will surely work..
<Grid x:Name="LayoutRoot" Background="White" Width="250">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock x:Name="textBlock" Grid.Column="0" Text="Text Box" VerticalAlignment="Top"/>
<Button x:Name="button" Grid.Column="1" Content="Button" VerticalAlignment="Top" Width="60"/>
</Grid>
Add Following Line to xaml.cs file in constructor..
public MainPage()
{
InitializeComponent();
textBlock.MaxWidth = LayoutRoot.Width - button.Width;
}
Let me know if there is any issue with it.
Thanks..