I have the following LAFs ("Look And Feel" ,From Java's Swing) in two different projects :
Type 1 :
Type 2 :
I would like to know how I can switch between these and other LAFs.
Thanks in advance.
The easiest, most maintainable method that I'm aware of for quickly swapping in different visual styles is to use Styles in an external ResourceDictionary. For the example below you would create a new solution folder called 'Skins', then add a new class called 'MainSkin.xaml'.
MainWindow.xaml
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Skins/MainSkin.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<TextBlock Style="{StaticResource TextBlockV1}" Text="This is some text." />
</Grid>
Skins\MainSkin.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="TextBlockV1" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="Comic Sans MS" />
<Setter Property="FontSize" Value="14" />
</Style>
<Style x:Key="TextBlockV2" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="FontFamily" Value="Courier New" />
<Setter Property="FontSize" Value="30" />
</Style>
<Style x:Key="TextBlockV3" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="FontFamily" Value="Times New Roman" />
<Setter Property="FontSize" Value="8" />
</Style>
</ResourceDictionary>
Change look and feel in WPF application?
This directs you to WPF Toolkit which shows you how to set themes in the xml for a page.
Related
I have read a lot of questions about this, but all of this questions was about VM models, and i dont have the VM model, i am trying to change the language of my application with a ResourceDictionary as is explained in this post.
How to change language in WPF/XAML
and also i saw a lot of examples without specify any key https://learn.microsoft.com/es-es/dotnet/framework/wpf/advanced/how-to-use-a-resourcedictionary-to-manage-localizable-string-resources
and i dont get what i am doing wrong, this is the xaml resource
<Window.Resources>
<Style x:Key="titulo" TargetType="TextBlock" BasedOn="{StaticResource Encabezado}">
<Setter Property="Margin" Value="20"/>
<Setter Property="Foreground" Value="White"/>
</Style>
<Style x:Key="tipoBase" TargetType="TextBlock">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Margin" Value="10"/>
</Style>
<Style x:Key="imagenTitulo" TargetType="Image">
<Setter Property="Height" Value="200"/>
<Setter Property="Source" Value="/images/asistente.jpg" />
</Style>
<Style x:Key="narracion" TargetType="TextBlock" BasedOn="{StaticResource tipoBase}">
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="TextAlignment" Value="Center"/>
</Style>
<Style x:Key="botonSalirInicio" TargetType="Button" BasedOn="{StaticResource botonSalir}">
<Setter Property="Height" Value="50"/>
<Setter Property="Width" Value="50"/>
<Setter Property="Margin" Value="0 0 10 0"/>
</Style>
<ResourceDictionary>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Idiomas/IdiomasLogin.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</ResourceDictionary>
</Window.Resources>
The resource file
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ElEscribaDelDJ"
xmlns:system="clr-namespace:System;assembly=System.Runtime">
<system:String x:Key="Titulo">Bienvenido a "el escriba del DJ"</system:String>
<system:String x:Key="NarraciĆ³n">a</system:String>
<system:String x:Key="User">Usuario:</system:String>
<system:String x:Key="UserText">Introduzca el nombre de usuario:</system:String>
<system:String x:Key="CheckUser">Recordar Usuario:</system:String>
<system:String x:Key="CheckLogin">Recordar Login:</system:String>
<system:String x:Key="License">Este producto esta bajo la licencia</system:String>
<system:String x:Key="Credits">Creditos</system:String>
</ResourceDictionary>
Other weird thing is that i cant use clr-namespace:System;assembly=mscorlib, when i try to use it, always get an error
Properties of the ResourceDictionary
Embebed Resource
Custom tool: XamlIntelliSenseFileGenerator
and lastly the textblock
<TextBlock Style="{DynamicResource titulo}" x:Name="titulo" Text="{DynamicResource Titulo}"/>
you should put all styles into one ResourceDictionary. at the moment you have too many <ResourceDictionary> declarations, and the outer-most is treated as Resource but doesn't have x:Key, hense the error.
rewrite it like this (<ResourceDictionary.MergedDictionaries> can be written first)
<Window.Resources>
<ResourceDictionary>
<!--<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Idiomas/IdiomasLogin.xaml"/>
</ResourceDictionary.MergedDictionaries>-->
<Style x:Key="titulo" TargetType="TextBlock" BasedOn="{StaticResource Encabezado}">
<Setter Property="Margin" Value="20"/>
<Setter Property="Foreground" Value="White"/>
</Style>
<Style x:Key="tipoBase" TargetType="TextBlock">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Margin" Value="10"/>
</Style>
<Style x:Key="imagenTitulo" TargetType="Image">
<Setter Property="Height" Value="200"/>
<Setter Property="Source" Value="/images/asistente.jpg" />
</Style>
<Style x:Key="narracion" TargetType="TextBlock" BasedOn="{StaticResource tipoBase}">
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="TextAlignment" Value="Center"/>
</Style>
<Style x:Key="botonSalirInicio" TargetType="Button" BasedOn="{StaticResource botonSalir}">
<Setter Property="Height" Value="50"/>
<Setter Property="Width" Value="50"/>
<Setter Property="Margin" Value="0 0 10 0"/>
</Style>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Idiomas/IdiomasLogin.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
In App.xaml I have styled all my Buttons.
<Style TargetType="Button">
<Setter Property="Margin" Value="3"/>
</Style>
I realized if the Button is in a DataGrid then I not need a margin. I have a lot of DataGrid and I put this code into all of them one by one.
<DataGrid.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="0"/>
</Style>
</DataGrid.Resources>
Is there a more clever way to do this?
You can define Style for DataGrid and within that, add child control style to particular modification.
If you want to add this Style to all the DataGrids, no need to defineKey.
<Style x:Key="dataGrid" TargetType="DataGrid">
<Style.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="0" />
</Style>
</Style.Resources>
</Style>
Declare a style with the key in the Window.Resources or App.Resources as shown below.
<Window.Resources>
<Style TargetType="Button" x:Key="dataGridButtonStyle">
<Setter Property="Margin" Value="3"/>
<Setter Property="Background" Value="Wheat"/>
</Style>
</Window.Resources>
Then apply the style to the control using the StaticResource with the key(in this example key name is dataGridButtonStyle)
<Button Style="{StaticResource ResourceKey= dataGridButtonStyle}" Content="Hello"/>
Please add resource file at Windows or User control level so that it will apply all child controls as below,
<Window.Resources>
<Style TargetType="DataGrid">
<Style.Resources>
<Style TargetType="Button">
<Setter Property="Background" Value="Red" />
<Setter Property="Margin" Value="0" />
</Style>
</Style.Resources>
</Style>
<Window.Resources>
or
<UserControl.Resources>
<Style TargetType="DataGrid">
<Style.Resources>
<Style TargetType="Button">
<Setter Property="Background" Value="Red" />
<Setter Property="Margin" Value="0" />
</Style>
</Style.Resources>
</Style>
</UserControl.Resources>
I create an UWP App and define some styles like this:
<Style TargetType="TextBlock" >
<Setter Property="Foreground" Value="Orange" />
<Setter Property="Margin" Value="12" />
<Setter Property="FontSize" Value="18" />
So, all my TextBlocks are orange and have a margin of 12px. All fine. But now I want to define a second style for Headlines, which should be inherit the base style and just override the extra defined properties, like this:
<Style x:Key="HeadlineStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="32" />
But if I do it this way, all other style definitions are gone (no margin, no coloring).
So how could I keep the base style?
In WPF I can use the x:Type attribute and just say
BasedOn="{StaticResource {x:Type Button}}"
But x:Type are not available in UWP (and what I found it is no longer supported)
This does exactly what you want:
<Grid.Resources>
<Style TargetType="TextBlock" x:Key="medium">
<Setter Property="Foreground" Value="Orange"/>
<Setter Property="FontSize" Value="20"/>
</Style>
<Style TargetType="TextBlock" BasedOn="{StaticResource medium}">
<Setter Property="FontSize" Value="10"/>
</Style>
<Style TargetType="TextBlock" x:Key="bigger" BasedOn="{StaticResource medium}">
<Setter Property="FontSize" Value="30"/>
</Style>
</Grid.Resources>
<StackPanel>
<TextBlock Text="normal"/>
<TextBlock Text="medium" Style="{StaticResource medium}"/>
<TextBlock Text="bigger" Style="{StaticResource bigger}"/>
</StackPanel>
The first TextBlock is 10-px orange
The second TextBlock is 20-px orange
The third TextBlock is 30-px orange
I'm starting to use styles in WPF. I'm using MahApps styles as a base, which so far has been really good. I've been able to make specific modifications using the BasedOn property.
One of the simpler changes is to add a default margin so when adding controls they don't touch. It's worked really well so far until I tried to use the MetroCheckBox. With this specific control it throws an xaml parse exception: "Cannot find resource named 'MetroCheckBox'. Resource names are case sensitive."
I had a look in the source code, trying to track down this issue and coppied the name directly from the GitHub:
https://github.com/MahApps/MahApps.Metro/blob/master/MahApps.Metro/Styles/Controls.CheckBox.xaml
It's definately and all my other controls work fine:
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource MetroButton}">
<Setter Property="Margin" Value="2"/>
</Style>
<Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource MetroComboBox}">
<Setter Property="Margin" Value="2"/>
</Style>
<Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource MetroCheckBox}">
<Setter Property="Margin" Value="2"/>
</Style>
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource MetroTextBox}">
<Setter Property="Margin" Value="2"/>
</Style>
Any ideas on how to fix this?
Note, I'm including the reference to the styles like so:
<Application
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:extra="http://schemas.extra.com/ui"
xmlns:system="clr-namespace:System;assembly=mscorlib"
xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:Primitives="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
xmlns:Custom="http://metro.mahapps.com/winfx/xaml/controls"
x:Class="MyApp.App"
StartupUri="/MyApp;component/GUI/Window/Window3.xaml"
>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseDark.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource MetroButton}">
<Setter Property="Margin" Value="2"/>
</Style>
<Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource MetroComboBox}">
<Setter Property="Margin" Value="2"/>
</Style>
<!--<Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource MetroCheckBox}">
<Setter Property="Margin" Value="2"/>
</Style>-->
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource MetroTextBox}">
<Setter Property="Margin" Value="2"/>
</Style>
<!--Chart Style-->
<Style TargetType="{x:Type chartingToolkit:Chart}
...
</Style>
<!--Top Tab Item-->
<Style x:Key="TopTabItemStyle" TargetType="{x:Type TabItem}" BasedOn="{StaticResource {x:Type TabItem}}">
...
</Style>
<!--Tab Item-->
<Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource MetroTabItem}">
...
</Style>
<!-- Group Box-->
<Style TargetType="{x:Type GroupBox}" BasedOn="{StaticResource MetroGroupBox}">
<!--<Setter Property="Margin" Value="5"/>
<Setter Property="Padding" Value="5"/>
<Setter Property="Foreground" Value="{DynamicResource BlackBrush}"/>
<Setter Property="Background" Value="{DynamicResource AccentColorBrush}"/>
<Setter Property="BorderBrush" Value="{DynamicResource AccentColorBrush}"/>
<Setter Property="Custom:ControlsHelper.HeaderFontSize" Value="{DynamicResource ContentFontSize}"/>
<Setter Property="Custom:GroupBoxHelper.HeaderForeground" Value="{x:Null}"/>-->
<Setter Property="Custom:ControlsHelper.HeaderFontWeight" Value="SemiBold"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupBox}">
<Grid x:Name="GroupBoxRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,0,2" Background="Transparent" Grid.Row="0">
<ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" TextElement.FontWeight="{TemplateBinding Custom:ControlsHelper.HeaderFontWeight}" TextElement.FontStretch="{TemplateBinding Custom:ControlsHelper.HeaderFontStretch}" TextElement.FontSize="{TemplateBinding Custom:ControlsHelper.HeaderFontSize}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True"/>
</Border>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Background="Transparent" Grid.Row="1">
<ContentPresenter Cursor="{TemplateBinding Cursor}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Application.Resources>
You are missing the required ResourceDictionary to bring in the styles for the MahApps. You can do by including the ResourceDictionary definition in the XAML of either the XAML file where you are composing your view or you can add it to the APP.XAML file - the later will give you better performance in the short term.
For example: here is the MahApps controls xaml included with other MahApps resource dictionaries, the controls xaml is the one you need in this case:
<Application x:Class="MyApp"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
I ran it today and it works fine:
<Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource MetroComboBox}">
<Setter Property="Margin" Value="2"/>
</Style>
As far as I can tell I've changed nothing to do with the project or references.
However, in the last few days Visual Studio had corrupted somehow with the designer throwing exceptions left right and center, solution explorer failing to display anything (was fixed after clearing Component Model Cache) and NuGet failing to work for me to check the MahApps version.
So I set off the installer on a repair install, and now the style works fine.
I have no idea if these are connected... but they may be, so I'll leave this up as an answer in case anyone else comes across this same issue.
This can be caused if you upgrade from a version of MahApps prior to 2.0 to a more recent version.
For more details, see:
mahapps.com: Migration to v2.0 - MahApps.Metro
https://mahapps.com/docs/guides/migration-to-v2.0
I want to implement application level resources in my pages, but seems it's not working.
App.xaml:
<Application.Resources>
<Style TargetType="phone:PhoneApplicationPage">
<Setter Property="Background" Value="White" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="shell:SystemTray.ForegroundColor" Value="Black"></Setter>
<Setter Property="shell:SystemTray.BackgroundColor" Value="Transparent"></Setter>
<Setter Property="shell:SystemTray.Opacity" Value="0.5"></Setter>
</Style>
</Application.Resources>
The Page
<phone:PhoneApplicationPage
...
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True" >
</phone:PhoneApplicationPage>
I would like the system tray should look the way its styled in App.xaml, but it doesn't.
Thanks!
Application-wide implicit styles work on Windows Phone since Mango. The thing you need to remember is that implicit style is applied to TargetType only, not to its descendants. Your Pages are new classes that inherit from PhoneApplicationPage. What will work is:
<Application.Resources>
<Style TargetType="local:MainPage">
<Setter Property="Foreground" Value="Black" />
<Setter Property="shell:SystemTray.ForegroundColor" Value="Black"/>
</Style>
</Application.Resources>
But obviously you would have to define that for every Page in your project, which makes it useless. For Pages it's best to use Explicit Styles (with x:Key):
<Application.Resources>
<Style x:Key="PageStyle" TargetType="phone:PhoneApplicationPage">
<Setter Property="Foreground" Value="Black" />
<Setter Property="shell:SystemTray.ForegroundColor" Value="Black"/>
</Style>
</Application.Resources>
and for every Page in your project simply:
<phone:PhoneApplicationPage
Style="{StaticResource PageStyle}"