I have a user control:
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/UserInterface;component/Skins/MainSkin.xaml" />
</ResourceDictionary.MergedDictionaries>
<converters:WidgetWidthConverter x:Key="widgetWidthConverter" />
<converters:TileSizeConverter x:Key="tileSizeConverter" />
<converters:ListCountToVisibilityConverter x:Key="listCountToVisibilityConverter" />
<views:SubplantMainStaticControl x:Key="subplantMainStaticControl" />
<views:SubplantMainActualControl x:Key="subplantMainActualControl" />
</ResourceDictionary>
</UserControl.Resources>
<dxlc:TileLayoutControl Background="{x:Null}"
x:Name="tileControl"
Margin="10"
Padding="0"
ScrollBars="None"
LayoutUpdated="OnTileControlUpdated">
<dxlc:Tile Style="{StaticResource customizedTileStyle}"
Height="{Binding Source={StaticResource subplantMainStaticControl}, Path=ActualHeight, Converter={StaticResource tileSizeConverter}}"
Name="staticDataTile"
VerticalContentAlignment="Top">
<custom:Widget Name="staticDataWidget"
DataContext="{Binding Path=StaticViewModel}"
CanResize="False">
<custom:Widget.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Source={StaticResource DataViewResources}, Path=Resource.StaticDataText}"
Style="{StaticResource widgetHeaderTextBlock}" />
</StackPanel>
</custom:Widget.Header>
<StackPanel>
<ContentPresenter Content="{StaticResource subplantMainStaticControl}" />
</StackPanel>
</custom:Widget>
</dxlc:Tile>
<dxlc:Tile Style="{StaticResource customizedTileStyle}"
Height="{Binding Source={StaticResource subplantMainActualControl}, Path=ActualHeight, Converter={StaticResource tileSizeConverter}}"
Name="actualDataTile"
VerticalContentAlignment="Top">
<custom:Widget Name="actualDataWidget"
DataContext="{Binding Path=ActualViewModel}"
CanResize="False">
<custom:Widget.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Source={StaticResource DataViewResources}, Path=Resource.LatestDataText}"
Style="{StaticResource widgetHeaderTextBlock}" />
</StackPanel>
</custom:Widget.Header>
<StackPanel>
<ContentPresenter Content="{StaticResource subplantMainActualControl}" />
</StackPanel>
</custom:Widget>
</dxlc:Tile>
</dxlc:TileLayoutControl>
where the views:SubplantMainActualControl is :
<UserControl x:Class="UserInterface.Views.SubplantMainActualControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
dx:ThemeManager.ThemeName="Seven"
xmlns:views="clr-namespace:UserInterface.Views">
<views:LayoutLabelValueControl Grid.Row="0"
ItemsSource="{Binding Path=ActualRepresentations}" />
</UserControl>
and the widget is :
<dxlc:GroupBox x:Class="CustomControls.Widget"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
xmlns:custom="clr-namespace:CustomControls"
xmlns:converters="clr-namespace:CustomControls.Converters"
xmlns:constants="clr-namespace:Business.Constants;assembly=Business"
mc:Ignorable="d"
x:Name="baseTile"
dx:ThemeManager.ThemeName="Seven"
Margin="0,2,0,2"
IsManipulationEnabled="True"
Foreground="Black"
Padding="1"
Background="Transparent"
MinimizeElementVisibility="Visible"
Style="{DynamicResource GroupBoxStyle1}"
VisualTextHintingMode="Animated"
PreviewMouseLeftButtonDown="OnPreviewMouseLeftButtonDown">
<dxlc:GroupBox.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/CustomControls;component/Themes/MainSkin.xaml" />
</ResourceDictionary.MergedDictionaries>
<converters:BoolToVisibilityConverter x:Key="boolToVisibilityConverter" />
<Style x:Key="GroupBoxStyle1"
TargetType="{x:Type dxlc:GroupBox}">
<Setter Property="Background"
Value="Transparent" />
<Style.BasedOn>
<Style TargetType="{x:Type dxlc:GroupBox}">
<Setter Property="CornerRadius"
Value="3" />
<Setter Property="MinimizationDirection"
Value="Vertical" />
<Setter Property="Padding"
Value="11" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type dxlc:GroupBox}">
<dx:Container x:Name="container">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="LayoutStates">
<VisualState x:Name="NormalLayout" />
<VisualState x:Name="MinimizedLayout">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="TitleStretcher">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="300"
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="SeparatorElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="contentPresenter">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MaximizedLayout" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="widgetContet"
Template="{DynamicResource DesignerItemTemplate}">
<Border x:Name="BorderElement"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
dx:BorderExtensions.ClipChild="True"
CornerRadius="{TemplateBinding CornerRadius}"
Style="{DynamicResource contentBorderStyle}">
<Grid x:Name="layoutGrid">
<dxlc:LayoutControl ItemSpace="0"
Orientation="Vertical"
Padding="0"
ScrollBars="None">
<dxlc:LayoutGroup x:Name="groupBoxHeaderLayoutGroup"
Background="{TemplateBinding TitleBackground}"
ItemSpace="0"
Padding="2"
Visibility="{TemplateBinding TitleVisibility}">
<Rectangle x:Name="TitleStretcher"
Visibility="Collapsed"
Width="0" />
<dx:DXContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="{TemplateBinding Header}"
IsTabStop="False"
Margin="9,0"
VerticalAlignment="Center">
<dx:DXContentPresenter.Template>
<ControlTemplate TargetType="{x:Type dx:DXContentPresenter}">
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" />
</ControlTemplate>
</dx:DXContentPresenter.Template>
</dx:DXContentPresenter>
<Button x:Name="ColumnsElement"
HorizontalAlignment="Right"
Margin="2"
VerticalAlignment="Center"
Content="{Binding Source={StaticResource DataViewResources}, Path=Resource.ColumnsText}"
Command="{Binding Path=ColumnsCommand, ElementName=baseTile, Mode=OneWay}"
Visibility="{Binding Path=ColumnsButtonVisibility, ElementName=baseTile, Mode=OneWay}"
Style="{DynamicResource HeaderButtonStyle}" />
<Button x:Name="SettingsElement"
HorizontalAlignment="Right"
Margin="2,0,0,0"
VerticalAlignment="Center"
Content="{Binding Source={StaticResource DataViewResources}, Path=Resource.SettingsText}"
Visibility="Collapsed"
Style="{DynamicResource SettingsButtonStyle}" >
<Button.ContextMenu>
<ContextMenu HasDropShadow="True">
<ContextMenu.Items>
<!--<MenuItem Header="Setting 1"
Command="{Binding Path=SettingsCommand, ElementName=baseTile, Mode=TwoWay}" />
<MenuItem Header="Setting 2"
Command="{Binding Path=SettingsCommand, ElementName=baseTile, Mode=TwoWay}" />-->
</ContextMenu.Items>
</ContextMenu>
</Button.ContextMenu>
</Button>
<dxlc:GroupBoxButton x:Name="MinimizeElement"
HorizontalAlignment="Right"
Kind="Maximize"
Margin="2,0,0,0"
Visibility="{TemplateBinding MinimizeElementVisibility}"
VerticalAlignment="Center">
</dxlc:GroupBoxButton>
<dxlc:GroupBoxButton x:Name="MaximizeElement"
HorizontalAlignment="Right"
Kind="Minimize"
Margin="2,0,0,0"
Visibility="{TemplateBinding MaximizeElementVisibility}"
VerticalAlignment="Center">
</dxlc:GroupBoxButton>
</dxlc:LayoutGroup>
<Rectangle x:Name="SeparatorElement"
Fill="{TemplateBinding SeparatorBrush}"
Height="1"
Visibility="{TemplateBinding TitleVisibility}" />
<!--HorizontalScrollBarVisibility="Auto"-->
<dx:DXContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding CurrentContentTemplate}"
Content="{TemplateBinding Content}"
IsTabStop="False"
Margin="{TemplateBinding Padding}"
MaxHeight="{TemplateBinding MaxHeight}"
MinHeight="{TemplateBinding MinHeight}">
<dx:DXContentPresenter.Template>
<ControlTemplate TargetType="{x:Type dx:DXContentPresenter}">
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"/>
</ControlTemplate>
</dx:DXContentPresenter.Template>
</dx:DXContentPresenter>
</dxlc:LayoutControl>
<custom:BusySpinner Visibility="{Binding Path=DataLoading, Converter={StaticResource boolToVisibilityConverter}}"
Style="{StaticResource busySpinnerStyle}" />
</Grid>
</Border>
</ContentControl>
<Control Template="{DynamicResource ResizeDecoratorTemplate}"
DataContext="{Binding ElementName=baseTile}" />
</dx:Container>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Style.BasedOn>
</Style>
<!-- Designer Item Template-->
<ControlTemplate x:Key="DesignerItemTemplate"
TargetType="ContentControl">
<Grid x:Name="contextGrid"
DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<ContentPresenter Content="{TemplateBinding ContentControl.Content}" />
</Grid>
</ControlTemplate>
<!-- ResizeDecorator Template -->
<ControlTemplate x:Key="ResizeDecoratorTemplate"
TargetType="{x:Type Control}">
<Grid>
<custom:ResizeThumb x:Name="resizeThumbBottom"
Height="1"
Cursor="SizeNS"
Margin="3 0 3 -1"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Visibility="{Binding Path=CanResize, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource boolToVisibilityConverter}}">
</custom:ResizeThumb>
</Grid>
</ControlTemplate>
</ResourceDictionary>
</dxlc:GroupBox.Resources>
</dxlc:GroupBox>
Now, sometimes the tile called "actualDataTile" is displayed containing only the header of the widget (a.k.a group box) as if the height of the widget is 0. If i reload the control, the tile's content is displayed correctly.
Can you tell me anything that can lead me in the right direction?
Related
I am using the latest xamarin forms version because in the previous version I am facing the issue in the collection view when I selected the item the selected item color set as gray if I set the background as Transparent. I upgraded the new version ( https://github.com/xamarin/Xamarin.Forms/pull/14672 they mentioned it was fixed in the latest version) but I am getting the same issue in the latest version also.
<ContentPage.Resources>
<Style 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" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ContentPage.Resources>
<StackLayout Margin="20">
<CollectionView ItemsSource="{Binding Monkeys}"
SelectionMode="Single" >
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2"
Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label Grid.Column="1"
Text="{Binding Name}"
FontAttributes="Bold" />
<Label Grid.Row="1"
Grid.Column="1"
Text="{Binding Location}"
FontAttributes="Italic"
VerticalOptions="End" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
Anyone please suggest any workaround for this. My requirement is to set the background as Transparent for selected Item in xamarin iOS
I'm using Xamarin Forms Shell. How can you change the color of icons in the flyout menu when using tabs?
For example I'm using a png of a black icon as my tab icon.
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
<Tab Icon="pie_chart.png"
Title="Daily Target">
<ShellContent Route="TargetDataPage" ContentTemplate="{DataTemplate targetDataPageView:TargetDataPageView}" />
</Tab>
...
</FlyoutItem>
Setting the Shell TabBarTitleColor value changes the color of the black png to white in the tabs. (Which is good)
<Shell.Resources>
<ResourceDictionary>
<Style x:Key="BaseStyle" TargetType="Element">
...
<Setter Property="Shell.TabBarTitleColor" Value="White"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
</Style>
<Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
<Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
</ResourceDictionary>
</Shell.Resources>
Is there a setter to set the color of the icon in the flyout menu? I need to set this because black is no good in dark mode, but I can't swap the icon for a white png icon because it's then the wrong color in light mode.
If there isn't a specific setter for flyout menu icon color, how else can I set the color? Bearing in mind the icon is set in the tab.
1.Create a custom flyout with an additional IconGlyphProperty in folder Controls
namespace Xaminals.Controls
{
public class FlyoutItemIconFont: FlyoutItem
{
public static readonly BindableProperty IconGlyphProperty = BindableProperty.Create(nameof(IconGlyphProperty), typeof(string), typeof(FlyoutItemIconFont), string.Empty);
public string IconGlyph
{
get { return (string)GetValue(IconGlyphProperty); }
set { SetValue(IconGlyphProperty, value); }
}
}
}
2.Create a FlyoutItemTemplate with two Lables and VisualStateManager:
<Shell.ItemTemplate>
<DataTemplate>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="White" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource Primary}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="White" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.8*" />
</Grid.ColumnDefinitions>
<Label x:Name="FlyoutItemIcon"
FontFamily="MaterialDesignFont"
Text="{Binding IconGlyph}"
TextColor="{Binding Source={x:Reference FlyoutItemLabel} ,Path=TextColor}"
FontSize="30"
Margin="5"/>
<Label x:Name="FlyoutItemLabel"
Grid.Column="1"
Text="{Binding Title}"
VerticalTextAlignment="Center" />
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
3.Replace the original FlyoutItem in AppShell.xaml with the custom FlyoutItem
<controls:FlyoutItemIconFont Title="About" IconGlyph="{StaticResource IconInfo}">
<ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
</controls:FlyoutItemIconFont>
<controls:FlyoutItemIconFont Title="Browse" IconGlyph="{StaticResource IconListBulleted}">
<ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />
</controls:FlyoutItemIconFont>
4.And add the BaseStyle to the customFlyouItem
<!--other style-->
<x:String x:Key="IconInfo"></x:String>
<x:String x:Key="IconListBulleted"></x:String>
<Style TargetType="controls:FlyoutItemIconFont" BasedOn="{StaticResource BaseStyle}"/>
Result
Refer to this - Xamarin Forms: How Can I Change the FlyoutItem.Icon's Color When It Is Selected/Deselected?
Followed the case i done before with the Material Design Icons.
Xamarin Forms: How Can I Change the FlyoutItem.Icon's Color When It Is Selected/Deselected?
<Shell.Resources>
<ResourceDictionary>
<Color x:Key="fgColor">#66169C</Color>
<Color x:Key="bgColor">#FFFFFF</Color>
<Color x:Key="OverDueItem">#FF1C07</Color>
<OnPlatform x:Key="Material" x:TypeArguments="x:String">
<On Platform="iOS" Value="Material Design Icons" />
<On Platform="Android" Value="materialdesignicons-webfont.ttf#Material Design Icons" />
</OnPlatform>
<Style x:Key="MaterialIcons" TargetType="{x:Type Label}">
<Setter Property="FontFamily" Value="{DynamicResource Material}" />
<Setter Property="FontSize" Value="100" />
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="TextColor" Value="{DynamicResource fgColor}" />
<Setter Property="FontSize" Value="Large" />
</Style>
<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="Accent" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ResourceDictionary>
</Shell.Resources>
When you use the tab inside FlyoutItem, you could set the Material Design Icons using FontImageSource.
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems" >
<Tab Title="Page1" >
<Tab.FlyoutIcon>
<FontImageSource FontFamily="{StaticResource Material}" Color="{DynamicResource fgColor}" Glyph="">
</FontImageSource>
</Tab.FlyoutIcon>
<Tab.Icon>
<FontImageSource FontFamily="{StaticResource Material}" Color="{DynamicResource fgColor}" Glyph="" >
</FontImageSource>
</Tab.Icon>
<ShellContent Route="Page1" ContentTemplate="{DataTemplate local:Page1}" />
</Tab>
<Tab Title="Page2">
<Tab.FlyoutIcon>
<FontImageSource FontFamily="{StaticResource Material}" Color="{DynamicResource fgColor}" Glyph="">
</FontImageSource>
</Tab.FlyoutIcon>
<Tab.Icon>
<FontImageSource FontFamily="{StaticResource Material}" Color="{DynamicResource fgColor}" Glyph="" >
</FontImageSource>
</Tab.Icon>
<ShellContent Route="Page2" ContentTemplate="{DataTemplate local:Page2}"/>
</Tab>
</FlyoutItem>
Change the ItemTemplate of the FlyoutItem. Use the Label to set the Material Design Icons instead of Image. You could change the color when you select via Triggers to change the TextColor.
<Shell.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid" Style="{StaticResource FloutItemStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.8*" />
</Grid.ColumnDefinitions>
<Label Style="{StaticResource MaterialIcons}" Text="{Binding FlyoutIcon.Glyph}"
Margin="5"
HeightRequest="45">
<Label.Triggers>
<DataTrigger
Binding="{Binding Source={x:Reference grid}, Path=BackgroundColor}"
TargetType="Label" Value="Accent">
<Setter Property="TextColor" Value="White" />
</DataTrigger>
</Label.Triggers>
</Label>
<Label Grid.Column="1"
Text="{Binding Title}"
FontAttributes="Italic"
VerticalTextAlignment="Center" />
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
I using the AppShell, like I show the flow here
How to change the Status Bar in Xamarin Forms ContentPage using AppShell?
at this point I have an issue related with ContentPage's footer, that should be White, but is not, see this picture
In my code I am doing:
BackgroundColor="White"
Shell.BackgroundColor="White"
What is wrong?
I am doing this BaseStyle
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Dark={StaticResource Primary}, Light={StaticResource Primary}}" />
<Setter Property="Shell.ForegroundColor" Value="{AppThemeBinding Dark=Black, Light=White}" />
<Setter Property="Shell.TitleColor" Value="{AppThemeBinding Dark=Black, Light=White}" />
<Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
<Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.TabBarForegroundColor" Value="White" />
<Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF" />
<Setter Property="Shell.TabBarTitleColor" Value="White" />
</Style>
The XAML Page is
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="Toretto.MobileApp.Views.ForgetPasswordPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:behaviors1="clr-namespace:Toretto.MobileApp.Behaviors"
xmlns:controls="clr-namespace:Toretto.MobileApp.Controls"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:local="clr-namespace:Toretto.MobileApp;assembly=Toretto.MobileApp"
xmlns:r="clr-namespace:Toretto.MobileApp.LocalizationResources"
BackgroundColor="White"
Shell.BackgroundColor="White"
Shell.NavBarIsVisible="False">
<ContentPage.Resources>
<ResourceDictionary />
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout VerticalOptions="StartAndExpand">
<StackLayout.Padding>
<OnPlatform x:TypeArguments="Thickness">
<OnPlatform.Platforms>
<On Platform="iOS" Value="0, 30, 0, 0" />
<On Platform="Android" Value="0, 0, 0, 0" />
</OnPlatform.Platforms>
</OnPlatform>
</StackLayout.Padding>
<StackLayout
BackgroundColor="{StaticResource Primary}"
HeightRequest="60"
Orientation="Horizontal">
<Image
x:Name="BackImage"
Margin="10,0,0,0"
HeightRequest="36"
Source="{local:ImageResource Toretto.MobileApp.Resources.Images.back.png}"
VerticalOptions="CenterAndExpand"
WidthRequest="36">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BackCommand}" />
</Image.GestureRecognizers>
</Image>
<Label
Margin="-40,10,0,0"
FontSize="Medium"
HorizontalOptions="CenterAndExpand"
Text="{x:Static r:Resource.ForgetPasswordTitle}"
TextColor="White"
VerticalOptions="CenterAndExpand" />
</StackLayout>
<Label
Margin="20,20,20,0"
FontSize="Medium"
HorizontalOptions="StartAndExpand"
Text="{x:Static r:Resource.ForgetPasswordSubtitle}"
TextColor="{StaticResource TorettoDarkColor}" />
<Label
x:Name="EmailErrorLabel"
FontSize="Small"
HorizontalOptions="CenterAndExpand"
IsVisible="True"
Style="{StaticResource ValidationErrorLabelStyle}"
Text="{Binding Email.Errors, Converter={StaticResource ValidationErrorConverter}}" />
<Label
Margin="20,10,20,0"
FontFamily="Lobster-Regular"
FontSize="Medium"
Text="{x:Static r:Resource.User}"
TextColor="{StaticResource TorettoDarkColor}" />
<controls:CustomEntry
x:Name="customEntryEmail"
Margin="20,0,20,10"
IsPassword="False"
Style="{StaticResource CustomEntryStyle}"
Text="{Binding Email.Value, Mode=TwoWay}">
<Entry.Behaviors>
<behaviors1:EventToCommandBehavior Command="{Binding ValidateEmailCommand}" EventName="TextChanged" />
</Entry.Behaviors>
<!-- Sample -->
<Entry.Triggers>
<Trigger TargetType="Entry" Property="IsFocused" Value="True">
<Setter Property="BackgroundColor" Value="{StaticResource TorettoLightColor}" />
<!-- multiple Setters elements are allowed -->
</Trigger>
</Entry.Triggers>
</controls:CustomEntry>
<Button
x:Name="loginButton"
Margin="20,20,20,20"
Command="{Binding SendCommand}"
HeightRequest="40"
Text="{x:Static r:Resource.Send}"
TextColor="White"
VerticalOptions="Center">
<Button.Triggers>
<DataTrigger
Binding="{Binding Source={x:Reference customEntryEmail}, Path=Text.Length}"
TargetType="Button"
Value="0">
<Setter Property="IsEnabled" Value="False" />
</DataTrigger>
</Button.Triggers>
</Button>
</StackLayout>
</ContentPage.Content>
</ContentPage>
go to the App.XAML and change the Primary key to the color you want, or in BaseStyle you find Shell.TabBarBackgroundColor tag change this value to "White"
I wish I could create a BottomBar that would allow me to have a graphic like this, with a button bigger than all the others. I tried with a TabbedPage but it doesn't allow me this customization. I tried with a TabView but it doesn't allow me to insert ContentPage pages by pressing buttons. I would like a BottomBar that would allow me to have this graphic and to be able to use pages as button content.
Example
You could use TabView With Action Button from the Xamarin Community Toolkit linked below. By not assigning any content and instead assigning an event to the TabTapped property, you will display a button instead of another tab.
Install from NuGet: https://www.nuget.org/packages/Xamarin.CommunityToolkit/
Add xct:
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
Xaml:
<ContentPage.Resources>
<ResourceDictionary>
<ControlTemplate
x:Key="TabItemTemplate">
<Grid
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image
Grid.Row="0"
VerticalOptions="Center"
HorizontalOptions="Center"
WidthRequest="24"
HeightRequest="24"
Margin="6"
Source="{TemplateBinding CurrentIcon}" />
<Label
Grid.Row="1"
HorizontalOptions="Center"
FontSize="{TemplateBinding FontSize}"
Text="{TemplateBinding Text}"
TextColor="{TemplateBinding CurrentTextColor}" />
</Grid>
</ControlTemplate>
<ControlTemplate
x:Key="FabTabItemTemplate">
<Grid>
<ImageButton
InputTransparent="True"
Source="circle.png"
Padding="10"
HorizontalOptions="Center"
BackgroundColor="#FF0000"
HeightRequest="60"
WidthRequest="60"
Margin="6">
<ImageButton.CornerRadius>
<OnPlatform x:TypeArguments="x:Int32">
<On Platform="iOS" Value="30"/>
<On Platform="Android" Value="60"/>
<On Platform="UWP" Value="36"/>
</OnPlatform>
</ImageButton.CornerRadius>
<ImageButton.IsVisible>
<OnPlatform x:TypeArguments="x:Boolean">
<On Platform="Android, iOS, UWP">True</On>
<On Platform="macOS">False</On>
</OnPlatform>
</ImageButton.IsVisible>
</ImageButton>
<BoxView
InputTransparent="True"
HorizontalOptions="Center"
CornerRadius="30"
BackgroundColor="#FF0000"
HeightRequest="60"
WidthRequest="60"
Margin="6">
<BoxView.IsVisible>
<OnPlatform x:TypeArguments="x:Boolean">
<On Platform="Android, iOS, UWP">False</On>
<On Platform="macOS">True</On>
</OnPlatform>
</BoxView.IsVisible>
</BoxView>
</Grid>
</ControlTemplate>
<Style
x:Key="TabItemStyle"
TargetType="xct:TabViewItem">
<Setter
Property="FontSize"
Value="12" />
<Setter
Property="TextColor"
Value="#979797" />
<Setter
Property="TextColorSelected"
Value="#FF0000" />
</Style>
<Style
x:Key="CustomTabStyle"
TargetType="xct:TabView">
<Setter
Property="IsTabTransitionEnabled"
Value="True" />
<Setter
Property="TabStripHeight"
Value="48" />
<Setter
Property="TabContentBackgroundColor"
Value="#484848" />
<Setter
Property="TabStripPlacement"
Value="Bottom" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<Grid>
<xct:TabView
Style="{StaticResource CustomTabStyle}">
<xct:TabView.TabStripBackgroundView>
<BoxView
Color="#484848"
CornerRadius="36, 36, 0, 0"/>
</xct:TabView.TabStripBackgroundView>
<xct:TabViewItem
Text="Tab 1"
Icon="triangle.png"
ControlTemplate="{StaticResource TabItemTemplate}"
Style="{StaticResource TabItemStyle}">
<Grid
BackgroundColor="LawnGreen">
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent1" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem
Text="Tab 2"
Icon="circle.png"
ControlTemplate="{StaticResource FabTabItemTemplate}"
Style="{StaticResource TabItemStyle}"
TabTapped="OnFabTabTapped" />
<xct:TabViewItem
Text="Tab 3"
Icon="square.png"
ControlTemplate="{StaticResource TabItemTemplate}"
Style="{StaticResource TabItemStyle}">
<Grid
BackgroundColor="LightCoral">
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent3" />
</Grid>
</xct:TabViewItem>
</xct:TabView>
</Grid>
Update:
Do I have the possibility to insert a ContentPage by pressing on in TabViewItem and keep the TabVIew
You could set the page as contentview.
<?xml version="1.0" encoding="utf-8" ?>
<ContentView
x:Class="App9.Page1"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<ContentView.Content>
<StackLayout>
<Label
HorizontalOptions="CenterAndExpand"
Text="Welcome to Page1!"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentView.Content>
</ContentView>
public partial class Page1 : ContentView
{
public Page1()
{
InitializeComponent();
}
}
And then load in the TabViewItem.
<xct:TabViewItem
ControlTemplate="{StaticResource TabItemTemplate}"
Icon="square.png"
Style="{StaticResource TabItemStyle}"
Text="Tab 3">
<!--<Grid
BackgroundColor="LightCoral">
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent3" />
</Grid>-->
<local:Page1 />
</xct:TabViewItem>
I'm coding in Visual Studio Mac, using the iPhone 8 simulator running iOS 13.6.
Here's my code for my collection view:
<CollectionView
Margin="0"
VerticalScrollBarVisibility="Never"
BackgroundColor="Transparent"
x:Name="selectableItemsList"
SelectionMode="Multiple"
HorizontalOptions="Center"
VerticalOptions="Center"
SelectionChanged="selectableItemsList_SelectionChanged"
ItemsSource="{Binding Services}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Image
Source="{Binding Image}"
BackgroundColor="Transparent"
HeightRequest="100"
WidthRequest="100"
Aspect="AspectFit"
HorizontalOptions="Center"
VerticalOptions="Start">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup
Name="CommonStates">
<VisualState
Name="Normal" />
<VisualState
Name="Focused" />
<VisualState
Name="Selected">
<VisualState.Setters>
<Setter
Property="BackgroundColor"
Value="Yellow" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Image>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Here's what the items look like when not selected:
And here's what they look like when selected:
See that grey line at the top and left side of each icon? How the heck do I get rid of that?
Is there a way to do a work-around that uses a data trigger to change the image's background color when the item is selected?
Please Note:
Moving the VisualStateManager.VisualStateGroups section into a style in a ResourceDictionary does not solve the problem.
Have a try with put the image inside a Grid:
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Image
Source="{Binding .}"
BackgroundColor="Transparent"
HeightRequest="100"
WidthRequest="100"
HorizontalOptions="Center"
VerticalOptions="Start">
</Image>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup
Name="CommonStates">
<VisualState
Name="Normal" />
<VisualState
Name="Focused" />
<VisualState
Name="Selected">
<VisualState.Setters>
<Setter
Property="BackgroundColor"
Value="Yellow" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>