I am developing a windows universal application using C# and XAML. When my app is run on a laptop I want to change the height of my child grid in this gridview named tabIcon.
<Grid Name="tabGrid" Width="700">
<GridView Name="SpecialtyGridView" HorizontalAlignment="Center" ItemsSource="{Binding Source={StaticResource SpecialtyCollectionViewSource}}" Grid.Row="2" SelectionMode="None" IsItemClickEnabled="True" ItemClick="SpecialtyGridView_ItemClick">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Margin="0,0,0,10" Orientation="Vertical" MaximumRowsOrColumns="4"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid Name="tabIcon" Background="#21539E" Width="290" Height="140" Margin="5,0,5,8">
<TextBlock x:Name="SpecialityTextBlock" FontSize="26" Foreground="White" FontFamily="Segoe UI" VerticalAlignment="Center" HorizontalAlignment="Center">
<Run Text="{Binding speciality}"/>
</TextBlock>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
I use a visual state trigger to do this but it does not work. Here is my trigger code for laptop.
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Phone">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth = "0"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target = "HeaderGrid.Height"
Value = "90" />
<Setter Target = "Instruction.Visibility"
Value = "Collapsed" />
<Setter Target = "TheatreName.FontSize"
Value = "14" />
<Setter Target = "TheatreName.HorizontalAlignment"
Value = "Left" />
<Setter Target = "TheatreName.Margin"
Value = "0,40" />
<Setter Target = "PatientNameAndIDStackPanel.Margin"
Value = "10,0" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Tablets">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth = "720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<!--<Setter Target = "Body.Background"
Value = "Red" />-->
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Laptop">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth = "1024" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target = "tabIcon.Height"
Value = "60" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PCs">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth = "1400" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target = "Divider.Height"
Value = "80" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
This code works if I use it for the grid named tabGrid but does not work for the grid named tabIcon. What can I do to get this to work?
Is there any reason, why you need to do this just in XAML?
If not, just make two DataTemplates and change it on SizeChanged event of your page or parent grid.
XAML
<Page SizeChanged="MainPage_OnSizeChanged">
<Page.Resources>
<DataTemplate x:Key="LaptopTemplate">
<Grid Background="#21539E" Width="290" Height="60" Margin="5,0,5,8">
<TextBlock x:Name="SpecialityTextBlock"
FontSize="26" Foreground="White"
FontFamily="Segoe UI"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<Run Text="{Binding speciality}"/>
</TextBlock>
</Grid>
</DataTemplate>
<DataTemplate x:Key="DesktopTemplate">
<Grid Name="tabIcon" Background="#21539E" Width="290" Height="40" Margin="5,0,5,8">
<TextBlock x:Name="SpecialityTextBlock"
FontSize="26"
Foreground="White"
FontFamily="Segoe UI"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<Run Text="{Binding speciality}"/>
</TextBlock>
</Grid>
</DataTemplate>
</Page.Resources>
<GridView x:Name="SpecialtyGridView">
</GridView>
</Page>
Code-behind
private void MainPage_OnSizeChanged(object sender, SizeChangedEventArgs e)
{
if (e.PreviousSize != e.NewSize)
{
if (MainPage.ActualWidth > 1024)
{
SpecialtyGridView.ItemTemplate = Resources["DesktopTemplate"] as DataTemplate;
}
else
{
SpecialtyGridView.ItemTemplate = Resources["LaptopTemplate"] as DataTemplate;
}
}
}
EDIT
Or you can even do it in VisualStateManager:
<VisualStateGroup>
<VisualState x:Name="Laptop">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="SpecialtyGridView.ItemTemplate" Value="{StaticResource LaptopTemplate}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Desktop">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1024" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="SpecialtyGridView.ItemTemplate" Value="{StaticResource DesktopTemplate}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
Related
here is my code in shell.xaml selected frame colour for flyout item is working for me its green it showing well but for the selected label it is same as normal
flyout label color i dont know what i am missing here
this is for flyout item frame
<Style x:Key="FloutItemStyle" TargetType="Frame">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="#384a1a"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
this is for label style
<Style x:Key="FloutItemStyles" TargetType="Label">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="TextColor" Value="#6b6b6b"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="TextColor" Value="#fff"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
this my template
<Shell.FlyoutHeaderTemplate>
<DataTemplate>
<Grid HeightRequest="110">
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<FlexLayout x:Name="imageHolder" AlignItems="Center" JustifyContent="Center" Padding="20,10" BackgroundColor="#fff">
<Image Source="logo.png" />
<Label TextColor="#6b6b6b" x:Name="UserName"></Label>
</FlexLayout>
</Grid>
</DataTemplate>
</Shell.FlyoutHeaderTemplate>
<Shell.ItemTemplate >
<DataTemplate >
<Frame Style="{StaticResource FloutItemStyle}" Padding="25,5">
<FlexLayout Margin="0,5" AlignItems="Center" JustifyContent="Start">
<Frame Padding="5" HeightRequest="30" WidthRequest="30" CornerRadius="100"> <Image Source="{Binding FlyoutIcon}"
Margin="5"
WidthRequest="30"
HeightRequest="30" />
</Frame>
<Label Style="{StaticResource FloutItemStyles}" Padding="25,0,0,0"
Text="{Binding Title}"
FontAttributes="Bold"
FontSize="18"
VerticalTextAlignment="Center" />
</FlexLayout>
</Frame>
</DataTemplate>
</Shell.ItemTemplate>
I think it has to do with the label being inside the frame, and this causes that the label state does not change
If you want to trigger several changes upon selection you can check the Microsoft documentation about the flyout styling combined with this other example
In this way, when the flyout item gets selected, it triggers all the changes that you want, refering to the element by their name
I am trying to create a custom look for RadioButton different from the default one as shown in image below:
Any idea how can I do it?
Starting from Xamarin forms 5.0.0.1539-pre2 version, RadioButton does supports setting any content and using control templates and thus less need for custom renderer, and if we combine this with visual-state-manager we will get a beautiful xaml:
<ContentPage.Resources>
<ControlTemplate x:Key="FrameRadioTemplate">
<Frame Padding="0" BorderColor="#2B79E1" CornerRadius="15" VerticalOptions="Start"
HeightRequest="100" WidthRequest="100" HorizontalOptions="Start">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="#2B79E1"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="#f3f2f1"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="4" WidthRequest="100">
<ContentPresenter/>
</Grid>
</Frame>
</ControlTemplate>
</ContentPage.Resources>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center" Orientation="Horizontal">
<RadioButton ControlTemplate="{StaticResource FrameRadioTemplate}">
<RadioButton.Content>
<Label Text="RadioButton 1" TextColor="Black"/>
</RadioButton.Content>
</RadioButton>
<RadioButton ControlTemplate="{StaticResource FrameRadioTemplate}">
<RadioButton.Content>
<Label Text="RadioButton 2" TextColor="Black"/>
</RadioButton.Content>
</RadioButton>
</StackLayout>
Inspired from David Ortinau sample
EDIT
To make the TextColor white of the labels when respective RadioButton is checked you have several options:
1- Use a value converter with parameter bound to IsCheked.
2- Define style inline.
3- Use Style.Triggers inside the ControlTemplate which is shown below.
<ContentPage.Resources>
<ControlTemplate x:Key="FrameRadioTemplate">
<Frame Padding="5" CornerRadius="15" BorderColor="#2B79E1"
HeightRequest="120" WidthRequest="120">
<ContentPresenter>
<ContentPresenter.Resources>
<Style TargetType="Label">
<Setter Property="HorizontalOptions" Value="Center"/>
<Setter Property="VerticalOptions" Value="Center"/>
<Style.Triggers>
<DataTrigger TargetType="Label"
Binding="{Binding Path=IsChecked,
Source={x:RelativeSource AncestorType={x:Type RadioButton}}}"
Value="True">
<Setter Property="TextColor" Value="White"/>
<Setter Property="FontAttributes" Value="Bold"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="#2B79E1"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="#f3f2f1"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Frame>
</ControlTemplate>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout HorizontalOptions="Center" Orientation="Horizontal" Spacing="30"
VerticalOptions="Center">
<RadioButton ControlTemplate="{StaticResource FrameRadioTemplate}" IsChecked="True">
<RadioButton.Content>
<Label Text="RadioButton 1" TextColor="Black"/>
</RadioButton.Content>
</RadioButton>
<RadioButton ControlTemplate="{StaticResource FrameRadioTemplate}">
<RadioButton.Content>
<Label Text="RadioButton 2" TextColor="Black"/>
</RadioButton.Content>
</RadioButton>
</StackLayout>
</ContentPage.Content>
How to change lable's color which is inside grid of FlyoutItem?
In the above code I tried to change grid's background color and lable's font color when a specific menu item is selected. Grid's background changes. But font color doesn't.
Styles:
<Shell.Resources>
<Style x:Key="FloutItemStyle" TargetType="Grid">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Orange"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="DarkOrange"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<Style x:Key="FlyoutLabelStyle" TargetType="Label">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup>
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="TextColor" Value="Black"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="TextColor" Value="DarkGray"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</Shell.Resources>
Shell ItemTemplate:
<DataTemplate >
<Grid Style="{StaticResource FloutItemStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.8*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding FlyoutIcon}"
Margin="5"
HeightRequest="45" />
<Label Style="{StaticResource FlyoutLabelStyle}"
Grid.Column="1"
FontSize="Large"
Text="{Binding Title}"
FontAttributes="Bold"
VerticalTextAlignment="Center" />
</Grid>
</DataTemplate>
You can try using Triggers.
<Label Grid.Column="1"
TextColor="Black"
Text="{Binding Title}"
FontAttributes="Italic"
VerticalTextAlignment="Center" >
<Label.Triggers>
<DataTrigger TargetType="Label" Binding="{Binding Source={x:Reference grid},Path=BackgroundColor}" Value="Accent">
<Setter Property="TextColor" Value="White"/>
</DataTrigger>
</Label.Triggers>
</Label>
for reference
How do I change color of a selected FlyOutItem ? Let's say I want it to be blue instead of gray in the screenshot below.
I downloaded a few sample projects like Gastropods and went through all FlyOutItem styling properties ( it seems ) but can't figure it out.
Solution :
You can add a style of Item .
In Shell.Resource
<Style x:Key="FloutItemStyle" TargetType="Grid">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Red"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
And use it in Shell.ItemTemplate
<Shell.ItemTemplate>
<DataTemplate >
<Grid Style="{StaticResource FloutItemStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.8*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding FlyoutIcon}"
Margin="5"
HeightRequest="45" />
<Label Grid.Column="1"
Text="{Binding Title}"
FontAttributes="Italic"
VerticalTextAlignment="Center" />
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
I have a page with a relative panel to re-organize based on width. However, it doesn't seem to apply any state at load unless the width is > 720px. If I resize the page after it's loaded both states work.
A workaround would be to check the window size on page loaded and manually choose the state, but I believe this should be handled automatically? I have other pages that work, I'm not sure what I'm doing different. Here is a simplified version of my code, I have it set red/blue backgrounds so I can tell if/which state is being applied
<Page.Resources>
<converters:HighlightConverter x:Key="HighlightConverter"/>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<gui:MainAppBar x:Name="mainAppBar" Grid.Row="0"/>
<ScrollViewer Grid.Row="1">
<RelativePanel>
<StackPanel x:Name="ZonesContainer" Margin="12,12,0,0">
<TextBlock Text="Zones"/>
<ItemsControl x:Name="ZonesPanel">
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Margin" Value="6"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid x:Name="ZonesWrapGrid" Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="Panel" Orientation="Horizontal">
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
<StackPanel x:Name="SourcesContainer" RelativePanel.RightOf="ZonesContainer" Margin="12,12,0,0">
<GridView x:Name="SourcesPanel" Header="Sources">
</GridView>
</StackPanel>
<StackPanel x:Name="NetworkServicesContainer" RelativePanel.Below="SourcesContainer" RelativePanel.AlignLeftWith="SourcesContainer" Margin="12,12,0,0">
<GridView x:Name="NetworkServicesPanel" Header="Network">
</GridView>
</StackPanel>
</RelativePanel>
</ScrollViewer>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="WindowStates">
<VisualState x:Name="WideState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ZonesContainer.Background" Value="Blue"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="NarrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ZonesContainer.Background" Value="Red"/>
<Setter Target="SourcesContainer.(RelativePanel.Below)" Value="ZonesContainer" />
<Setter Target="SourcesContainer.(RelativePanel.AlignLeftWith)" Value="ZonesContainer" />
<Setter Target="NetworkServicesContainer.(RelativePanel.Below)" Value="SourcesContainer" />
<Setter Target="ZonesWrapGrid.Orientation" Value="Horizontal" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
Update
I've updated the code to show the missing ZonesWrapGrid, it does seem to be related. The visual states do work on it when I resize the page it will switch the ZonesWrapGrid orientation, just no state set on load.
However, if I remove the ZonesWrapGrid change from the visual state manager the narrow/wide states do correctly apply on load, but of course I lose the orientation change I want.
Can you try just replacing the whole ItemsPanelTemplate? Create both in resources:
<ItemsPanelTemplate x:Key="VerticalWrapGrid">
<ItemsWrapGrid Orientation="Vertical"/>
</ItemsPanelTemplate>
<ItemsPanelTemplate x:Key="HorizontalWrapGrid">
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
And then swap when needed:
<VisualState x:Name="WideState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ZonesPanel.ItemsPanel" Value="{StaticResource HorizontalWrapGrid}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="NarrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ZonesPanel.ItemsPanel" Value="{StaticResource VerticalWrapGrid}" />
</VisualState.Setters>
</VisualState>