I try to delete a text from a switch but i cant, the switch code is:
<Switch x:Name="styleSwitch"
HorizontalOptions="Center"
Scale="1.3"/>
And the style is:
<Style TargetType="Switch">
<Setter Property="OnColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
<Setter Property="ThumbColor" Value="{StaticResource White}" />
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="OnColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
<Setter Property="ThumbColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="On">
<VisualState.Setters>
<Setter Property="OnColor" Value="{AppThemeBinding Light={StaticResource Secondary}, Dark={StaticResource Gray200}}" />
<Setter Property="ThumbColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Off">
<VisualState.Setters>
<Setter Property="ThumbColor" Value="{AppThemeBinding Light={StaticResource Gray400}, Dark={StaticResource Gray500}}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
But appears a text right to the Switch and i don't know how to remove it:
It's a default project of Maui so i don't know where that text came from, i try to find it and remove but i can't.
I tried also adding a Label and binding to that switch like the documentation, but that doesn't work, just add a new label.
How can i do it?
EDIT
Just apear in Windows
EDIT 2
I put the steps to reproduce my problem:
Frist create a new Maui project:
Add in xaml MainPage:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SwitchWithText.MainPage">
<ScrollView>
<VerticalStackLayout
Spacing="25"
Padding="30,0"
VerticalOptions="Center">
<Switch></Switch>
<Image
Source="dotnet_bot.png"
SemanticProperties.Description="Cute dot net bot waving hi to you!"
HeightRequest="200"
HorizontalOptions="Center" />
<Label
Text="Hello, World!"
SemanticProperties.HeadingLevel="Level1"
FontSize="32"
HorizontalOptions="Center" />
<Label
Text="Welcome to .NET Multi-platform App UI"
SemanticProperties.HeadingLevel="Level2"
SemanticProperties.Description="Welcome to dot net Multi platform App U I"
FontSize="18"
HorizontalOptions="Center" />
<Button
x:Name="CounterBtn"
Text="Click me"
SemanticProperties.Hint="Counts the number of times you click"
Clicked="OnCounterClicked"
HorizontalOptions="Center" />
</VerticalStackLayout>
</ScrollView>
</ContentPage>
And Just run on Windows Machine, the app show like this:
If you run it on Android, that text doesn't appears just appears in Windows desktop, i saw in Xamarin you can delete that with ContentOff="" or ContentOn="" but in MAUI you can't, i don't know if i need a library or what, i read all documentation about but i didn't saw nothing about.
Yes, it is a known issue about swich in maui.
And you can follow up the issue here: https://github.com/dotnet/maui/issues/6177 .
Thanks for your feedback about this problem.
Have a nice day.
Related
I have set a background color and text color and some other color properties like disable and unselected colors, but none seem to change the selected item background color.
Which if the properties below will I have to change to make it look the way I want? Or else what do I need to add on my code?
I have the following:
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="Example"
x:Class="TrackBus.AppShell"
FlyoutHeaderBehavior="CollapseOnScroll"
FlyoutBackgroundColor="{StaticResource Primary}">
<Shell.Resources>
<ResourceDictionary>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.ForegroundColor" Value="White" />
<!--Foreground is the menu icon color-->
<Setter Property="Shell.TitleColor" Value="White" />
<Setter Property="Shell.DisabledColor" Value="Magenta" />
<Setter Property="Shell.UnselectedColor" Value="Cyan" />
</Style>
<Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
<Style Class="FlyoutItemLabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="Cyan"></Setter>
</Style>
<Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="BackgroundColor" Value="Magenta"></Setter>
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{StaticResource Secondary}" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Blue"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{StaticResource SecondaryLight}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<Style Class="MenuItemLayoutStyle" 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="{StaticResource SecondaryLight}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ResourceDictionary>
</Shell.Resources>
<Shell.ItemTemplate>
<DataTemplate>
<Grid ColumnDefinitions="60,Auto">
<Image Source="{Binding FlyoutIcon}"
Margin="5"
HeightRequest="35" />
<Label Grid.Column="1"
Text="{Binding Title}"
VerticalTextAlignment="Center"
FontSize="Title"
TextColor="{StaticResource SecondaryLight}" />
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
<Shell.MenuItemTemplate>
<DataTemplate>
<Grid ColumnDefinitions="60,Auto">
<Image Source="{Binding Icon}"
Margin="5"
HeightRequest="35" />
<Label Grid.Column="1"
Text="{Binding Text}"
VerticalTextAlignment="Center"
FontSize="Title"
TextColor="{StaticResource SecondaryLight}"/>
</Grid>
</DataTemplate>
</Shell.MenuItemTemplate>
Primary is dark blue and
SecondaryLight is yellow
Currently I have this:
I want it to look like this:
We need to override the FlyoutItemLayoutStyle ,MenuItemLayoutStyle and modify the value in CommonStates and Selected .
<Style 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="Transparent" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Orange" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Orange" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Black" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<!--
Custom Style you can apply to any Flyout Item
-->
<Style Class="MenuItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Transparent" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Orange" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Orange" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Black" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
What worked for me was to make a custom FloutItemStyle template, just as you did inside your ResourceDictionary, like this:
<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="Orange"/>
<Setter TargetName="_label" Property="Label.TextColor" Value="Black" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
Then, with that template, I changed the flyout item appearance similar to what we can find in the official documentation:
<Shell.ItemTemplate>
<DataTemplate>
<Grid Style="{StaticResource FloutItemStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<Image Source="{Binding FlyoutIcon}"
Margin="10"
HeightRequest="50"
HorizontalOptions="EndAndExpand" />
<Label Grid.Column="1"
Text="{Binding Title}"
TextColor="{StaticResource LightTextColor}"
FontSize="Body"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"
x:Name="_label">
</Label>
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
But the most critical part is to assign a name to the Label with the x:Name="_label" property to be able to find it with the selected target item (TargetName="_label").
Finally I just added my menu item (Even with some FontAwesome icons in my case):
<FlyoutItem Title="MyMenuItem">
<FlyoutItem.Icon>
<FontImageSource
FontFamily="{StaticResource FontAwesomeSolid}"
Size="Large"
Glyph="{x:Static fontawesome:FontAwesomeIcons.User}"
Color="{StaticResource LightTextColor}">
</FontImageSource>
</FlyoutItem.Icon>
<ShellContent ContentTemplate="{DataTemplate local:Index}" />
</FlyoutItem>
Hope this answer helps anyone trying to customize every part of their menus, including label colors.
Early today I've asked for help here because my Xamarin App wasn't working like I expected.
After the help about how to change my Action Bar color, I start wondering "why the way it says on tutorials I've found does not work"
EDIT
<?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:Mobile.XamarinApp.Views"
xmlns:sys="clr-namespace:System;assembly=netstandard"
x:Class="Mobile.XamarinApp.AppShell"
BackgroundColor="{StaticResource Primary}"
Shell.ForegroundColor="{StaticResource Background}"
Shell.TitleColor="{StaticResource Background}">
<!--
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" ApplyToDerivedTypes="True">
<Setter Property="Shell.Title" Value="App" />
<Setter Property="Shell.BackgroundColor" Value="{StaticResource Background}" />
<Setter Property="Shell.ForegroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.TitleColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.DisabledColor" Value="HotPink" />
<Setter Property="Shell.UnselectedColor" Value="{StaticResource Secondary}" />
<Setter Property="Shell.TabBarBackgroundColor" Value="Red" />
<Setter Property="Shell.TabBarForegroundColor" Value="Blue"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="Green"/>
<Setter Property="Shell.TabBarTitleColor" Value="Yellow"/>
<Setter Property="Shell.FlyoutHeight" Value="400"/>
<Setter Property="Shell.FlyoutWidth" Value="200"/>
</Style>
<Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
<Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
<!--
Default Styles for all Flyout Items
https://learn.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#flyoutitem-and-menuitem-style-classes
-->
<Style Class="teste" TargetType="TabbedPage">
<Setter Property="BackgroundColor" Value="Red"/>
</Style>
<Style Class="FlyoutItemLabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource Accent}"></Setter>
</Style>
<Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="BackgroundColor" Value="{StaticResource Primary}"></Setter>
<Setter Property="HeightRequest" Value="50" />
<Setter Property="HorizontalOptions" Value="Start"/>
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{StaticResource Secondary}" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="White" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<!--
Custom Style you can apply to any Menu Item
-->
<Style Class="MenuItemLayoutStyle" 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="{StaticResource Accent}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ResourceDictionary>
</Shell.Resources>
<Shell.FlyoutHeaderTemplate>
<DataTemplate>
<Grid BackgroundColor="{StaticResource Secondary}" HeightRequest="56" Padding="10,0,10,0">
<Label Text="Menu"
TextColor="{StaticResource Primary}"
FontAttributes="Bold"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Start"/>
</Grid>
</DataTemplate>
</Shell.FlyoutHeaderTemplate>
<Shell.FlyoutFooterTemplate>
<DataTemplate>
<StackLayout>
<Label Text="Xaminals"
TextColor="Black"
FontAttributes="Bold"
HorizontalOptions="Center" />
<Label Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='{0:MMMM dd, yyyy}'}"
TextColor="Black"
HorizontalOptions="Center" />
</StackLayout>
</DataTemplate>
</Shell.FlyoutFooterTemplate>
<!-- Splash Screen/Start Page -->
<!--<ShellItem Route="loading">
<ShellContent ContentTemplate="{DataTemplate local:LoadingPage}" />
</ShellItem>-->
<!-- SignIn Page -->
<ShellContent Route="SignInPage" ContentTemplate="{DataTemplate local:SignInPage}"/>
<!--
When the Flyout is visible this defines the content to display in the flyout.
FlyoutDisplayOptions="AsMultipleItems" will create a separate flyout item for each child element
https://learn.microsoft.com/dotnet/api/xamarin.forms.shellgroupitem.flyoutdisplayoptions?view=xamarin-forms
-->
<FlyoutItem Title="Browse">
<ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />
</FlyoutItem>
<FlyoutItem Title="About">
<ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
</FlyoutItem>
<FlyoutItem Title="Cadastro">
<ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />
</FlyoutItem>
<!-- When the Flyout is visible this will be a menu item you can tie a click behavior to -->
<MenuItem Text="Sair" StyleClass="MenuItemLayoutStyle" Clicked="OnSignOutMenuItemClicked">
</MenuItem>
<!--
TabBar lets you define content that won't show up in a flyout menu. When this content is active
the flyout menu won't be available. This is useful for creating areas of the application where
you don't want users to be able to navigate away from. If you would like to navigate to this
content you can do so by calling
await Shell.Current.GoToAsync("//LoginPage");
-->
<!-- Optional Templates
// These may be provided inline as below or as separate classes.
// This header appears at the top of the Flyout.
// https://learn.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#flyout-header
<Shell.FlyoutHeaderTemplate>
<DataTemplate>
<Grid>ContentHere</Grid>
</DataTemplate>
</Shell.FlyoutHeaderTemplate>
// ItemTemplate is for ShellItems as displayed in a Flyout
// https://learn.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#define-flyoutitem-appearance
-->
<!--<Shell.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Text="{Binding Title}"
FontAttributes="Italic"
VerticalTextAlignment="Center" />
</Grid>
</DataTemplate>
</Shell.ItemTemplate>-->
<!--
// MenuItemTemplate is for MenuItems as displayed in a Flyout
// https://learn.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#define-menuitem-appearance
-->
<!--<Shell.MenuItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Text="{Binding Text}"
FontAttributes="Italic"
VerticalTextAlignment="Center" />
</Grid>
</DataTemplate>
</Shell.MenuItemTemplate>-->
While I stand for the configuration of Shell on those 3 lines, it does not work.
<Setter Property="Shell.BackgroundColor" Value="{StaticResource Background}" />
<Setter Property="Shell.ForegroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.TitleColor" Value="{StaticResource Primary}" />
After getting help, the 3 last lines shell config at the header, made it work.
BackgroundColor="{StaticResource Primary}"
Shell.ForegroundColor="{StaticResource Background}"
Shell.TitleColor="{StaticResource Background}"
The question is, am I doing something wrong? Did I miss something?
I just want to change the color of my Tabbar, action bar and etc from my Shell.Resources Dictionary like the tutorials shows us to do.
thanks in advance
You probably have to Target ShellContent type also:
<Style TargetType="ShellContent" BasedOn="{StaticResource BaseStyle}"/>
As you can see below, the FlyoutItem has an Icon and a Title.
<FlyoutItem Title="About" >
<FlyoutItem.Icon>
<FontImageSource FontFamily="MaterialDesignIconFont"
Glyph="{StaticResource InformationOutlineGlyph}"
Color="Green" />
</FlyoutItem.Icon>
<ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
</FlyoutItem>
The Title Color changes automatically because of this Style:
<Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="BackgroundColor" Value="LightBlue"></Setter>
<Setter Property="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 PrimaryColor}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{StaticResource PrimaryColor}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
So the Label that is the Title changes color automatically when the FlyoutItem is selected. I need the Icon to do the same thing. I could use a trigger to set the FontImageSource but that comes with its own problems.
Given the TargetName "FlyoutItemLabel" from the above Style, is it possible to create a binding from the FontImageSource.Color to each FlyoutItem's "FlyoutItemLabel".Color? It would have to bind upward to the FlyoutItem ancestor, then downward to the <Label x:Name="FlyoutItemLabel" />, wouldn't it?
You could set the [ItemTemplate][1] of FlyoutItem as you want
<Shell.ItemTemplate>
<DataTemplate >
<Grid Style="{StaticResource FloutItemStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.8*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding xxx}"
Margin="5"
BackgroundColor="{Binding Source={x:Reference label} ,Path=BackgroundColor}"
HeightRequest="45" />
<Label Grid.Column="1"
x:Name="label"
BackgroundColor="Red"
Text="{Binding Title}"
FontAttributes="Italic"
VerticalTextAlignment="Center" />
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
I'm working on a UWP app. I'm already using adaptive triggers to adapt my xaml depending on the width of the window, and it works.. only in a Page.
Now I want to do the same for the xaml of a User Control, and it's not working .. Yet I put the VisualStateManager to root grid of the user control.
Is there a difference ?
Here's the code of my user control :
<UserControl
x:Class=.....>
<UserControl.Resources>
<ResourceDictionary>
<vm:ViewModelLocator x:Key="Locator"/>
<converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</ResourceDictionary>
</UserControl.Resources>
<UserControl.DataContext>
<Binding Path="MyUserControlVM" Source="{StaticResource Locator}"/>
</UserControl.DataContext>
<Grid x:Name="LayoutRoot" Background="white">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="LastName.Foreground" Value="Red" />
<Setter Target="LastName.Fontsize" Value="10" />
<Setter Target="FirstName.Foreground" Value="Red"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Normal">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="LastName.Foreground" Value="Red" />
<Setter Target="LastName.Fontsize" Value="25" />
<Setter Target="FirstName.Foreground" Value="Red"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1000"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="LastName.Foreground" Value="Red" />
<Setter Target="FirstName.Foreground" Value="Red"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Listbox>
...
</ListBox>
<TextBlock x:Name="lblNoData" Grid.ColumnSpan="2" Text="No Data" Visibility="{Binding NoDataVisible, Converter={StaticResource BooleanToVisibilityConverter}}"/>
<ProgressRing x:Name="prLoading" Width="60" Height="60" Foreground="Blue" IsActive="{Binding InitializationNotifier.IsNotCompleted}" />
</Grid>
("LastName" and "FirstName" are textblocks in the DataTemplate of my listbox. I'm just trying to put my text in red in order to see when the triggers work)
And I call the user control in a simple page like this :
<Grid x:Name="LayoutRoot" Background="{StaticResource white}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Margin="0,0,0,10">
...
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="10,0">
<UC:MyUserControl/>
</Grid>
</Grid>
I don't understand why this code won't work. Thank you in advance for your help !
("LastName" and "FirstName" are textblocks in the DataTemplate of my listbox. I'm just trying to put my text in red in order to see when the triggers work)
You can refer to my another answer here, as I said in that answer, when the controls are placed in the DataTemplate, they becomes the visual structure of your data objects. I think there is no clean way to do this work only in the xaml code, Data Binding here is your friend.
From your code I can see that you want to change the Foreground (but all to Red?) and the FontSize of the TextBlocks inside of the DataTemplate depending on the window's size. So you can bind these two proprieties to the window's size, or you can use ItemsControl.ItemTemplateSelector to select different template when the window's size is changed.
I want to use the VisualStateManager to change the appearance of my listbox items. I created a simplified example. When the listbox or listbox items got only space for width = 500 it should set for example the background to Beige otherwise to Green.
I tried the following and some other variations but neither of them worked. Has anyone a idea how to fix this?
<ListBox Grid.Column="0">
<ListBoxItem>asdfasf</ListBoxItem>
<ListBoxItem>fasf</ListBoxItem>
<ListBoxItem>fasf</ListBoxItem>
<ListBoxItem>asdsf</ListBoxItem>
<ListBoxItem>aasf</ListBoxItem>
<ListBox.ItemTemplate>
<DataTemplate>
<ContentControl>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="visualStateGroup" >
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="500" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="PathTextBlock.Text" Value="a" />
<Setter Target="border.Background" Value="Beige" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="PathTextBlock.Text" Value="b" />
<Setter Target="border.Background" Value="Green" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl.Content>
<Border x:Name="border" >
<TextBlock x:Name="PathTextBlock" Text="{Binding RelativeSource={RelativeSource Mode=None}}" />
</Border>
</ContentControl.Content>
</ContentControl>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I tried to adopt:
https://stackoverflow.com/a/32092547/740651
The easiest way I find to do this is to create a UserControl of your DataTemplate code. So something like this
<UserControl x:class="MyListBoxControl">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="visualStateGroup" >
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="500" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="PathTextBlock.Text" Value="a" />
<Setter Target="border.Background" Value="Beige" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="PathTextBlock.Text" Value="b" />
<Setter Target="border.Background" Value="Green" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="border" >
<TextBlock x:Name="PathTextBlock" Text="{Binding RelativeSource={RelativeSource Mode=None}}" />
</Border>
</Grid>
</UserControl>
and then add to your ListBox ItemTemplate. The Visual States will then work accordingly. Note you will need to create a reference to where your UserControls are stored at the top of your page something like xmlns:myUserControls="[location of your controls]"
<ListBox Grid.Column="0">
<ListBoxItem>asdfasf</ListBoxItem>
<ListBoxItem>fasf</ListBoxItem>
<ListBoxItem>fasf</ListBoxItem>
<ListBoxItem>asdsf</ListBoxItem>
<ListBoxItem>aasf</ListBoxItem>
<ListBox.ItemTemplate>
<DataTemplate>
<myUserControls:MyListBoxControl />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Usually we don’t manipulate the ListBox's item directly, the common way is adding the items to the ObservableCollection and set ItemSource property of ListBox to bind to the ObservableCollection.
If you use the ItemSource, you can use the UserControl like #SWilko said. But it does not need to use the RelativeSource.
For example, I create a Person class, and it has a property Name. I use <TextBlock x:Name="PathTextBlock" Text="{Binding name}" /> replace <TextBlock x:Name="PathTextBlock" Text="{Binding RelativeSource={RelativeSource Mode=None}}" />.
If you want to add the ListBox’s item directly, and use the VisualStateManager to change the appearance of the ListBox items. You can edit the ItemContainerStyle.
To modify the template of ListBoxItem, we can select the ListBox in "Document Outline" and right click, then select "Edit Additional Templates"→ "Edit Generated Item Container (ItemContainerStyle)" → "Edit a Copy...".
You can create a VisualStateGroup into the <VisualStateManager.VisualStateGroups>.
For example:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
...
</VisualStateGroup>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="PathTextBlock.Text" Value="a" />
<Setter Target="border.Background" Value="Beige" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="PathTextBlock.Text" Value="b" />
<Setter Target="border.Background" Value="Green" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
And you can edit the ContentPresenterlike:
<ContentPresenter x:Name="ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Style="{StaticResource BodyContentPresenterStyle}" TextWrapping="NoWrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Border Name="border">
<TextBlock Name="PathTextBlock" Text="{TemplateBinding Content}"></TextBlock>
</Border>
</ContentPresenter>
By the way, you set the MinWindowWidth property to 500 of AdaptiveTrigger, the effect will not obvious. You can set it to 600.