I am a little confused with wpf themes. I would like to have the wpf screens look the same on Vista, Windows 7 and Windows 8. So I have styled the components accordingly and they don't pose problems except when run on Windows 8. For example I have a combobox and I am changing its default background in xaml like this.
<Style TargetType="{x:Type ComboBox}" >
<Setter Property="FontStyle" Value="Normal"/>
<Setter Property="Height" Value="24" />
<Setter Property="Background" Value="{StaticResource GradientButtonBackgroundBrush}"/>
</Style>
The combobox Background property has no effect in windows 8 and all I get is a flat rectangle with a arrow on right (the default windows 8 combobox, which is rather poorly designed!).
So, my question is that how do I get the combobox look the same on all version of windows. I tried adding windows Aero theme in my App.xaml like below, but it has no effect on the combobox display. Here is how I added Aero theme
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/PresentationFramework.Aero;component/themes/aero.normalcolor.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
There is also another doubt regarding themes. I am building the wpf application on a windows 7 machine, which by default (I believe) has Aero Theme set. So, all my styles are based on the Aero theme when viewed on Windows 7 machine. What happens if I run the application on say XP. Then do I need to add an entry for the resource dictionary (Aero theme) in App.xaml as listed in code above?
I know my question is a bit vague, but believe me, I am really confused with default themes of wpf on different Windows versions.
EDIT:
I still can't get combobox to style according to my needs. The combobox still appears like a gray rectangle.
Here is what I did. I downloaded the Aero.NormalColor.xaml from microsoft's site and included in themes folder of application. Then I added the following in App.xaml
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Themes/Aero.NormalColor.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
Then I Compiled the application and deployed on Windows 8. Still the same combobox as was shown previously. Note that all other elements get styled properly according to the theme. I did the same with Luna.Metallic.xaml and every element gets styled except the ComboBox.
I believe that when I load a particular theme, which defines styles with ControlTemplate, then it should be picked by wpf. I am confused as to why only the ComboBox even after giving it a Aero (or Luna) Control Template doesn't change its appearance. Any ideas ?
EDIT-2
Screen shot of combobox appearance on Windows 8
Well the ComboBox clickable area is actually a ToggleButton
and if you look at the Style for that ToggleButton in Windows-8, you see something like:
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="templateRoot"
Background="{StaticResource ComboBox.Static.Background}"
BorderBrush="{StaticResource ComboBox.Static.Border}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="true">
...
As you can see from above, Background used is not a {TemplateBinding Background} but {StaticResource ComboBox.Static.Background}. Hence why you see no effect when you set the Background property in Windows-8 for that ComboBox
If your looking to carry a Style across the different OS Versions(Without having to backtrack and keep checking if new versions screwed up your over-rides), simple rule is Create it yourself.
Create a Style and set it to be applied by TargetType and without a Key to get applied automatically. That way in any OS it's your Style that gets used and not the default underlying one.
This thus guarantees your code run's as you expect on every single OS. Base your Style on the default's of any OS and tweak it to your heart's content.
side-note:
From a usability POV giving the user a Windows-7 ComboBox in an app that run's on Windows-8 is not very nice(unless your entire app looks like a Windows-7 app which is even worse). Your expecting the user to get used to your app's Style's and forget what he's used to from every other app he uses in his OS that use default Styles based on OS. If you have specific reasons for doing so, go ahead but do consider the implications.
Just for example you stated the Windows-8 Style is something your not a fan of, well I'm the opposite. I actually do like the Windows-8 clean and simple look. No distractions to the UserExperience with flashing gradients and things that throw you off the content your putting in front of them. This is an argument that goes on forever. Just be warned abt what the end-user expects and thinks than just what you think is good while writing your program.
Update:
Firstly comment on the relevant answer please. Your answer and your comment update has no relation.
Ok and as for your question edit, what you tried has not worked in windows-8 because PresentationFramework.Aero.dll does not exist in Windows-8 which is what holds Aero.NormalColor.xaml. In Windows-8 your options are PresentationFramework.Aero2.dll which is default and PresentationFramework.AeroLite.dll which I think is used by Windows Server 2012(Not Sure)
Try to compile your program on Windows-8 and you'll see it does not even want to compile.
You'll have to explicitly add a reference to PresentationFramework.Aero and also PresentationUI(which i think is part of .net3) to your project.
Then you'll have to edit your Aero.NormalColor.xaml to something like:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:theme="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
xmlns:ui="clr-namespace:System.Windows.Documents;assembly=PresentationUI">
...
^^ we explicitly state the assembly for Aero Theme. I don't use Windows-7 so Am not sure if that's all that's needed. but you can give that a try.
Try to compile your code in Windows-8 to make sure it will work fine on Windows-8
Finally, after hours of frustration, I came accross an explanation post here. Scroll for the LONG ANSWER. It explains exactly the scenario I have been facing particularly Aero style not getting applied to my Combobox. The link explains very well why we need to add a BasedOn attribute to every element that we style if we dont want the default OS style being picked up. So adding this BasedOn for the Combobox got it working for me.
<Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource {x:Type ComboBox}}">
Now the Aero theme style is used for the combobox. As #Viv pointed out it may also require copying of PresentationFramework.Aero.dll and PresentationUI.dll to the windows 8 machine as they are not supplied with the OS.
Thanks,
Nirvan
I did a bit of a hack on the built-in template. Not the cleanest solution, but removes the headache of having to roll my own template. The code behind basically binds the built-in template border's properties with the combo box's properties.
<Style TargetType="ComboBox">
<Setter Property="Border.Background" Value="White"/>
<EventSetter Event="Loaded" Handler="ComboBox_Loaded"/>
<Style.Triggers>
<Trigger Property="IsReadOnly" Value="True">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="{StaticResource ResourceKey=FocusedControlBackcolorBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource ResourceKey=FocusedControlBorderBrush}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="{StaticResource ResourceKey=FocusedControlBorderBrush}"/>
</Trigger>
</Style.Triggers>
</Style>
private void ComboBox_Loaded(object sender, RoutedEventArgs e)
{
var comboBox = sender as ComboBox;
var toggleButton = comboBox.Template?.FindName("toggleButton", comboBox) as ToggleButton;
var border = toggleButton?.Template.FindName("templateRoot", toggleButton) as Border;
if (border != null)
{
Binding b = new Binding("Background");
b.RelativeSource = new RelativeSource(RelativeSourceMode.FindAncestor, typeof(ComboBox), 1);
BindingOperations.SetBinding(border, Control.BackgroundProperty, b);
b = new Binding("BorderBrush");
b.RelativeSource = new RelativeSource(RelativeSourceMode.FindAncestor, typeof(ComboBox), 1);
BindingOperations.SetBinding(border, Control.BorderBrushProperty, b);
}
}
In Response to #Viv
#Viv, I feel that your answer was very clear, but somehow your views/suggestions aren't digestable to me and I will briefly mention why
Your Suggestion
If your looking to carry a Style across the different OS Versions(Without having to backtrack and keep checking if new versions screwed up your over-rides), simple rule is Create it yourself.
It seems impracticable. The very idea of themes is creation of consistent look for all elements in the application and accross all platforms. So, if I use a particular theme provided by the framework, no matter what, I should be able to achieve a satisfactory level of consistency, atleast on major current platforms. Above all, not every one has the expertise to create all the styles and templates from scratch. The concept of themes should be,
"The framework provider is providing the themes that will work well for normal scenarios and if anyone wishing to roll out his themes he is welcome to do so".
Instead here the concept seems like
"The framework provider is providing theme and it is not guranted that it will be consistent and work without breaking. So always roll out your themes"
Your quote
As you can see from above, Background used is not a {TemplateBinding Background} but {StaticResource ComboBox.Static.Background}. Hence why you see no effect when you set the Background property in Windows-8 for that ComboBox
I don't know whose idea it was to make a template that way! Must be out of his minds or I am too dumb to understand the advantages. Just imagine that I am using some Blue colored theme in my application and tommorrow, on Windows 9, somebody defines a Red as {StaticResource ComboBox.Static.Background}. So, guess what, I have a fancy window screen now with all my elements themed "Blue" and only the combobox's appear "Red". I mean the very idea of theme is broken here!
Your side note
Just for example you stated the Windows-8 Style is something your not a fan of, well I'm the opposite. I actually do like the Windows-8 clean and simple look.
My combobox looks like a disabled button and I couldn't even change its background! The buttons don't look like they are clickable! Any way as you said this is a personal choice, ofcourse.
My Conclusion
I will wait for some time if some one has any suggestions on how I get the combobox working on windows 8. Your answer brings forward the truth, so I would be happy to mark it a correct if I don't get any alternative solution.
Nirvan
The newer template has a Grid->ToggleButton->Border with a hardcoded background colour which does not respect any background styles. Based on the answer from #Matstar I made a way to sync the background colour across.
You can still set the binding to background colour and the code will pick this up and reapply this when needed:
<ComboBox ItemsSource="{Binding Values}" x:Name="Cbo2"
Background="{Binding Path=SelectedValueBgColor}" ... />
Then in xaml.cs
cbo.Loaded += (sender, args) =>
{
var comboBox = sender as ComboBox;
if (comboBox != null)
{
var toggleButton = comboBox.Template?.FindName("toggleButton", comboBox) as ToggleButton;
var border = toggleButton?.Template.FindName("templateRoot", toggleButton) as Border;
if (border != null)
{
var existing = BindingOperations.GetBinding(comboBox, BackgroundProperty);
BindingOperations.SetBinding(border, BackgroundProperty, existing);
}
}
};
Make sure your background binding never returns null
If you have no meaningful value return transparent or white or some other default. If binding to a background that returns null the combobox will stop working.
Make sure you notify property changed on your background binding if it needs refreshing when an event happens.
I'd like to style my TreeView like the Mac NSOutlineView.
http://s3.amazonaws.com/cocoacontrols_production/osx_screens/44/full.png?1299027729
The key features being:
TreeView full width highlighting of selected item
Background color
Different style for root header items
I believe I can track down 2 and 3, but can't find anything related to number 1.
Seems like I can't really do it, but I'll play around with Blend. Is there no code access to drawing? like here is a box replace the row drawing code? I made a prototype just now in wxPython using AGW's pure python HyperTreeList that looks the same, but unfortunately dragging and dropping has serious graphics/refresh issues.
I have just pushed on Mongoose repository a TreeViewItem Style that does what you need.
You can find it here : StretchedTreeViewItemControlTemplate
Here is a sample code :
<TreeView ItemContainerStyle="{StaticResource StretchedTreeViewItemControlTemplate}">
<TreeViewItem Header="Item 1">
<TreeViewItem Header="Item 1.1">
<TreeViewItem.Style>
<Style BasedOn="{StaticResource StretchedTreeViewItemControlTemplate}" TargetType="{x:Type TreeViewItem}">
<Setter Property="FontSize" Value="15" />
</Style>
</TreeViewItem.Style>
</TreeViewItem>
</TreeViewItem>
<TreeViewItem Header="Item 2" Background="AntiqueWhite" />
</TreeView>
Would ItemsControl.ItemContainerStyle be appropriate ? http://msdn.microsoft.com/fr-fr/library/system.windows.controls.itemscontrol.itemcontainerstyle(v=vs.85).aspx
A quick test under Blend brought the following :
For a parent :
For a children :
Notice that it is uneven, it doesn't look good.
One might ask why not stretching it up to the left border ? I guess this is not possible (from what I've seen on Blend) unless you recreate most of the template of course.
Also this would certainly kill the hierarchical look there is between items if their selector left side would be aligned to the same horizontal value.
Now the other thing is that even though you'd do that (as you requested), the expander triangle would be lost in a mess of blue ... bad UX in my opinion.
In the end your control would look more like a ListBox than a TreeView.
Anyway, here's the procedure (I edited ItemContainerStyleTemplate of a TreeView)
(sorry didn't read well your last comment, in the end my result is pretty much like yours)
Where to do it in Blend :
In my current project I have a quite large WPF based application with lots of Static and DynamicResources.
Because of many refactorings and changes in the past there are lots of DynamicResources that can not be found during runtime and therefore no value is applied.
What I like to do is run the application and get an output, exception or whatever when a DynamicResource could not be found.
I have tried to build a DefaultTraceListener and a Converter that checks for unused DynamicResources, but to no avail.
Does anyone have a solution for me on how to achieve that?
Example:
<Grid.Resources>
<Style x:Key="myStyle1" TargetType="{x:Type TextBlock}">
<Setter Property="Background" Value="Blue"></Setter>
</Style>
</Grid.Resources>
<StackPanel>
<TextBlock Style="{DynamicResource myStyle1}">DynamicResource exists</TextBlock>
<TextBlock Style="{DynamicResource myStyle3}">DynamicResource does not exist</TextBlock>
</StackPanel>
How can I be informed during runtime that myStyle3 does not exist?
Thanks in advance !
There are many tools that show you witch binding doesn't work..
WPF Inspector is my favorite tool, take a look. WPF Inspector
Snoop utility is one of those. In short - in the top right corner you'll find DropDown list which allows filter visuals, just select Visuals with binding Error. Source: How to locate the source of a binding error?
In Visual Studio, you can enable all exceptions (with binding errors) in the Debug menu, Exceptions, then check everything.
But I don't know if it's exactly what you want, let other people answer this...
i am building an application in WPF for a custom need. First i opted for custom controls, but later on figured out that much of what i needed was already implemented in Datagrid Control. However there is one small glitch:
The problem with Datagrid is that it enforces a minimum of 2 pixel gap between two consecutive cells (1 on each side of the Grid Line). Please have a look at the following diagram for clarity:
.
Please note the 2 pixels gap enforced by the Datagrid between the two consecutive cells:
http://img265.imageshack.us/img265/3545/figurem.png
(Stack overflow wouldn't let me add image to my question citing a spam protection policy for new users)
.
This doesn't suit my requirement as i want the content to appear "continuous" (There must not be this gap of 2 pixels; i want the connecting lines to look "connected"). i've tried fidgeting with the GridLinesVisibility, but it didn't help. The DataGrid is hosting a custom control like this:
<DataGrid.Columns>
<DataGridTemplateColumn Width="25" Header="">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ContentControl Content="{Binding Path=MyCustomControl}" Margin="0"></ContentControl>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
....
</DataGrid.Columns>
i have so far tried:
Switching off the GridLine (see result here: http://img263.imageshack.us/img263/8602/figure2j.png)
Setting the margin of the content property to 0.
Searched google and stackoverflow
Consulted some books.
but nothing seems to come up.
Is there a solution to this/some hack or a workaround or would i have to create everything from scratch? i have decent experience with c#, but i am new to WPF.
Please Help.
What you need to do is get at the DataGridCell style for your DataGrid and set its BorderThickness to be 0. It's hard-coded as 1 in the default style, but fortunately it's easy to override this:
<Style TargetType="DataGridCell">
<Setter Property="BorderThickness" Value="0" />
</Style>
I would suggest putting that into the resources of your DataGrid so it only affects that one grid, unless you want it to have a wider scope than that.
<DataGrid>
<DataGrid.Resources>
<Style TargetType="DataGridCell">...</Style>
</DataGrid.Resources>
...
</DataGrid>
There are other places you could put it as well, depending on your precise needs.
I have a Header style for my datagrid custom header. I am using theme for my application. The problem here is the header background of the datagrid is not changing however when I remove the styles, the header background has no problem, it change.
Here's the themes
Here's my sample application, right click the grid and context menu will appear for the list of themes, select the different themes. I have two columns namely, with header style and without header style. See the difference. Thank you for your help.
<Style x:Key="DataGridHeaderStyle" TargetType="primitive:DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding}" Grid.Column="0" HorizontalAlignment="Left" />
<filter:DataGridColumnFilter Grid.Column="1" HorizontalAlignment="Right" />
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Thank you
I did a quick test, and it does not seem to work with either the tag approach or the ImplicitStyleManager attribute approach. This is probably because the style setter is outside the scope and therefore gets applied without a theme.
Suggestion 1: Look at the way that the Jet Pack theme handles it with resource dictionaries in App.xaml, and try to do something similar. (You will need the theme.xaml file for this. EDIT: This link might help.) If you want to change the theme dynamically, then consider this (old) post about swapping themes in resource dictionaries (I haven't tried it, but it should work).
Suggestion 2: You need to think about style inheritance. Since "BasedOn" needs an x:Key tag, you could instead copy the theme's implicit DataGridColumnHeader style and only modify the parts you are interested in. (I don't know if there's a more elegant way.)
If this is not what you meant, then please provide more sample code.
EDIT [2010-12-09]:
I looked at the code, and I believe the root of the problem is the absence of style inheritance. Your "DataGridHeaderStyle" is saying "Do not use the normal DataGridColumnHeader style, but instead use this TextBlock inside this Grid." So Silverlight does just that: it gives you a styled TextBlock in an unstyled default DataGridColumnHeader.
Proof: Update your "Home.xaml" and add a TextBox in the second column of your "DataGridHeaderStyle" style, next to the current TextBlock. Notice how the theme for the TextBox in the header is changing every time you change the theme (look at the TextBox backgroud), but the background of the column header is stuck on the default colour. Like I said, your custom style is telling Silverlight to ignore the implicit style.
FIX: I do not know how to inherit from implicit styles without an "x:Key" attribute. I googled quite a bit but could not find anything helpful. You will either have to a) create a custom column definition style for all your datagrid headers, or you will have to b) bother the Silverlight team for a new feature in the next version of Silverlight. Or c) pick one theme to stick with and edit a copy of the theme's implicit column header style as your new "DataGridHeaderStyle" style.
My holiday is about to start, so I hope this helped. At least now you know where the problem lies.