Develop Reference

Is there a way to change the style basedon property programmatically?

I have the below code which is basically the default tabbed view with an added style that sets back color to green instead of the dynamic primary.
<Shell.Resources>
<ResourceDictionary>
<Style x:Key="BaseStyle" TargetType="Element" >
<Setter Property="Shell.BackgroundColor" Value="{DynamicResource 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="{DynamicResource Primary}" />
<Setter Property="Shell.TabBarForegroundColor" Value="White"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
<Setter Property="Shell.TabBarTitleColor" Value="White"/>
</Style>
<Style x:Key="GreenStyle" TargetType="Element" >
<Setter Property="Shell.BackgroundColor" Value="Green" />
<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="Green" />
<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>
I want to know if it is possible to change the TabBar BasedOn property programmatically to the GreenStyle. Such as:
*Trigger*
{
TabBar.BasedOn = GreenStyle;
}
But in a way that actually works.
I am asking because it does not seem to work dynamically due to the static nature of it and it will not let me change it to a:
<Style TargetType="TabBar" BasedOn="{DynamicResource BaseStyle}" />
Any workarounds accepted so long as I can change the color/style to green from whatever color it is set to and back. I am very new to Xamarin forms.

Is there a way to change the style basedon property programmatically?
For this, you can use Dynamic Styles to achieve this function.
Applications can respond to style changes dynamically at runtime by using dynamic resources.
You can refer the following code:
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="baseStyle" TargetType="View">
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
</Style>
<Style x:Key="blueSearchBarStyle" TargetType="SearchBar" BasedOn="{StaticResource baseStyle}">
<Setter Property="FontAttributes" Value="Italic" />
<Setter Property="PlaceholderColor" Value="Blue" />
</Style>
<Style x:Key="greenSearchBarStyle" TargetType="SearchBar">
<Setter Property="FontAttributes" Value="None" />
<Setter Property="PlaceholderColor" Value="Green" />
</Style>
<Style x:Key="buttonStyle" TargetType="Button" BasedOn="{StaticResource baseStyle}">
<Setter Property="FontSize" Value="Large" />
<Setter Property="TextColor" Value="Red" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Padding="0,20,0,0">
<SearchBar Placeholder="These SearchBar controls" Style="{DynamicResource searchBarStyle}" />
<SearchBar Placeholder="are demonstrating" Style="{DynamicResource searchBarStyle}" />
<SearchBar Placeholder="dynamic styles," Style="{DynamicResource searchBarStyle}" />
<SearchBar Placeholder="but this isn't dynamic" Style="{StaticResource blueSearchBarStyle}" />
<Button Text="Change Style" Style="{StaticResource buttonStyle}" Clicked="OnButtonClicked" />
</StackLayout>
</ContentPage.Content>
The xaml.cs code is :
public partial class DynamicStylesPage : ContentPage
{
bool originalStyle = true;
public DynamicStylesPage ()
{
InitializeComponent ();
Resources ["searchBarStyle"] = Resources ["blueSearchBarStyle"];
}
void OnButtonClicked (object sender, EventArgs e)
{
if (originalStyle) {
Resources ["searchBarStyle"] = Resources ["greenSearchBarStyle"];
originalStyle = false;
} else {
Resources ["searchBarStyle"] = Resources ["blueSearchBarStyle"];
originalStyle = true;
}
}
}
For more details,please check document Dynamic Styles in Xamarin.Forms.
And there is a sample included in above ducument, you can check it here:https://learn.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-styles-dynamicstyles/

Adding one WPF style property kills all other style properties

I've a style for my WPF buttons, defined in the main window:
<Window.Resources>
<Style TargetType="Button">
<Setter Property="Width" Value="Auto" />
<Setter Property="Height" Value="Auto" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="Background" Value="#3fa9f5" />
...
</Style>
</Window.Resources>
In an UserControl, I want to set the content and the background depending on a binding:
<Button.Style>
<Style TargetType="Button">
<Setter Property="Content" Value="Text123" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=myControl, Path=IsHidden}"
Value="true">
<Setter Property="Content" Value="TextABC" />
<Setter Property="Background" Value="#ff1d25" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
The problem: The button in the UserControl looses all other properties it gets from the main window style (color, width, margins, ...).
I tried to let the UserControl button's style know the parent style via
BasedOn="{StaticResource {x:Type Button}}"
but with no result.

Setting AutoCompleteBox ListBox SelectedItem Background Color

I'm using WPFToolkit's AutoCompleteBox, and I need to change the selected item background color, but I can't do it. I can change the font styling, font size, just not the background.
I've tried many solutions from SO, however none of them worked. What I've tried so far:
Change background color for selected ListBox item
Changing WPF Listbox SelectedItem text color and highlight/background Color using C#
Using a trigger to change the selecteditem's background dynamically
<Style x:Key="myLBStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="IndianRed" />
<Setter Property="Foreground" Value="WhiteSmoke" />
<Setter Property="Margin" Value="0" />
<Setter Property="FontSize" Value="22" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" Value="Chartreuse" />
<Setter Property="FontStyle" Value="Italic" />
<Setter Property="Foreground" Value="Chartreuse" />
</Trigger>
</Style.Triggers>
</Style>
<local:FocusableAutoCompleteBox x:Name="ACBox" Margin="10,32,10,0"
Grid.Row="2" FontSize="27" Grid.ColumnSpan="4" Foreground="#FF333333"
Background="#FF1700FF" BorderThickness="2" TextChanged="_ACBox_TextChanged"
KeyDown="ACBox_KeyDown" Focusable="True" MinimumPopulateDelay="100"
MinimumPrefixLength="1" ItemContainerStyle="{DynamicResource ResourceKey=myLBStyle}">
I've also tried overriding system colours:
<Style x:Key="myLBStyle" TargetType="ListBoxItem">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Green" />
</Style.Resources>
<Setter Property="Background" Value="IndianRed" />
<Setter Property="Foreground" Value="WhiteSmoke" />
<Setter Property="Margin" Value="0" />
<Setter Property="FontSize" Value="22" />
</Style>
I can successfully set other properties with the trigger. I can set the selecteditem's font italic, bold, larger, smaller, but I cannot change the selected item's background colour.

<Style x:Key="myLBStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="IndianRed" />
<Setter Property="Foreground" Value="WhiteSmoke" />
<Setter Property="Margin" Value="0" />
<Setter Property="FontSize" Value="22" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter></ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" Value="Chartreuse" />
<Setter Property="FontStyle" Value="Italic" />
<Setter Property="Foreground" Value="Chartreuse" />
</Trigger>
</Style.Triggers>
</Style>

Set tooltip max width style

Ok, i know my question might be super dumb- but i couldn't find the solution my self- so here i am- asking your help:
in wpf i have a DataGrid with different styles.
now, i need to set the tooltip max width.
this is my DataGridCell style:
<Style TargetType="DataGridCell" x:Key="MyDataGridCellStyle">
<EventSetter Event="PreviewMouseLeftButtonDown" Handler="DataGridCell_PreviewMouseLeftButtonDown" />
<EventSetter Event="PreviewTextInput" Handler="DataGridCell_PreviewTextInput" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Background" Value="White" />
<Setter Property="FontFamily" Value="Arial" />
<Setter Property="Validation.ErrorTemplate" Value="{x:Null}"/>
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self},Path=Content.Text}"/>
</Style>
how do i add to the tooltip the max width style?

Try this please
Keep this code
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self},Path=Content.Text}"/>
and add this to your datagrid
<DataGrid.Resources>
<Style TargetType="ToolTip">
<Setter Property="MaxWidth" Value="20" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<ContentPresenter Content="{TemplateBinding Content}" >
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="TextWrapping" Value="Wrap" />
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.Resources>

Is what you tried to put your tooltip in a textblock
<Setter Property="ToolTip">
<Setter.Value>
<TextBlock MaxWidth="..." TextWrapping="Wrap" Text ="{Binding RelativeSource={RelativeSource Self},Path=Content.Text}"/>
</Setter.Value>
</Setter>

while Inherit style in WPF it affect parent style

In WPF i have a style for the control like below,
<Style TargetType="local:CustomControl">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Gray" />
<Setter Property="BorderThickness" Value="0,0,0,1" />
<Setter Property="Padding" Value="3,0,3,0" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
Now i need to override customcontrol border for some other place like below,
<Style TargetType="local:CustomControl" BasedOn="{StaticResource {x:Type local:CustomControl}}">
<Setter Property="BorderThickness" Value="1" />
</Style>
My problem is when i am using above code it override the 1st written code. is my code is correct.
Note: the base style is only written with target type. i need to override that control border in some other place without affect base code.
is it possible ? please help me to resolve this problem.
thanks in advance.

If you declare a Style without an x:Key, it will override the default style for that control.
<Style TargetType="local:CustomControl">
So the code above will effect all CustomControl elements throughout the entire application (or within the scope).
If you do not want to override the base style, you can give your Style an x:Key, like so:
<Style TargetType="local:CustomControl" x:Key="MyAwesomeStyle">
When you create your control, you will then have to reference the Style. Here's an example:
<local:CustomControl Style="{DynamicResource MyAwesomeStyle}" ... />

Accidentally I saw some example which can be useful in solving the mentioned problem. In your example own custom control has been used, in my example - a button.
<Grid>
<Button Style="{StaticResource AddButtonStyle}" Tag="Add" Click="addClick" />
</Grid>
Code for AddButtonStyle:
<Style x:Key="AddButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">
<Setter Property="Content" Value="✅"/>
</Style>
AddButtonStyle based on AppBarButtonStyle. Below code for it.
<Style x:Key="AppBarButtonStyle" TargetType="Button">
<Setter Property="MinWidth" Value="40" />
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="88" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontFamily" Value="Segoe UI Symbol" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">. . .
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
On this example base, you must declare a Style with an x:Key, and should not set any value to Content (in you example BorderThickness) property in the inherited style.