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}"
Related
This question already has answers here:
How do you change Background for a Button MouseOver in WPF?
(6 answers)
Closed last month.
I don't understand why this doesn't change the Background and Foreground while hovering the Button. It changes the CornerRadius of the Border tho.
ButtonStyle.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="Button" x:Key="RoundedCorners">
<Style.Resources>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
<Setter Property="Foreground" Value="Green"/>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="5"/>
</Style>
</Style.Resources>
</Style>
</ResourceDictionary>
LoginView.xaml
<Button Height="50"
Width="200"
Style="{StaticResource RoundedCorners}">
LOGIN
</Button>
In WPF, an explicit Style set locally through Style={StaticResource StyleKey} takes precedence over an implicit style matched through a TargetType, as detailed here.
Hence, only the outer Style is applied to your Button because it's given a key and epxlicitly set.
To fix it, you should meger the inner Style into the keyed Style like this:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="Button" x:Key="RoundedCorners">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
<Setter Property="Foreground" Value="Green"/>
</Trigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="5"/>
</Style>
</Style.Resources>
</Style>
</ResourceDictionary>
This will properly change the Foreground when you hover it. The Background will still not change, but that's an entire different problem.
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>
In my application I'm using ResourceDictionaries for styles. Example:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="{x:Type Button}" x:Key="SimpleButton">
<Setter Property="Foreground" Value="{DynamicResource SpecialRed}"/>
<Setter Property="FontSize" Value="40"/>
<Setter Property="Margin" Value="10"/>
</Style>
</ResourceDictionary>
Lets say that as a user I know how resource dictionary look like. Is it possible to overwrite the resource from my own file from HDD? I want to add the functionality which allows user to do this.
My HDD file:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="{x:Type Button}" x:Key="SimpleButton">
<Setter Property="Foreground" Value="{DynamicResource SpecialRed}"/>
<Setter Property="FontSize" Value="70"/>
<Setter Property="Margin" Value="20"/>
</Style>
</ResourceDictionary>
If you insist on doing that (I wouldn't), you can merge resource dictionaries at runtime: Dynamically loading resource dictionary files to a wpf application gives an error
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.
So I have a Master Detail page. And in my Master page I have a style that will set the style for all buttons.
Master Page
<Style TargetType="Button">
<Setter Property="Background" Value="White" />
<Setter Property="TextBlock.TextAlignment" Value="Center" />
<Setter Property="RenderTransformOrigin" Value="-0.893,-11.7"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
in my Detail Page I have a button where I would like to add some triggers to through the style
<Button Content="{Binding DeleteMultipleButton}" Margin="0,0,5,0" CommandParameter="{Binding ElementName=files, Path=SelectedItems}" Command="{Binding DeleteMultipleFiles}">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="IsEnabled" Value="True"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Deleting}" Value="True">
<Setter Property="IsEnabled" Value="False"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
But this overwrites the inherited style and I lose my button styling. Is there a way I can base my button style on the inherited style? (I can't do this through static resource and a key because the resource is in a different page)
You can use the BasedOn property:
<Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
Keep your base button style as it is:
<Style TargetType="Button">
<Setter Property="Background" Value="White" />
<Setter Property="TextBlock.TextAlignment" Value="Center" />
<Setter Property="RenderTransformOrigin" Value="-0.893,-11.7"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
And apply the BasedOn property to the button on the Detail Page:
<Button>
<Button.Style>
<Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
...
</Style>
</Button.Style>
</Button>
So Because the two styles were on different pages it makes inheriting from the default style impossible so what I did was build an App.xaml resource file with my style in it and then on both pages add the code:
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resource.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
to my xaml. This meant that my page was then able to override the inherited style by using Mike Eason's code:
<Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">