Can anyone tell me the difference between GridView and a Grid in WPF XAML?
Here are the details for UWP. Should be similar for WPF I think.
Grid - used for defining layouts and formatting or static information. It is one of the several "layout panels" that are available (others include: RelativePanel, StackPanel, VariableSizedWrapGrid, and Canvas). Grid does not have an ItemSource member to dynamically display items by binding. Grid does have Grid.Row and Grid.Column attached properties (i.e. that can be used on other controls) to position them within the Grid.
Sample Code:
<Grid x:Name="LayoutPanel1" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
Margin="20"
BorderBrush="{StaticResource Page_Brush}"
BorderThickness="1 1 1 1">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="44"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
</Grid>
More Information: Grid Class, Layout Panels
GridView - used for displaying a set or collection of data (i.e. dynamic number of items). Another control available to display a set or collection of data is a ListView. One way to use this is by setting ItemSource (i.e. binding). By default, a data item is displayed in the GridView as the string representation of the data object it's bound to. To specify exactly how items in the GridView are displayed, you create a DataTemplate to define the layout of controls used to display an individual item. The controls in the layout can be bound to properties of a data object, or have content defined inline. You assign the DataTemplate to the ItemTemplate property of the GridView. The DataTemplate can contain a Grid (or any of the other layout panels mentioned above) to specify the layout of controls of an individual item.
Sample Code:
<GridView ItemsSource="{x:Bind MyItems}"
IsItemClickEnabled="True"
ItemClick="GridView_ItemClick"
ItemTemplate="{StaticResource MyItemTemplate}"
BorderBrush="{StaticResource MyItemBrush}"
BorderThickness="1 1 1 1"
HorizontalAlignment="Stretch"
/>
More Information: GridView Class, List view and Grid view, Guidelines for list view and grid view
A simple explanation would be
Grid
If you have just a single item with no repetitive subitem design then a grid is used. If the number of subitems are fixed
GridView
If you have a repetitive design like collection and you dont know the number of items that can be present then a gridview is used instead.
You can find more details on msdn forums.
From what I see Grid is more like a table, each row contains the same number of items (one for each column) no matter the size of the window.
GridView looks like a table but if you reduce the width of the window, the items from one row will jump on the next row:
Related
I am aware that I can use Grid.Rowdefinitions to define the number of rows and their properties on a WPF Grid control.
However is there a way to set the grid to automatically grow/add rows as controls are added, without having to explicitly state it?
However is there a way to set the grid to automatically grow/add rows as controls are added, without having to explicitly state it?
No, there isn't. Depending on your requirements, you probably want to replace the Grid with another Panel like for example a StackPanel or a UniformGrid with a single column:
<UniformGrid x:Name="grid" Columns="1" />
Then you don't need to care about setting any Grid.Row property.
You can do that in your code behind.
Define following in the .xaml of your window:
<Grid x:Name="YourGrid">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
</Grid>
Now use a loop to create as many rows as you need:
foreach(Control control in controlls)
{
YourGrid.RowDefinitions.Add(new RowDefinition());
YourGrid.Children.Add(control);
Grid.SetRow(control , YourGrid.RowDefinitions.Count - 1);
}
If you have a lot of controls this could help you. It will add the control automatically into the created row.
If you don't want to add the controls and rows in the code behind, you will have to add the rows manually. As far as I know there is no way to automate it.
I am trying the master-detail presentation in my app: when an item in a listbox is selected, its details are displayed in an adjacent control.
This control will have a list of measurements such as height, width, weight, etc. It will also have some small graphics such as a green or red dot or a medium sized image. It will also have some rich text.
Which STANDARD WPF control should I use to contain all these elements. I am thinking of using a listbox but wonder if there are better controls to use.
My main consideration is ease of coding, then possibly efficiency of the code.
Thanks.
A listbox indicates a list of items that can be tailored using a DataTemplate for appearence. In this case you are showing the details of a selected item. I would actually use a container such as a Grid nested in your current UI and have a set of stackpanel including the details of the selected item.
<Grid>
<StackPanel>
<StackPanel Orientation="Vertical">
<TextBlock>Detail1</TextBlock>
<TextBox></TextBox>
</StackPanel>
<StackPanel Orientation="Vertical">
<TextBlock>Detail2</TextBlock>
<TextBox></TextBox>
</StackPanel>
</StackPanel>
</Grid>
This is only one suggestion but the point is to use a container and use a set of controls in the containers - textblock,textbox,checkboxes(boolean details), etc... this will allow you to use any control type necessary to represent the specific data field of the selected item.
You don't want to use a listbox unless you have a collection of similar items, and you want one or more items to be 'selected' at some point. It sounds like that is not what you want for the details part.
You do have a collection, which is shown in your master list. You should bind the SelectedItem in your master list to a property in your viewmodel. Then you can bind that same property to the details section of your UI. When the selection in the master list changes, your details UI will automatically update to reflect the changes.
<ListBox x:Name="masterList" ItemsSource="{Binding MyItems}" SelectedItem="{Binding MySelectedItem, Mode=TwoWay}"></ListBox>
<UserControl x:Name="detailsControl" DataContext="{Binding MySelectedItem}"> </UserControl >
I am making kind of WPF Designer. I want to find out ColumnDefinition i have clicked on to delete it from grid control. I will take care of those children who "are in that ColumnDefinition".
Can i get it from sender argument of click event handler?
Now im checking if e.GetPosition is in range of ColumnDefinition.ActualWidth but i wonder if there is more beautiful solution.
From within your click event handler:
int columnIndex = Grid.GetColumn((UIElement)sender);
where sender if a direct grid's child.
Why do you need to capture a click on ColumnDefinition anyway? Is virtual, it does not have any actual body, it is only a hint for Grid on how you want to layout its content.
So you have to set handlers on content objects, not on ColumnDefinition.
If you really need to capture a click on the whole surface of a grid cell, you may try to place a white (or other color the same as background) Reactangle inside it and capture a click on it.
Some clarification on how WPF Grid works.
When you add some controls to the Grid, they all become its children.
<Grid>
<Button/>
<TextBox/>
<Label/>
</Grid>
And they all will be displayed not regarding how you have configured Column or RowDefinitions.
Column and RowDefinitions only tell Grid how you want to aling all the existing elements inside it, but they are not containers, they don't hold elements inside.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button/><!-- this is identical to Grid.Column="0"-->
<TextBox Grid.Column="1"/>
<Label Grid.Column="2"/>
</Grid>
In this example we have created three ColumnDefinitions, even from the grid XAML you can see, that controls are not inside definitions. They are used just like ruler guides to align content.
Then you set attached properties on the elements to tell the grid where you want to put your elements.
When grid begins layout, it will see, that there are three elements, and three ColumnDefinitions, and will try to positions elements as ColumnDefinitions says.
But if you remove or change ColumnDefinitions in the runtime, grid will just realign controls in a new way.
If you want to hide some elements, you have to hide them, not ColumnDefinition.
My custom TabItem header looks like this:
<sdk:TabControl>
<sdk:TabItem >
<sdk:TabItem.Header>
<Grid Background="Gray" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<!-- some labels go here -->
</Grid>
</sdk:TabItem.Header>
</sdk:TabItem>
</sdk:TabControl>
This creates a single-row, two-column grid inside of the TabItem header. The grid automatically sizes to fit the labels, like it should, but when the size of the actual tab button grows, the grid does not adjust to fill the space (even though I specifiy <HorizontalAlignment="Stretch">).
Why is this? Is there a way to have the grid take up all available horizontal space in the header?
The problem is that the default template for a TabItem which is used to render the tab places the content of the header in a ContentControl. Now a ContentControl has the properties HorizontalContentAlignment and VerticalContentAlignment that have the default values of "Left" and "Top". This is why your grid only occupies the space it needs rather than stretching to the full size available.
In order to avoid this you will need to make a copy of the default template for the TabItem and assign the value "Stretch" to both of those properties on the ContentControl elements in the template (there are 8 in all, 2 for each possible TabStrip placement (Top, Left, Bottom and Right) ).
I need to create a row in XAML which has a label,two radio buttons.. Based on some operation i need these row to be visible..else i need it to hidden.. I do not want the empty space to be displayed.. Is this possible only through code? If so can anyone help me out please?
Place the row in a grid and set it's height set to 'Auto'. Place your controls in a grid (or other container) and set it's Visibility to Collapsed for not visible and Visible for when you need to show it.
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
...
<RowDefinition Height="Auto" /> <!-- Your 'hidden' row -->
...
</Grid.RowDefinitions>
<!-- your collapse content -->
<Grid Grid.Row="2" Visible="Collapsed" x:Name="hiddenRow">
....your controls...
</Grid>
</Grid>
Then to show the controls...
hiddenRow.Visible= Visibility.Visible;
Hope that helps....
What do you mean by "row"? A DataGridRow? An item in a vertical StackPanel?
Is this row part of a DataTemplate for an item?
Without knowing more, it's hard to say.
But basically, you can bind some value trough a ValueConverter to the UIElement.Visibility property if what you want is to hide/show any UiElement.