I'm writing a xamarin app that targets Android, iOS, and UWP.
We're using the shell stack for routing and have a bottom bar with some flyout items.
<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:views="clr-namespace:CADLearning.App.Views"
xmlns:user="clr-namespace:CADLearning.App.Views.User"
xmlns:controls="clr-namespace:CADLearning.App.Controls"
xmlns:services="clr-namespace:CADLearning.App.Services"
BackgroundColor="{DynamicResource HeaderBackgroundColor}"
FlyoutBackgroundColor="{DynamicResource HeaderBackgroundColor}"
x:Name="this"
x:Class="CADLearning.App.AppShell">
<!--
Styles and Resources
-->
<Shell.Resources>
<ResourceDictionary>
<Color x:Key="NavigationPrimary">#2196F3</Color>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{DynamicResource BackgroundColor}" />
<Setter Property="Shell.ForegroundColor" Value="{DynamicResource ForegroundColor}" />
<Setter Property="Shell.TitleColor" Value="{DynamicResource ForegroundColor}" />
<Setter Property="Shell.DisabledColor" Value="{DynamicResource DisabledForegroundColor}" />
<Setter Property="Shell.UnselectedColor" Value="{DynamicResource UnselectedForegroundColor}" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{DynamicResource HeaderBackgroundColor}" />
<Setter Property="Shell.TabBarForegroundColor" Value="{DynamicResource OrangeColor}"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="{DynamicResource UnselectedForegroundColor}"/>
<Setter Property="Shell.TabBarTitleColor" Value="{DynamicResource OrangeColor}"/>
</Style>
<Style TargetType="Tab" BasedOn="{StaticResource BaseStyle}" />
<Style x:Key="FlyoutItemLabelStyle" TargetType="Label">
<Setter Property="FontSize" Value="16"/>
<Setter Property="TextColor" Value="{DynamicResource ForegroundColor}"/>
<Setter Property="VerticalOptions" Value="Center"/>
</Style>
</ResourceDictionary>
</Shell.Resources>
<Shell.FlyoutHeader>
<controls:FlyoutHeader />
</Shell.FlyoutHeader>
<Shell.ItemTemplate>
<DataTemplate>
<StackLayout Padding="5,15,5,0" Orientation="Horizontal">
<Image Source="{Binding FlyoutIcon}" HeightRequest="24" WidthRequest="24" VerticalOptions="Center" Margin="0,0,5,0"/>
<Label Grid.Column="1" Text="{Binding Title}" Style="{DynamicResource FlyoutItemLabelStyle}" VerticalOptions="Center" />
</StackLayout>
</DataTemplate>
</Shell.ItemTemplate>
<Shell.MenuItemTemplate>
<DataTemplate>
<StackLayout Padding="5,15,5,0" Orientation="Horizontal">
<Image Source="{Binding FlyoutIcon}" HeightRequest="24" WidthRequest="24" VerticalOptions="Center" Margin="0,0,5,0"/>
<Label Grid.Column="1" Text="{Binding Title}" Style="{DynamicResource FlyoutItemLabelStyle}" VerticalOptions="Center" />
</StackLayout>
</DataTemplate>
</Shell.MenuItemTemplate>
<!--Actual Items-->
<FlyoutItem Title="Home" Icon="home.png" Route="home">
<Tab Title="Dashboard" Icon="workflow.png" Route="dashboard">
<ShellContent ContentTemplate="{DataTemplate views:DashboardPage}"/>
</Tab>
<Tab Title="Roles & Goals" Icon="goal.png" Route="goals">
<ShellContent ContentTemplate="{DataTemplate views:GoalsPage}"/>
</Tab>
<Tab Title="Library" Icon="library.png" Route="library">
<ShellContent ContentTemplate="{DataTemplate views:LibraryPage}"/>
</Tab>
<Tab Title="Playlists" Icon="playlist.png" Route="playlists">
<ShellContent ContentTemplate="{DataTemplate views:PlaylistsPage}"/>
</Tab>
</FlyoutItem>
<FlyoutItem Title="Support" Icon="Q.png" Route="support">
<ShellContent ContentTemplate="{DataTemplate views:QPage}"/>
</FlyoutItem>
<FlyoutItem Title="Settings" Icon="settings.png" Route="user">
<Tab Title="Settings" Icon="settings.png" Route="settings">
<ShellContent ContentTemplate="{DataTemplate user:SettingsPage}"/>
</Tab>
<Tab Title="Transcript" Icon="transcript.png" Route="transcript">
<ShellContent ContentTemplate="{DataTemplate user:TranscriptPage}"/>
</Tab>
</FlyoutItem>
<MenuItem Text="Logout" Icon="login.png" x:Name="miLogout" Clicked="miLogout_Clicked"/>
</Shell>
on Android and iOS this works okay and the bottom tabbed items display.
However in UWP they don't display unless you hover over them
Could anyone point me in the right direction on getting this to work in UWP?
Related
I am implementing a Xamarin.Forms app using AppShell and can't seem to figure out how to set the color of the selected / unselected icons in the Flyout menu. Here is the section of the appshell.xaml that I believe is controlling the behavior (I used various high contrast colors to show what settings are controlling what). (The complete code sample: https://github.com/wadebaird/ShellExample for more reference):
<Style x:Name="FlyoutItem" Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<!-- This is the color of the unselected text for the labels in the flyout-->
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Magenta" />
<Setter TargetName="FlyoutItemLabel" Property="Label.BackgroundColor" Value="Cyan" />
<!-- This is the background color of the selected icon in the flyout -->
<Setter Property="BackgroundColor" Value="Green" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<!-- This is the color of the selected text in the flyout -->
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Black"/>
<Setter TargetName="FlyoutItemLabel" Property="Label.BackgroundColor" Value="Yellow" />
<!-- This is the background color of the selected icon in the flyout -->
<Setter Property="BackgroundColor" Value="Red" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
And here is the visuals from these settings. In this image, the "Entity at the top is the "selected" item. I would expect / want the icons to match the colors of the text but can't seem to find the setting.
Here is what I'm going for to show how "white" for the icons doesn't work:
I can manually set the color on the FontImageSource, but then it is always that color and doesn't match the selected / unselected:
<ShellContent Route="aboutPage" Title="About" ContentTemplate="{DataTemplate views:AboutPage}" >
<ShellContent.Icon>
<FontImageSource Size="{StaticResource FlyoutIconSize}" Color="Black" Glyph="{x:Static fontAwesome:FontAwesomeIcons.InfoCircle}" FontFamily="FA-Solid" />
</ShellContent.Icon>
</ShellContent>
I tried various things such as this withing the "Common States"- "Normal"/"Selected" and couldn't get anything to work.:
<Setter Property="FontImageSource.Color" Value="{AppThemeBinding Light={StaticResource PrimaryUnselectedTextColorLight}, Dark={StaticResource PrimaryUnselectedTextColorDark}}" />
And on a side note (and this is probably a bug). It appears on iOS that when first opening the flyout nothing is "selected":
Where on Android, the proper item is selected:
I know this is a seperate item, and I'll log a bug if I can't find an existing issue/bug, but I figured I'd mention it as someone thgat knows the answer to my above probably is already aware of this issue.
You could use the Shell.ItemTemplate to set the background color of the Label and Icon. And use the VisualStateGroup to change the color of Selected status.
Shell.ItemTemplate:
<Shell.ItemTemplate>
<DataTemplate>
<Grid ColumnDefinitions="0.2*,0.8*" ColumnSpacing="0" Style="{StaticResource FloutItemStyle}">
<Image x:Name="FlyoutItemIcon" Source="{Binding FlyoutIcon}" HeightRequest="45" />
<Label x:Name="FlyoutItemLabel" Grid.Column="1"
Text="{Binding Title}"
FontAttributes="Italic"
VerticalTextAlignment="Center" />
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
Style:
<Style x:Key="FloutItemStyle" Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{x:OnPlatform UWP=Transparent, iOS=White}" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource Primary}" />
<Setter TargetName="FlyoutItemLabel" Property="Label.BackgroundColor" Value="Blue" />
<Setter TargetName="FlyoutItemIcon" Property="Image.BackgroundColor" Value="Green" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
<Setter TargetName="FlyoutItemLabel" Property="Label.BackgroundColor" Value="{StaticResource Primary}" />
<Setter TargetName="FlyoutItemIcon" Property="Image.BackgroundColor" Value="{StaticResource Primary}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
After Wendy Zang replied with a partial solution (it solved the background color but not the foreground), it got me on the right track
and I was able to find the answer to this posted question, which utilized two labels instead of an image. (I also tried to use the Image that Wendy suggested above and an effect like the IconTintColorEffect.TintColor from this post, but I couldn't get that to work quite right either as the sizing of the icon was a lot trickier with it being an image.)
I tried the solution with having the different types of derived classes with the IconGlyph property and I got it to work well, but I didn't like the cleanliness of it. I then thought of using an IValueConverter to fix the binding for the label class:
public class FlyoutGlyphConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
if (value == null)
return null;
if (value is not BaseShellItem baseShellItem)
throw new ArgumentException($"This converter may only be used on values of type {nameof(BaseShellItem)}.");
if (baseShellItem.Icon is not FontImageSource fontImageSource)
throw new ArgumentException($"This converter may only be used on values of type {nameof(BaseShellItem)}s with Icons of type {nameof(FontImageSource)}.");
return fontImageSource.Glyph;
}
}
And my xaml ended up being like so:
<Shell.ItemTemplate>
<DataTemplate x:DataType="root:IShellIconFont">
<Grid Margin="0" Padding="0" ColumnSpacing="0">
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<!-- This is the color of the unselected text for the labels in the flyout-->
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="#2196F3" />
<Setter TargetName="FlyoutItemLabel" Property="Label.BackgroundColor" Value="White" />
<!-- This is the background color of the selected icon in the flyout -->
<Setter TargetName="FlyoutItemIcon" Property="Image.BackgroundColor" Value="White" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<!-- This is the color of the selected text in the flyout -->
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="White"/>
<Setter TargetName="FlyoutItemLabel" Property="Label.BackgroundColor" Value="#2196F3" />
<!-- This is the background color of the selected icon in the flyout -->
<Setter TargetName="FlyoutItemIcon" Property="Image.BackgroundColor" Value="#2196F3" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.8*" />
</Grid.ColumnDefinitions>
<Label x:Name="FlyoutItemIcon" Grid.Column="0" FontFamily="FA-Solid" FontSize="{StaticResource FlyoutIconSize}"
Text="{Binding ., Converter={StaticResource FlyoutGlyph}}" TextColor="{Binding Source={x:Reference FlyoutItemLabel}, Path=TextColor}"
VerticalTextAlignment="Center" HorizontalTextAlignment="Center"
Margin="0" Padding="0"/>
<Label x:Name="FlyoutItemLabel" Grid.Column="1" Text="{Binding Title}" FontSize="{StaticResource FlyoutLabelFontSize}"
FontAttributes="Bold" VerticalTextAlignment="Center" HeightRequest="45" />
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
<FlyoutItem Route="root" Title="Entitys" FlyoutDisplayOptions="AsMultipleItems">
<root:ShellContentIconFont Route="mainPage" Title="Entity" Glyph="{x:Static fontAwesome:FontAwesomeIcons.BookOpen}" ContentTemplate="{DataTemplate views:MainPage}" />
<root:ShellContentIconFont Route="favoritesPage" Title="Favorites" Glyph="{x:Static fontAwesome:FontAwesomeIcons.Star}" ContentTemplate="{DataTemplate views:FavoritesPage}" />
<root:TabIconFont Route="entitys" Title="Entitys" Glyph="{x:Static fontAwesome:FontAwesomeIcons.Book}" >
<ShellContent Route="entitysCalendar" Title="Calendar" ContentTemplate="{DataTemplate views:EntitysCalendarPage}" />
<ShellContent Route="entitysList" Title="List" ContentTemplate="{DataTemplate views:EntitysListPage}" />
</root:TabIconFont>
</FlyoutItem>
<FlyoutItem Route="root" Title="Entitys" FlyoutDisplayOptions="AsMultipleItems">
<ShellContent Route="mainPage" Title="Entity" ContentTemplate="{DataTemplate views:MainPage}">
<ShellContent.Icon>
<FontImageSource Size="{StaticResource FlyoutIconSize}" Glyph="{x:Static fontAwesome:FontAwesomeIcons.BookOpen}" FontFamily="FA-Solid" />
</ShellContent.Icon>
</ShellContent>
<ShellContent Route="favoritesPage" Title="Favorites" ContentTemplate="{DataTemplate views:FavoritesPage}">
<ShellContent.Icon>
<FontImageSource Size="{StaticResource FlyoutIconSize}" Glyph="{x:Static fontAwesome:FontAwesomeIcons.Star}" FontFamily="FA-Solid" />
</ShellContent.Icon>
</ShellContent>
<Tab Route="entitys" Title="Entitys">
<Tab.Icon>
<FontImageSource Size="{StaticResource FlyoutIconSize}" Glyph="{x:Static fontAwesome:FontAwesomeIcons.Book}" FontFamily="FA-Solid" />
</Tab.Icon>
<ShellContent Route="entitysCalendar" Title="Calendar" ContentTemplate="{DataTemplate views:EntitysCalendarPage}" />
<ShellContent Route="entitysList" Title="List" ContentTemplate="{DataTemplate views:EntitysListPage}" />
</Tab>
</FlyoutItem>
<ShellContent Route="aboutPage" Title="About" ContentTemplate="{DataTemplate views:AboutPage}" >
<ShellContent.Icon>
<FontImageSource Size="{StaticResource FlyoutIconSize}" Glyph="{x:Static fontAwesome:FontAwesomeIcons.InfoCircle}" FontFamily="FA-Solid" />
</ShellContent.Icon>
</ShellContent>
Here is the final result:
A side not, something in this solution fixed the iOS issue where nothing was selected on initial opening. I'm guessing it was the definded DataTemplate.
I'm working on a Xamarin Forms app and my problem consists on two factors:
I need the login page as startup page. If I set CurrentItem="{x:Reference homeTab} (or loginTab), the bottom TabBar no longer appears on any page. Currently it's hidden only on login and even if I set Shell.TabBarIsVisible="True" on the home page it won't appear. Also, removing the CurrentItem line will make it visible again.
How can I set click events on the TabBar? I need to have some logic behind it and not only navigate to a specific route.
Below is my shell xaml:
<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:PlusErp.Wms.Mobile.Views"
xmlns:resources="clr-namespace:PlusErp.Wms.Mobile.Resources"
Title="PlusErp.Wms.Mobile"
x:Class="PlusErp.Wms.Mobile.AppShell"
CurrentItem="{x:Reference homeTab}"
>
<!--
The overall app visual hierarchy is defined here, along with navigation.
https://learn.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/
-->
<Shell.Resources>
<ResourceDictionary>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.ForegroundColor" Value="White" />
<Setter Property="Shell.TitleColor" Value="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>
<Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
<Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
</ResourceDictionary>
</Shell.Resources>
<TabBar>
<ShellContent Title="{x:Static resources:AppResources.Back}" Icon="arrow_left.png" ContentTemplate="{DataTemplate local:HomePage}" />
<ShellContent x:Name="loginTab" Title="{x:Static resources:AppResources.Logout}" Icon="logout.png" Route="LoginPage" ContentTemplate="{DataTemplate local:LoginPage}" />
<ShellContent x:Name="homeTab" Title="{x:Static resources:AppResources.Home}" Icon="home.png" Route="HomePage" ContentTemplate="{DataTemplate local:HomePage}" />
<ShellContent Title="{x:Static resources:AppResources.InfoStock}" Icon="search.png" ContentTemplate="{DataTemplate local:LoginPage}" />
<ShellContent Title="{x:Static resources:AppResources.Forward}" Icon="arrow_right.png" Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />
</TabBar>
</Shell>
I'm using Shell on a Xamarin Forms app and the icons that I'm using on the TabBar are a little bit too high up
I would like to change their positions to the center but I can't find a way how.
How would I change the positions/alignment of the icons?
TabPage xaml
<!--TabBar Styles and Resources-->
<Shell.Resources>
<ResourceDictionary>
<Style x:Key="FreeStyle" TargetType="Element">
<Setter Property="Shell.TabBarBackgroundColor" Value="#f7f7f7" />
<Setter Property="Shell.TabBarForegroundColor" Value="White"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="#999999"/>
<Setter Property="Shell.TabBarTitleColor" Value="#61c9f7"/>
</Style>
</ResourceDictionary>
</Shell.Resources>
<!--BluePill Pages-->
<TabBar Style="{StaticResource FreeStyle}">
<!--TeleMED Tab-->
<Tab Icon="telemedicineIcon.png">
<ShellContent ContentTemplate="{DataTemplate views:TelemedicineMainPage}"/>
</Tab>
<!--Fleming Tab-->
<Tab Icon="chatbotIcon.png">
<ShellContent ContentTemplate="{DataTemplate views:ChatbotPage}"/>
</Tab>
<!--FirstAid Tab-->
<Tab Icon="firstaidIcon.png">
<ShellContent ContentTemplate="{DataTemplate views:FirstAidPage}"/>
</Tab>
<!--User Profile Tab-->
<Tab Icon="profileIcon.png">
<ShellContent ContentTemplate="{DataTemplate views:UserProfilePage}"/>
</Tab>
</TabBar>
I am new to xamarin.forms development and I am using VisualStudio 2019 to achieve the same. I am developing a sample shell application but unable to change the colour of toolbar(blue color in the picture). Could anyone please help me on this issue.
We could set the background color by add BackgroundColor="Green" in the shell.xaml
For example we set it it Green
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:local="clr-namespace:xxx"
Title="xxx"
BackgroundColor="Green"
x:Class="xxx.AppShell">
This will let color of TabBar been changed to green at the same time . So we should create styles for TabBar.
<Shell.Resources>
<ResourceDictionary>
<Color x:Key="NavigationPrimary">#2196F3</Color> //color of TabBar
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{StaticResource NavigationPrimary}" />
<Setter Property="Shell.ForegroundColor" Value="White" />
<Setter Property="Shell.TitleColor" Value="White" />
<Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
<Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource NavigationPrimary}" />
<Setter Property="Shell.TabBarForegroundColor" Value="White"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
<Setter Property="Shell.TabBarTitleColor" Value="White"/>
</Style>
<Style x:Key="MyBaseStyle" TargetType="Element">
<Setter Property="Shell.ForegroundColor" Value="White" />
<Setter Property="Shell.TitleColor" Value="White" />
<Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
<Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource NavigationPrimary}" />
<Setter Property="Shell.TabBarForegroundColor" Value="White"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
<Setter Property="Shell.TabBarTitleColor" Value="White"/>
</Style>
<Style TargetType="ShellItem" BasedOn="{StaticResource BaseStyle}" />
<Style TargetType="TabBar" BasedOn="{StaticResource MyBaseStyle}" />
</ResourceDictionary>
</Shell.Resources>
<!-- Your Pages -->
<TabBar >
<Tab Title="xxx" Icon="xxx" >
<ShellContent ContentTemplate="{DataTemplate xxx}" />
</Tab>
<Tab Title="xxx" Icon="xxx">
<ShellContent ContentTemplate="{DataTemplate xxx}" />
</Tab>
</TabBar>
How can I change the window style dynamically via Trigger?
Like:
<Style TargetType="UserControl">
<Setter Property="prism:Dialog.WindowStyle" Value="{DynamicResource DefaultDialogStyleTheme}"></Setter>
<Style.Triggers>
<DataTrigger
Binding="{Binding SecondOne, UpdateSourceTrigger=PropertyChanged}"
Value="true">
<Setter Property="prism:Dialog.WindowStyle" Value="{DynamicResource DialogStyleTheme}"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>`
You can register your own IDialogWindow implementation that has all the styles you desire.
The library's implementation's code's here (xaml) and there (code-behind) as a reference.
Thanks for your help :), But for example before we switched to new Prism, we've used a PopupWindowAction to raise a default window or a custom window:
var wrapperWindow = GetWindow(args.Context);
wrapperWindow.ShowDialog();
GetWindow returns a Window or CustomWindowObject.
That's the custom window style:
<Style x:Key="DialogStyleTheme" TargetType="implementation:CustomDialogWindow">
<Setter Property="WindowStyle" Value="None" />
<Setter Property="ResizeMode" Value="CanMinimize" />
<Setter Property="SizeToContent" Value="WidthAndHeight" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="AllowsTransparency" Value="True" />
<Setter Property="FontSize" Value="60" />
<Setter Property="ShowInTaskbar" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="implementation:CustomDialogWindow">
<Border BorderThickness="2" CornerRadius="10" BorderBrush="White" Background="DimGray"
x:Name="MainBorder">
<Grid Background="{TemplateBinding Background}" Margin="5,5,5,5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="30" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" x:Name="MoveGrid">
<Image x:Name="Image">
<Image.Style>
<Style TargetType="Image">
<Setter Property="Stretch" Value="UniformToFill" />
<Style.Triggers>
<DataTrigger Binding="{Binding SmallTitle}" Value="true">
<Setter Property="Height" Value="40" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<TextBlock Text="{Binding Title}">
<TextBlock.Style>
<Style BasedOn="{StaticResource TouchHeadTextBlock}" TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding SmallTitle}" Value="true">
<Setter Property="FontSize" Value="25" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
<ContentPresenter Grid.Row="2" x:Name="ContentPresenter" ClipToBounds="True" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And I'm setting the WindowStyle in my UserControl and I want to change this style via trigger....
prism:Dialog.WindowStyle="{DynamicResource DialogStyleTheme}"
Initialization:
containerRegistry.RegisterDialog<ItemSelectionDialogView, ItemSelectionDialogViewModel>();
containerRegistry.RegisterDialogWindow<CustomDialogWindow>();