UserControl for a Row in a Grid - xaml

I have following Grid:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- GridRow-Definition -->
<Label Grid.Row="0" Grid.Column="0">FirstRow:</Label>
<TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Binding_To_First_Row}" />
<Label Grid.Row="1" Grid.Column="0">SecondRow:</Label>
<TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Binding_To_Second_Row}" />
<!-- many more Label-TextBox-Rows -->
</Grid>
Question:
Is there a way to Create a UserControl which contains the Label and TextBox and properly aligns the first Column in a proper way?

The answer is yes, it is possible, but perhaps you should be using a DataGrid or an ItemsControl with a DataTemplate.
The simple answer to your question though is, if you need grid columns in different grids to synchronize their widths, you use the SharedSizeGroup attribute, e.g:
<UserControl>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="column1" Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
</UserControl>
Then in a parent element you use Grid.IsSharedSizeScope="True"
<StackPanel Grid.IsSharedSizeScope="True">
<local:UserControl1/>
<local:UserControl1/>
</StackPanel>
This synchronizes any columns (or rows) that have the same SharedSizeGroup within that scope (you can have multiple nested scopes).

Related

Define listview in resource file with only ItemSource changing

I created the following ListView to display some data (removed extraneous markup):
<ListView ItemsSource="{Binding NewYorkResidents}">
<ListView.Header>
<Style>
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListView.Header>
<ListView.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Name" Grid.Column="0" />
<TextBlock Text="Address" Grid.Column="1" />
</Grid>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" Grid.Column="0" />
<TextBlock Text="{Binding Address}" Grid.Column="1" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Now I want to reuse this exact same ListView + markup in a different view, just with a different ItemsSource (though it will bind to the same data type).
What is the best way to reuse the ListView and just specifiy the ItemsSource? I'm hoping to be able to do something like this:
<ListView DataTemplate="MyTemplate" ItemsSource=<some new binding> />
and still have it show the ListView headers and Name and Address TextBlocks using data from the ItemsSource.
Making a ControlTemplate doesn't seem like the right thing because I am specifiying actual data in the list view also (such as binding to name and address).
Is there a better way to create some type of resource so I can reuse this?
Define the header template and item template in resource dictionary and add reference of them in your code. you can reuse this templates.
<DataTemplate x:Key="HeaderTemplate1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Name" Grid.Column="0" />
<TextBlock Text="Address" Grid.Column="1" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="ListViewTemplate1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" Grid.Column="0" />
<TextBlock Text="{Binding clothing1}" Grid.Column="1" />
</Grid>
</DataTemplate>
<ListView HeaderTemplate="{StaticResource HeaderTemplate1}" ItemTemplate="{StaticResource ListViewTemplate1}"/>
for more information on Item template:
https://learn.microsoft.com/en-us/windows/uwp/controls-and-patterns/listview-item-templates

Binding data to layout

I am rookie in xamarin and I want to achieve a grid, with the feature scrollanle, but I canĀ“t get it. I reach this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="3*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Text="Correct" Grid.Row="0" Grid.Column="0" Clicked="OnStartClicked"/>
<Label Grid.Row="0" Grid.Column="1" Text="my_data_binded_from_my_dto" XAlign="Center" YAlign="Center"/>
</Grid>
Any help?
Thanks you all
Before at all, wellcome to stackoverflow. Hoping we can help you and you enjoy for being part of this community.
I think your best choice for achieving this is using a listview for binding your grid layout with your dto. Inside of your list view you can define a template which will be render in the list view, this template could be any layout. In your case, your grid.
I coded an example for you. Please, check it out, and let me know any doubt you could have. Cheers.
<ListView x:Name="listView" ItemsSource="{Binding .}">">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="3*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Text="Correct" Grid.Row="0" Grid.Column="0" Clicked="OnStartClicked"/>
<Label Grid.Row="0" Grid.Column="1" Text="my_data_binded_from_my_dto" XAlign="Center" YAlign="Center"/>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Remember to link your model with your listview, you can this from code-behind (constructor):
this.BindingContext = your_model;

Image flickers in ListView datatemplate

could someone tell me, how can I avoid image flickering in Datatemplate? Everytime I change the source through binding (MVVM pattern), the image in ListViewItem flickers. For other images in app I've used ImageOpened event in code-behind. But I can't be used when I have DataTemplate.
EDIT:
DataTemplate:
<DataTemplate x:Key="ContactItemDataTemplate" x:DataType="contactData:Contact">
<Grid MinHeight="48">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" x:Name="MainImage" Source="{x:Bind ImageStatusUri, Mode=OneWay}" Margin="0,8,12,8">
</Image>
<TextBlock Grid.Column="1" Text="{x:Bind Nickname, Mode=OneWay}" Foreground="Black" TextAlignment="Center"
VerticalAlignment="Center" FontSize="15" HorizontalAlignment="Left"/>
</Grid>
<Rectangle Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" StrokeThickness="0.4" Height="0.4"
VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Stroke="#D1D3D4"/>
</Grid>
</DataTemplate>
type Contact implements INotifyPropertyChanged.
EDIT2:
WriteableBitmap is working, but I have 3 images with scaling factors 100, 200 and 400. It always choose the image with scale 400. When I use normal binding no WriteableBitmap, it take image with scale 100.
The best solution here is for you to sub-class the Image control, overriding the Source property and controlling the transition from one image to another with a flicker-less flow. Learn here: https://mva.microsoft.com/en-US/training-courses/xaml-for-windows-10-controls-14482

ListView - Data template and data source in xaml (instant changes in VS designer)

I have something like this:
<ListView >
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<SymbolIcon Symbol="SomeExistingSymbol" Margin="0,0,10,0" />
<TextBlock Grid.Column="1">Some data</TextBlock>
</Grid>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<SymbolIcon Symbol="SomeExistingSymbol2" Margin="0,0,10,0" />
<TextBlock Grid.Column="1">Some data 2</TextBlock>
</Grid>
<!--More list view items (grids)-->
</ListView>
I don't want to copy Grids over and over. I know I can use binding and data templates.
But I want to have all data defined in xaml - is that possible?
The reason is that I need to see instant changes of data in VS designer, without building project.

XAML - Can't resize elements to 0 width in this case

Given the following XAML my goal is to keep the columns AAA, BBB, CCC always visible. The columns with the listboxes can resize all the way to zero though.
If I remove the ListBoxes then the application works exactly the way I want it to. That is, it doesn't have the weird behavior where the min widths are not respected.
With the listboxes (or DataGrids) the following XAML has this behavior:
After starting the application, if I drag the splitterA all the way close to BBB (BBB will keep the desired width of 25), then drag the splitterB all the way to the right then AAA will have the desired width of 25.
On the other hand, after starting the application, if I drag splitterA all the way to the right (AAA will keep the desired width of 25), then drag the splitterB all the way to the right then AAA will go off the screen. Surprisingly if I then drag the splitterA just a pixel to the left then both columns will "snap" into the correct place.
<Grid Background="CadetBlue" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
<ColumnDefinition MinWidth="60"/>
</Grid.ColumnDefinitions>
<TextBlock Text="CCC" Width="25" />
<ListBox Grid.Column="1" />
<GridSplitter Width="5" Grid.Column="2" Name="splitterB" HorizontalAlignment="Left" />
<Grid Background="Aqua" Grid.Column="2" Margin="5,0,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
<ColumnDefinition MinWidth="30"/>
</Grid.ColumnDefinitions>
<TextBlock Text="BBB" Width="25" />
<ListBox Grid.Column="1" />
<GridSplitter Width="5" Grid.Column="2" Name="splitterA" HorizontalAlignment="Left" />
<Grid Background="BurlyWood" Grid.Column="2" Margin="5,0,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="AAA" Width="25" />
<ListBox Grid.Column="1" />
</Grid>
</Grid>
</Grid>
Why does it work when I remove the listboxes?
Note: I modified the question and XAML code slightly to clarify things and also to show what I just found about the listboxes.
I've been playing around with the code for a little bit and it looks like your main problem lies in the fact that your GridSplitters don't have their own columns.
The way GridSplitter works is it adjusts the column immediately to the left and immediately to the right of it. So simply adding an additional column for a GridSplitter won't quite cut it, since you will then have 4 columns in your Grid, and you need both columns to the left of the splitter to be affected. So I would recommend putting those in an additional Grid.
The other problem is the MinWidth of 50 you have on the outer grid does not account for the width of the GridSplitter, so it should be 55.
It seems like this whole thing could be done more cleanly, but since I'm not sure exactly what you're trying to accomplish, I kept the "spirit" of your code intact and updated some things:
<Grid Background="CadetBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="50" Width="Auto"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition MinWidth="55" Width="5*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="CCC" />
<ListBox Grid.Column="0"/>
<GridSplitter Width="5" Grid.Column="1" />
<Grid Background="Aqua" Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="25"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition MinWidth="25" Width="5*" />
</Grid.ColumnDefinitions>
<TextBlock Text="BBB"/>
<ListBox Margin="0,20,10,20"/>
<GridSplitter Width="5" Grid.Column="1" />
<Grid Background="BurlyWood" Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="AAA" Width="25" />
<ListBox Margin="0,20,10,20" Grid.Column="1" />
</Grid>
</Grid>
</Grid>
Hope this helps!
It's a WPF bug:
https://connect.microsoft.com/VisualStudio/feedback/details/636072/msdn-forum-grid-layout-issue-with-minwidth-starsizing
http://social.msdn.microsoft.com/Forums/en/wpf/thread/24460784-7d09-4627-89fe-975e0ca7b303
I got around it with a hack. If anyone has a better solution I'd love to hear it...
XAML:
<Grid Background="CadetBlue" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
<ColumnDefinition MinWidth="60"/>
</Grid.ColumnDefinitions>
<TextBlock Text="CCC" Width="25" />
<ListBox Grid.Column="1" />
<GridSplitter Width="5" Grid.Column="2" Name="splitterB" HorizontalAlignment="Left" DragDelta="splitterB_DragDelta" />
<Grid Background="Aqua" Grid.Column="2" Margin="5,0,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Name="bbbColumn"/>
<ColumnDefinition MinWidth="30"/>
</Grid.ColumnDefinitions>
<TextBlock Text="BBB" Width="25" />
<ListBox Grid.Column="1" Name="bbbListBox" />
<GridSplitter Width="5" Grid.Column="2" Name="splitterA" HorizontalAlignment="Left" DragDelta="splitterA_DragDelta" />
<Grid Background="BurlyWood" Grid.Column="2" Margin="5,0,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="AAA" Width="25" />
<ListBox Grid.Column="1" />
</Grid>
</Grid>
</Grid>
Code:
private void ToggleWidths()
{
if (bbbColumn.ActualWidth < 10
&& bbbListBox.Visibility != System.Windows.Visibility.Collapsed)
bbbListBox.Visibility = System.Windows.Visibility.Collapsed;
else if (bbbColumn.ActualWidth >= 10
&& bbbListBox.Visibility != System.Windows.Visibility.Visible)
bbbListBox.Visibility = System.Windows.Visibility.Visible;
}
private void splitterA_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
ToggleWidths();
}
private void splitterB_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
ToggleWidths();
}