Binding DataGrid column headers in Silverlight - data-binding

I've seen quite a few unanswered posts on this topic, yet I'm still inclined to believe someone on here as figured this out and is holding out on the rest of us.
I have a DataGrid that contains a mix of template columns and text columns. I just need a way of binding the headers to properties in the viewmodel so that I can use different strings for different languages.
I've seen WPF datagrid header text binding and every post linked from it. None of the methods suggested here work in Silverlight.
Does no one have any ideas?

I've recently spent a bit of time working on this too, here is how I got it working for other peoples benefit.
First declare namespace up top so I can specify it short hand in the xaml.
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
Then I declare header styles as static resources up top to keep the datagrid xaml clean:
<navigation:Page.Resources>
<Style x:Key="NameStyle" TargetType="sdk:DataGridColumnHeader">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding Path=LocalizedStrings.Name, Source={StaticResource Language}}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="DescriptionStyle" TargetType="sdk:DataGridColumnHeader">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding Path=LocalizedStrings.Description, Source={StaticResource Language}}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</navigation:Page.Resources>
Then in your datagrid xaml you can simply set your DataGridTextColumns Header style to your static resource header style.
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Width="Auto" FontSize="11" MinWidth="100" Binding="{Binding Name}" HeaderStyle="{StaticResource NameStyle}" />
<sdk:DataGridTextColumn Width="1*" FontSize="11" Binding="{Binding Description}" HeaderStyle="{StaticResource DescriptionStyle}" />
</sdk:DataGrid.Columns>
My original solution was from this post: Dynamically setting the Header text of a Silverlight DataGrid Column
Just tidied it up a bit as I had 15 column headers to set.

Related

Uno Material Card Formatting

I am using the Uno Material Card in my app. Recently there was a change to Uno.Material in the way it was initialized. I implemented that- with some help from #sbilogan in this response: Uno Material Initialization. However- the text in my cards no longer have the formatting. I tried adding back in the template to format the text- but it did not work. I am guessing something is being changed here- but not sure how to proceed. Here is my sample code and screenshots:
<material:Card x:Name="appInfoCard" HeaderContent="App Information"
SubHeaderContent="Tap to see more"
SupportingContent="App: "
Style="{ThemeResource MaterialOutlinedCardStyle}"
MediaContent="Example"
Foreground="{ThemeResource SubPageTextColor}"
Background="{ThemeResource cardBackground}">
<material:Card.MediaContentTemplate>
<DataTemplate>
<StackPanel Padding="10">
<Omitted for clarity>
</StackPanel>
</DataTemplate>
</material:Card.MediaContentTemplate>
</material:Card>
The code with the full template(I had to use this at one point- but the a change was merged into Uno Material so I did not have to use it anymore)
<material:Card.HeaderContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Margin="16,14,16,0"
Style="{ThemeResource MaterialHeadline6}" />
</DataTemplate>
</material:Card.HeaderContentTemplate>
<material:Card.SubHeaderContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Margin="16,0,16,14"
Style="{ThemeResource MaterialBody2}" />
</DataTemplate>
</material:Card.SubHeaderContentTemplate>
The top image was made with Uno Material build 774. The bottom was with 782.
It turns out that in my MaterialColorOverridePallette.xaml- I had the following set:
Green
Green
For some reason- it did not interfere with the formatting before 774. After 774- it removes the formatting from these categories for some reason. Removing them caused them to work as expected in 802 and beyond. Hopefully this helps someone else.

Xamarin forms - Dynamically-bound image in CarouselView lost Aspect.Fit after image change on Android

I am working on a cross-platform project using Xamarin forms. I am using carouselview to display an image button. See the code snippets below. The customImageButtonStyle sets to Aspect.Aspect.Fit. Initially it works as intended. However, after the image is changed, the image is still displayed, but smaller, ie. no longer does Aspect.Fit. If I place the same code outside the carouselview, it works without such a issue.
<StackLayout Grid.Row="0" Grid.Column="1" Orientation="Vertical" HorizontalOptions="CenterAndExpand">
<Grid x:Name="relayGrid" HorizontalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="4.0*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<views:CustomImageButton x:Name="relayButton" Source="{Binding RelayIcon}" Grid.Row="0" Grid.Column="0"
Style="{StaticResource customImageButtonStyle}"
Command="{Binding NavigateCommand}" CommandParameter="{x:Type views:RelayPage}" />
<Label Text="RELAYS" Grid.Row="1" Grid.Column="0" Style="{StaticResource deviceHomeBottomTextStyle}" />
</Grid>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding NavigateCommand}" CommandParameter="{x:Type views:RelayPage}" />
</StackLayout.GestureRecognizers>
</StackLayout>
</Grid>
</x:Array>
</controls:CarouselViewControl.ItemsSource>
Please note this issue is also logged at https://github.com/alexrainman/CarouselView/issues/561
It seems this is a Xamarin forms issue. I've tried to replace the image button with an image, the problem goes away. It seems sometimes AspectFit doesn't work for ImageButton when the bound image changes from a view model.

Xaml Grid Column Width Auto is ignored by all platforms except UWP

<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
in UWP the above results in the first column to horizontally expand just enough to fit the contents but second column grows to take the rest of the available width on the device screen.
in iOS / Android / Wasm the first column expands to take the whole screen - I never get to see the second column. I believe the second column may still be there but squashed or pushed outside of the screen.
The workaround for me was to set the column widths explicitly by for example saying first column is 30* and forth column is 70*.This also works and correctly shows the 2 columns:
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="leftCol" Width="110"/>
<ColumnDefinition x:Name="rightCol" Width="*"/>
</Grid.ColumnDefinitions>
In general Grid.Auto is supported by Uno on iOS/Android/WASM. The code below works as expected, for example.
If you're seeing an issue, it's probably related to the content of the Grid. If you're able to post some code that reproduces the issue, we can help you further.
<Grid Margin="0,100,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="In auto"
Grid.Column="0" />
<Border Background="Pink"
Height="50"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Grid.Column="1"/>
</Grid>
Windows:
iOS:

Xamarin Xaml Formatting Standart

How should be Xamarin Xaml Formatting Standart like be?
For example I will share two same code with different formatting. Which one should I prefer and why?
<!-- One Line Formatting -->
<Grid Grid.Row="0" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="6*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" FontSize="40" HorizontalOptions="CenterAndExpand" Text="Welcome, good to see you" TextColor="{StaticResource DarkIndigo}" Style="{StaticResource LabelLight}" />
<Label Grid.Row="1" FontSize="24" HorizontalOptions="CenterAndExpand" Text="{Binding UserName}" TextColor="{StaticResource DarkIndigo}" Style="{StaticResource LabelExtraBold}"/>
</Grid>
<!-- Separating lines -->
<Grid Grid.Row="0"
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="6*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<Label Text="Welcome, good to see you"
Grid.Row="0" FontSize="40"
HorizontalOptions="CenterAndExpand"
TextColor="{StaticResource DarkIndigo}"
Style="{StaticResource LabelLight}" />
Label Text="{Binding UserName}"
Grid.Row="1"
FontSize="24"
HorizontalOptions="CenterAndExpand"
TextColor="{StaticResource DarkIndigo}"
Style="{StaticResource LabelExtraBold}"/>
</Grid>
This is quite opinion based, but per my experience and personal test, I would advise to use the second option.
The biggest advantage is related to easily seing all the attributes related to an element, without the need for scroll (imagine having a small screen or such).
The second option is better, as it's easier to read.
Just keep in mind, if somebody would use your code, he/she won't be thankful because of long lines to read.
As for me, I use ReSharper, that could do code formatting for me. You should try that to!

How to achieve android constraint layout in xamarin forms

I am looking for an equivalent of constraint layout from Android in Xamarin forms. Is there any? How can I achieve this in XAML? I have been looking around and have not found anything useful.
Thank you so much for any recommendations.
In general, for my base page's layout I use a grid (but there are many ways to handle a page layout...)
Inside this grid you can put your UI elements. But what is interesting is that you can set Width x Height for each rows and columns of the grid.
Then you can also set margin properties for each of your UI elements.
I'm not familiar with Android design but in Xamarin Forms you can have something like that:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.25*" />
<ColumnDefinition Width="0.75*" />
</Grid.ColumnDefinitions>
<Label Text="Top Left" Grid.Row="0" Grid.Column="0" Margin="5,10,5,10" />
<Label Text="Top Right" Grid.Row="0" Grid.Column="1" />
<Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" />
<Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" />
</Grid>
This sample generates a layout with 4 parts (2 rows, 2 columns). Rows will have the same height and fill the screen. 2nd column will be 3x larger than 1st one and both will fill the screen.
Margin="5,10,5,10" ensure that an empty space of 5 'pixels' is always present before the label, 10 'pixels' are present on top the label ...
There are several controls to manage layout, like StackLayout or Listview (to manage items). If you have a more concrete example to implement, don't hesitate to complete your question.
I suggest you to check this documentation, you will find all you need !
Xamarin Forms layout documentation

Resources