I am trying to implement a sidebar that would have icons from font and while selecting one of them text of Label and Icon colour would change. I was able to implement this partly, but can't figure out how to:
Apply background colour to Flyout (currently it is still default black in NET7)
Change colour of icon if it is selected (currently colour does not change change on selection)
Change colour of Label text if it is selected (currently colour does not change change on selection)
Currently I have this:
I want to achieve this for selected item also FlyoutBackground="#111111" has no effect for some reason:
App.xaml:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
</ResourceDictionary.MergedDictionaries>
<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="Transparent"/>
<Setter TargetName="_label" Property="Label.TextColor" Value="Red" />
<Setter TargetName="_image" Property="Image.Source" Value="Red" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ResourceDictionary>
</Application.Resources>
<Application.MainPage>
<Shell FlyoutWidth="90" FlyoutBehavior="{OnIdiom Phone=Disabled, Default=Locked}"
FlyoutBackground="#111111">
<Shell.FlyoutHeaderTemplate>
<DataTemplate>
<BoxView HeightRequest="50" Color="Transparent"/>
</DataTemplate>
</Shell.FlyoutHeaderTemplate>
<!-- Desktop/Tablet-->
<FlyoutItem Title="Home" Icon="{FontImage FontFamily=FontAwesomeSolid, Glyph={x:Static helpers:FontAwesomeIcons.User}, Size=50, Color=Red}">
<ShellContent Title="Page1" Route="Page1" ContentTemplate="{DataTemplate page:Page1}">
<ShellContent.Icon>
<FontImageSource FontFamily="FontAwesomeSolid" Glyph="{x:Static helpers:FontAwesomeIcons.User}" Color="Red" Size="50"/>
</ShellContent.Icon>
</ShellContent>
</FlyoutItem>
<FlyoutItem Title="Settings" Icon="{FontImage FontFamily=FontAwesomeSolid, Glyph={x:Static helpers:FontAwesomeIcons.User}, Size=50}">
<ShellContent Title="Page2" Route="Page2" ContentTemplate="{DataTemplate page:Page2}">
<ShellContent.Icon>
<FontImageSource FontFamily="FontAwesomeSolid" Glyph="{x:Static helpers:FontAwesomeIcons.User}" Color="White" Size="50"/>
</ShellContent.Icon>
</ShellContent>
</FlyoutItem>
<Shell.ItemTemplate>
<DataTemplate>
<Grid Style="{StaticResource FloutItemStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Image Source="{Binding FlyoutIcon}"
Grid.Row="0"
HeightRequest="40"
Margin="5,0,5,0"
HorizontalOptions="CenterAndExpand"
x:Name="_image"/>
<Label Grid.Row="1"
Text="{Binding Title}"
TextColor="White"
FontSize="Body"
Padding="7,0,7,0"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
x:Name="_label">
</Label>
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
</Shell>
</Application.MainPage>
You can use Style FlyoutItem and MenuItem objects.
In AppShell.xaml:
<Shell.Resources>
<ResourceDictionary>
<Style Class="FlyoutItemLabelStyle" TargetType="Label"/>
<Style TargetType="Image" Class="FlyoutItemImageStyle"/>
<Style x:Key="dd" Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{AppThemeBinding Dark=White,Light=Black}" />
<Setter TargetName="FlyoutItemImage" Property="Image.BackgroundColor" Value="white" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Transparent"/>
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Red" />
<Setter TargetName="FlyoutItemImage" Property="Image.BackgroundColor" Value="Red" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ResourceDictionary>
</Shell.Resources>
<Shell.ItemTemplate>
<DataTemplate>
<Grid Style="{StaticResource dd}">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Image Source="{Binding FlyoutIcon}"
Grid.Row="0"
HeightRequest="40"
Margin="5,0,5,0"
HorizontalOptions="Center"
x:Name="FlyoutItemImage"/>
<Label Grid.Row="1"
Text="{Binding Title}"
FontSize="Body"
Padding="7,0,7,0"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
x:Name="FlyoutItemLabel"/>
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
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 am using Silverlight 5 and Telerik library.
I have set my RadPanelBar HorizontalAlignment to stretch. When my control is displayed the first time, it takes the size of its parent control. But the problem is, when my data grows horizontally, my panelbar grows with it!
Here goes my code, I have put all the controls to horizontalalignment to stretch, but no effect:
<UserControl.Resources>
<DataTemplate x:Key="ContentTemplate">
<ScrollViewer HorizontalAlignment="Stretch"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Disabled"
VerticalAlignment="Top">
<ItemsControl x:Name="Test"
ItemsSource="{Binding Items}"
HorizontalAlignment="Stretch">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Vertical"
Height="220"
HorizontalAlignment="Stretch">
</toolkit:WrapPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<controls:ParameterItem Style="{StaticResource ParamItem}"
Description="{Binding Code}"
ParamValue="{Binding Value}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</DataTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<telerik:RadBusyIndicator IsBusy="{Binding IsLoading}">
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid HorizontalAlignment="Stretch" Height="28">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="90" />
</Grid.ColumnDefinitions>
<Grid.Background>
<ImageBrush ImageSource="/ISDN.NSS.UI.Themes;component/Images/HeaderBG.png" />
</Grid.Background>
<TextBlock Grid.Column="0" FontSize="13" FontWeight="Bold" VerticalAlignment="Center" FontFamily="Arial" Margin="8,0,0,0" Text="Model Parameters"></TextBlock>
</Grid>
<telerik:RadPanelBar Grid.Row="1"
Margin="2"
ItemsSource="{Binding Parameters}"
HorizontalAlignment="Stretch"
>
<telerik:RadPanelBar.ItemTemplate>
<telerik:HierarchicalDataTemplate ItemTemplate="{StaticResource ContentTemplate}"
ItemsSource="{Binding RootItems}">
<TextBlock Text="{Binding Name}" FontSize="13" FontWeight="Bold" FontFamily="Arial"/>
</telerik:HierarchicalDataTemplate>
</telerik:RadPanelBar.ItemTemplate>
</telerik:RadPanelBar>
</Grid>
</telerik:RadBusyIndicator>
</Grid>
Can anyone help?
The problem is solved with the support of Telerik Team.
Here goes the code for the edited template of the RadPanelBar:
<telerik:Office_BlackTheme x:Key="Theme" />
<SolidColorBrush x:Key="ControlForeground_Normal" Color="#FF000000" />
<Style x:Key="RadPanelBarStyle" TargetType="telerik:RadPanelBar">
<Setter Property="ExpandMode" Value="Single" />
<Setter Property="UseLayoutRounding" Value="True" />
<Setter Property="TabNavigation" Value="Once" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<telerik:PanelBarPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:RadPanelBar">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="OrientationStates">
<VisualState x:Name="Vertical">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="00:00:00"
Storyboard.TargetName="transformationRoot"
Storyboard.TargetProperty="(telerikPrimitives:LayoutTransformControl.LayoutTransform)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<RotateTransform Angle="0" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Horizontal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="00:00:00"
Storyboard.TargetName="transformationRoot"
Storyboard.TargetProperty="(telerikPrimitives:LayoutTransformControl.LayoutTransform)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<RotateTransform Angle="-90" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<telerik:LayoutTransformControl x:Name="transformationRoot">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<!-- <ScrollViewer x:Name="ScrollViewer" telerik:ScrollViewerExtensions.EnableMouseWheel="True" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalScrollBarVisibility="Auto" IsTabStop="False" Padding="{TemplateBinding Padding}" telerik:StyleManager.Theme="{StaticResource Theme}" VerticalScrollBarVisibility="Auto" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"> -->
<ItemsPresenter />
<!-- </ScrollViewer> -->
</Border>
</telerik:LayoutTransformControl>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Orientation" Value="Vertical" />
<Setter Property="IsTabStop" Value="true" />
<Setter Property="Foreground" Value="{StaticResource ControlForeground_Normal}" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
The default scrollviewer had to be removed from the RadPanelBar default style.