ARTICLE AD BOX
I'm trying to create a modal-window-like view for my .NET Maui 9 application. I created RadioButtons and modified their appearance using a ControlTemplate Resource, but even though I am using the HorizontalOptions="Fill" Property, the Border does not visually fill up the remaining space but the XAML Live Preview states that it does. Does someone know what my layout mistake is?
This is the XAML Page:
<Border StrokeThickness="2" WidthRequest="600" VerticalOptions="Center" HorizontalOptions="Center"> <Grid RowDefinitions="Auto,*,Auto" Padding="20"> <Label FontSize="36" x:Name="ItemTitle" FontAttributes="Bold" HorizontalOptions="Center" Grid.Row="0"/> <ScrollView Grid.Row="1" HorizontalOptions="Fill"> <VerticalStackLayout RadioButtonGroup.GroupName="RadioGroup" x:Name="ItemStack" HorizontalOptions="Fill" Spacing="5"/> </ScrollView> <Grid Grid.Row="2" Padding="0,10,0,0" ColumnSpacing="10" ColumnDefinitions="*,*"> <Button Text="{x:Static local:Lang.cancel}" CornerRadius="0" Clicked="OnCancel"/> <Button Text="{x:Static local:Lang.confirm}" CornerRadius="0" Grid.Column="1" Clicked="OnConfirm"/> </Grid> </Grid> </Border>This is my ControlTemplate Resource:
<ContentPage.Resources> <ControlTemplate x:Key="SelectorRadioButton"> <Border Stroke="#F3F2F1" StrokeThickness="2" HorizontalOptions="Fill"> <VisualStateManager.VisualStateGroups> <VisualStateGroupList> <VisualStateGroup x:Name="CheckedStates"> <VisualState x:Name="Checked"> <VisualState.Setters> <Setter Property="Stroke" Value="{StaticResource Primary}" /> <Setter TargetName="check" Property="Opacity" Value="1" /> </VisualState.Setters> </VisualState> <VisualState x:Name="Unchecked"> <VisualState.Setters> <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Gray100}, Dark={StaticResource Gray900}}" /> <Setter Property="Stroke" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray800}}" /> <Setter TargetName="check" Property="Opacity" Value="0" /> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateGroupList> </VisualStateManager.VisualStateGroups> <Grid Margin="5" HorizontalOptions="Fill" ColumnDefinitions="Auto,*"> <Grid WidthRequest="24" Margin="5,0" HeightRequest="24" HorizontalOptions="Center" VerticalOptions="Center"> <Ellipse Stroke="{StaticResource Primary}" WidthRequest="16" HeightRequest="16" HorizontalOptions="Center" VerticalOptions="Center" /> <Ellipse x:Name="check" Fill="{StaticResource Primary}" WidthRequest="8" HeightRequest="8" HorizontalOptions="Center" VerticalOptions="Center" /> </Grid> <ContentPresenter Margin="5,0" Grid.Column="1" HorizontalOptions="Fill" VerticalOptions="Fill"/> </Grid> </Border> </ControlTemplate> <Style TargetType="RadioButton"> <Setter Property="ControlTemplate" Value="{StaticResource SelectorRadioButton}" /> <Setter Property="HorizontalOptions" Value="Fill" /> </Style> </ContentPage.Resources>The C# CodeBehind Constructor Placing the RadioButtons:
public Selector(string Title, List<(string, string, string)> Content) { InitializeComponent(); ItemTitle.Text = Title; ControlTemplate? style = Resources["SelectorRadioButton"] as ControlTemplate; for (int i = 0; i < Content.Count; i++) { var (icon, title, desc) = Content[i]; Grid tile = new() { ColumnDefinitions = { new ColumnDefinition() { Width = GridLength.Auto }, new ColumnDefinition() { Width = GridLength.Star } }, RowDefinitions = { new RowDefinition() { Height = GridLength.Auto }, new RowDefinition() { Height = GridLength.Auto } }, Margin = new Thickness(5) }; Label titleLabel = new() { Text = title, FontSize = 20, FontAttributes = FontAttributes.Bold }; tile.Add(titleLabel,1,0); Label descriptionLabel = new() { Text = desc, FontSize = 16, }; tile.Add(descriptionLabel,1,1); Image iconImage = new() { Source = icon, WidthRequest = 56, HeightRequest = 56, Margin = new Thickness(5) }; iconImage.Behaviors.Add(new IconTintColorBehavior { TintColor = GSettings.DarkMode ? Colors.White : Colors.Black }); tile.Add(iconImage,0,0); tile.SetRowSpan(iconImage,2); SelectorRadio radio = new() { Margin = new Thickness(0,5), Padding = new Thickness(10,5), Content = tile, HorizontalOptions = LayoutOptions.Fill, ControlTemplate = style, Current = i }; ItemStack.Add(radio); } }P.S.: I wish you a beatiful day :)
