We Keep Coding

C# WPF The global style not working in some parts of the code [duplicate]

I am trying to learn something about WPF and I am quite amazed by its flexibility.
However, I have hit a problem with Styles and DataTemplates, which is little bit confusing.
I have defined below test page to play around a bit with styles etc and found that the Styles defined in <Page.Resources> for Border and TextBlock are not applied in the DataTemplate, but Style for ProgressBar defined in exactly the same way is applied.
Source code (I just use Kaxaml and XamlPadX to view the result)
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="Background" Value="SkyBlue"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="CornerRadius" Value="5"/>
</Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="FontWeight" Value="Bold"/>
</Style>
<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Height" Value="10"/>
<Setter Property="Width" Value="100"/>
<Setter Property="Foreground" Value="Red"/>
</Style>
<XmlDataProvider x:Key="TestData" XPath="/TestData">
<x:XData>
<TestData xmlns="">
<TestElement>
<Name>Item 1</Name>
<Value>25</Value>
</TestElement>
<TestElement>
<Name>Item 2</Name>
<Value>50</Value>
</TestElement>
</TestData>
</x:XData>
</XmlDataProvider>
<HierarchicalDataTemplate DataType="TestElement">
<Border Height="45" Width="120" Margin="5,5">
<StackPanel Orientation="Vertical" Margin="5,5" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock HorizontalAlignment="Center" Text="{Binding XPath=Name}"/>
<ProgressBar Value="{Binding XPath=Value}"/>
</StackPanel>
</Border>
</HierarchicalDataTemplate>
</Page.Resources>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<Border Height="45" Width="120" Margin="5,5">
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock HorizontalAlignment="Center" Text="Item 1"/>
<ProgressBar Value="25"/>
</StackPanel>
</Border>
<Border Height="45" Width="120" Margin="5,5">
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock HorizontalAlignment="Center" Text="Item 2"/>
<ProgressBar Value="50"/>
</StackPanel>
</Border>
</StackPanel>
<ListBox Margin="10,10" Width="140" ItemsSource="{Binding Source={StaticResource TestData}, XPath=TestElement}"/>
</StackPanel>
</Page>
I suspect it has something to do with default styles etc, but more puzzling is why some Styles are applied and some not. I cannot find an easy explanation for above anywhere and thus would like to ask if someone would be kind enough to explain this behaviour in lamens' terms with possible links to technical description, i.e. to MSDN or so.
Thanks in advance for you support!

I discovered a simple workaround for this. For any elements that are not able to search outside the data template encapsulation boundary (i.e. are not being implicitly styled), you can just declare an empty style within the data template for that element type and use the BasedOn attribute of the style to find the correct implicit style outside the data template to apply.
In the example below, the TextBox is able to search outside the data template encapsulation boundary (because it inherits from Control?), but the TextBlock is not able to, so I declare the empty style for it which can search outside the data template.
<ItemsControl.ItemTemplate>
<DataTemplate>
<DataTemplate.Resources>
<Style TargetType="TextBlock" BasedOn="{StaticResource {x:Type TextBlock}}" />
</DataTemplate.Resources>
<DockPanel>
<TextBlock Text="{Binding Name}" />
<TextBox Text="{Binding Value}" />
</DockPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>

This is actually by design. Elements that do not derive from Control will not pick up implicit Styles, unless they are in the application resources.
This link explains this in more detail, or you can view the Connent bug report.

I've looked into this also, and I personally think it's a bug. I've noticed that the style is set if you name your styles like so:
<Style x:Key="BorderStyle" TargetType="{x:Type Border}">
etc...
and explicitly set your DataTemplate to use those styles:
<HierarchicalDataTemplate DataTemplate="TestElement">
<Border Height="45" Width="120" Margin="5,5", Style="{StaticResource BorderStyle}">
I think that it's possible that for DataTemplates (and maybe ControlTemplates), they default to having a null style, unless you explicitly set them.
That to me is not meant to happen - it's not a logical way of WPF working...

This is because ListBox is a logical parent of your datatemplate items, now remember, all properties those are "inheritable" like font, forecolor etc, are derived from the logical parent and ListBox already overrides it in its own default style, thats why this will not work. However in this case, you can use named styles as Mr. Dave has suggested, but I think if it does not work then this is a known problem in case of List Box etc, you can refere to my question here, i had similar problem in listbox, and the answers in my question are in more detail.

Initializing a view in XAML with WPF (Caliburn.Micro)

I've been trying to get a tooltip to work inside of each row of a datagrid. I was able to displaythe info inside the Tooltipproperty using a simple StackPanel and some labels, but now I wanted to insert a view to use as a tooltip.
I was able to display the ciew and the viewmodel is working, yet I cannot make the custom object to work(named AppointmentConfirmationNotification). I am able to use the empty object 'ToolTipContent' yet I want to bind it to the Datagrid.
here is the code I'm cureently working on. Be aware that I left a comment on my working Stackpanel 'experiment'. Basically I assume somehow I have to inser a mere ´{Binding}´ somewhere... But not sure where.
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Style.Resources>
<model:AppointmentConfirmationNotification x:Key="ToolTipContent">
</model:AppointmentConfirmationNotification>
</Style.Resources>
<Setter Property="ToolTip">
<Setter.Value >
<!--
OLD STACKPANEL WORKING SAMPLE
<StackPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<WrapPanel Grid.Row="0">
<Label>ID : </Label>
<Label Content="{Binding AppointmentConfirmation.AppointmentID}"/>
</WrapPanel>
</Grid>
</StackPanel>
-->
<v:APTooltipView>
<v:APTooltipView.DataContext>
<ObjectDataProvider ObjectType="{x:Type vm:APTooltipViewModel}">
<ObjectDataProvider.ConstructorParameters>
<StaticResource ResourceKey="ToolTipContent"/>
</ObjectDataProvider.ConstructorParameters>
</ObjectDataProvider>
</v:APTooltipView.DataContext>
</v:APTooltipView>
</Setter.Value>
</Setter>
<Setter Property="TextElement.FontWeight" Value="{Binding Path=Read,Converter={StaticResource BooleanToFontweight}}"/>
</Style>
</DataGrid.RowStyle>
I was trying to do this on the XAML in order to follow a more MVVM approach, but feel free to advice another approach. Thank you

You can just make a new view and pass the DataContext through. You could put whatever you like in that view. It would look like this in your main view.
<StackPanel>
<local:"YOUR_VIEW" DataContext="{Binding AppointmentConfirmation, Mode=TwoWay}"/>
</StackPanel>
Your freshly made view will look like this. You can add whatever you like (as long as it exists in your DataContext) and maybe reuse this view for other purposes.
<UserControl x:Name="YOUR_VIEW" ....
...... >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<WrapPanel Grid.Row="0">
<Label>ID : </Label>
<Label Content="{Binding AppointmentID}"/>
</WrapPanel>
</Grid>
</UserControl>

Add a mouseover and pressed/clicked effect on element in UWP app

I'm currently working on an app to show all parking spaces in Kortrijk (a city in Belgium). This is how it looks at the moment:
Design
My question is: how can I for example change the color of the element on mouseover or on click. I want to accomplish this in the XAML and this is the code that I have now.
Code
MainPage.xaml
<Page
x:Class="ParkingSpots.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ParkingSpots"
xmlns:model="using:ParkingSpots.model"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps"
mc:Ignorable="d">
<Page.Resources>
<model:ParkingSpot x:Key="spots"/>
</Page.Resources>
<Grid Style="{StaticResource mainGrid}">
<Grid.RowDefinitions>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Parking spots in Kortrijk"/>
<ListView ItemsSource="{Binding Source={StaticResource spots}, Path=ParkingSpots}" ItemTemplate="{StaticResource ParkingSpotTemplate}" ItemsPanel="{StaticResource ParkingSpotsTemplate}"/>
</Grid>
style.xaml (external xaml file)
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ParkingSpots.style"
xmlns:conv="using:ParkingSpots.converter">
<conv:StreetConverter x:Key="StreetConv" />
<Color x:Key="Color1">#FFB3B6F2</Color>
<Color x:Key="Color2">#FF5A58D9</Color>
<Color x:Key="Color3">#FFF2F2F2</Color>
<SolidColorBrush x:Key="Color1Brush" Color="{StaticResource Color1}" />
<SolidColorBrush x:Key="Color2Brush" Color="{StaticResource Color2}" />
<SolidColorBrush x:Key="Color3Brush" Color="{StaticResource Color3}" />
<Style x:Name="mainGrid" TargetType="Grid">
<Setter Property="Background" Value="{StaticResource Color1Brush}"/>
</Style>
<DataTemplate x:Key="ParkingSpotTemplate">
<ListViewItem>
<ListViewItem.Resources>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="{StaticResource Color3Brush}" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="8,0,0,0" />
</Style>
</ListViewItem.Resources>
<TextBlock x:Name="ParkingSpotInfo" Grid.Row="0" Grid.Column="0" Text="{Binding Street, Converter={StaticResource StreetConv}}"/>
</ListViewItem>
</DataTemplate>
<ItemsPanelTemplate x:Key="ParkingSpotsTemplate">
<VariableSizedWrapGrid x:Name="wrapGrid"></VariableSizedWrapGrid>
</ItemsPanelTemplate>
I tried something with style.triggers but this is only possible in WPF apps and not in UWP apps. I've also read a lot of things about visualstates but I don't know how to use it and if this is the best way to do such effects.
Thanks in advance

You should probably be using a ListView to display this data instead of an ItemsControl (unless you have a good reason for doing so). ListView extends from ItemsControl and adds to it lots of useful features, such as:
Single/multiple item selection.
ItemClick event.
Each item container is a ListViewItem control which has its own features like visual states and a checkbox, and the presentation of the ListViewItem is managed by a ListViewItemPresenter which can deliver these features in an optimized manner.
Built-in ScrollViewer.
Data and UI virtualization. UI virtualization is a big advantage when you have 100s of items.
Accessible. Supports tab-focusing.
Probably more...
ItemsControl isn't typically used for situations where you want to interact with the items (by click/tap, for example).
ListView by default has its own style which can be easily overridden to match what you have already.
If you only want to style the ListViewItem background/foreground for each visual state, then you can override these styles:
<ListView>
<ListView.Resources>
<!--
These resources are applied to this ListView only. Put in a
higher scope (page or app) depending on what you want it to affect.
-->
<SolidColorBrush x:Key="ListViewItemBackgroundPointerOver" Color="Red"/>
<SolidColorBrush x:Key="ListViewItemForegroundPointerOver" Color="Violet"/>
<SolidColorBrush x:Key="ListViewItemBackgroundSelected" Color="Yellow"/>
<SolidColorBrush x:Key="ListViewItemForegroundSelected" Color="LimeGreen"/>
<SolidColorBrush x:Key="ListViewItemBackgroundSelectedPointerOver" Color="Blue"/>
<SolidColorBrush x:Key="ListViewItemBackgroundPressed" Color="Cyan"/>
<SolidColorBrush x:Key="ListViewItemBackgroundSelectedPressed" Color="Orange"/>
</ListView.Resources>
</ListView>

Actually using the Tile Control in MahApps Metro?

I have been working with MahApps Metro UI for couple days now and i have realy enjoyed it. WHen looking through their documentation, i wanted to use the tile control and make something along the lines of this:
Their documentation, located on this page: http://mahapps.com/controls/tile.html , only tells me this:
The following XAML will initialize a Tile control with its Title set to "Hello!" and its Count set to 1.
<controls:Tile Title="Hello!"
TiltFactor="2"
Width="100" Height="100"
Count="1">
</controls:Tile>
When i entered this into my simple application, i get one small rectangle. How am i actually supposed to use the control to mimic the Windows 8 start screen with tiles?

I'm currently building a large application using the MahApps Metro library and it's amazing! In terms of getting an app to look like the Windows 8 start screen, heres quick example I whipped up.
XAML
<Window x:Class="Win8StartScreen.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
Title="MainWindow" Height="513" Width="1138" WindowState="Maximized" WindowStyle="None" Background="#191970">
<Window.Resources>
<Style x:Key="LargeTileStyle" TargetType="mah:Tile">
<Setter Property="Width" Value="300" />
<Setter Property="Height" Value="125" />
<Setter Property="TitleFontSize" Value="10" />
</Style>
<Style x:Key="SmallTileStyle" TargetType="mah:Tile">
<Setter Property="Width" Value="147" />
<Setter Property="Height" Value="125" />
<Setter Property="TitleFontSize" Value="10" />
</Style>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="87*"/>
<ColumnDefinition Width="430*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="83*"/>
<RowDefinition Height="259*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="1"
VerticalAlignment="Center"
Text="Start"
FontWeight="Light"
Foreground="White"
FontSize="30"
FontFamily="Segoe UI" />
<WrapPanel Grid.Row="1" Grid.Column="1" Width="940" Height="382" HorizontalAlignment="Left" VerticalAlignment="Top">
<mah:Tile Title="Mail" Style="{StaticResource LargeTileStyle}" Content="ImageHere" Background="Teal" Margin="3"/>
<mah:Tile Title="Desktop" Style="{StaticResource LargeTileStyle}" Margin="3">
<mah:Tile.Background>
<ImageBrush ImageSource="Images/windesktop.jpg" />
</mah:Tile.Background>
</mah:Tile>
<mah:Tile Title="Finance" Style="{StaticResource LargeTileStyle}" Background="Green" />
<mah:Tile Title="People" Style="{StaticResource LargeTileStyle}" Background="#D2691E" />
<mah:Tile Title="Weather" Style="{StaticResource LargeTileStyle}" Background="#1E90FF" />
<mah:Tile Title="Weather" Style="{StaticResource SmallTileStyle}" Background="#1E90FF" />
<mah:Tile Title="Store" Style="{StaticResource SmallTileStyle}" Background="Green" />
</WrapPanel>
</Grid>
</Window>
There are lots of ways to do this to make it cleaner and more reusable using styles and templates, but this was just a quick way to show the use of the Tiles control.

WPF AvalonDock add Documents

I have a Window with AvalonDock. On startup there is one Document opened which is filled with LocControllers usercontrols (LocControllersViewModel).
Now I want to have that when there is doubleclicked on a LocController that the LocController usercontrol opens in a new Document. So the first document is always the overview, filled with LocController usercontrols, and the other Documents are added after a double click.
I've looked at the AvalonDock and MVVM sample, but I can't figure out how to get the behavior that I want.
What I've found out so far is that I have to use the DocumentsSource property to bind the documents. So I guess I need to create a collection of DocumentViewModels to bind to the DocumentsSource property. That DocumentViewModel I need to fill with usercontrols. For the first Document is will be a list of LocController usercontrols, for the other Documents it can be other usercontrols.
Can anyone provide me with a small code example? i don't think it is that hard, but I just can't find it :(
EDIT: Here's my current DockingManager XAML:
<Window x:Class="AvalonDockMvvmTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock"
xmlns:AvalonDockMvvmTest="clr-namespace:AvalonDockMvvmTest"
Title="MainWindow"
Height="350"
Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Menu>
<MenuItem Header="File">
<MenuItem Header="NewDetail"
Command="{Binding NewCommand}" />
<MenuItem Header="OpenSelectDetail"
Command="{Binding OpenCommand}" />
</MenuItem>
</Menu>
<xcad:DockingManager x:Name="DockManager"
Margin="3 0 3 0"
DocumentsSource="{Binding Documents, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<xcad:DockingManager.LayoutItemTemplateSelector>
<AvalonDockMvvmTest:PanesTemplateSelector>
<AvalonDockMvvmTest:PanesTemplateSelector.OverViewTemplate>
<DataTemplate DataType="{x:Type AvalonDockMvvmTest:OverviewViewModel}"> <!-- Overview user control -->
</DataTemplate>
</AvalonDockMvvmTest:PanesTemplateSelector.OverViewTemplate>
<AvalonDockMvvmTest:PanesTemplateSelector.DetailTemplate>
<DataTemplate DataType="{x:Type AvalonDockMvvmTest:DetailViewModel}"> <!-- Detail user control -->
</DataTemplate>
</AvalonDockMvvmTest:PanesTemplateSelector.DetailTemplate>
</AvalonDockMvvmTest:PanesTemplateSelector>
</xcad:DockingManager.LayoutItemTemplateSelector>
</xcad:DockingManager>
</Grid>
</Window>
So how do I load the different controls (overview and detail) to the document pane?

Ok, it took me some time, but I finally got it working the way I want.
Picking code from the AvalonDock MMVM sample and the CodeProject 'AvalonDock [2.0] Tutorial'
The result: when the application starts the overview is loaded in the first document tab.
When you click the newdetail menuitem, a new document tab is added, after the overview tab.
The overview tab is set to be unable to close.
There are some more things to do, like adding a side - and bottom panel. So I'm not done yet, but I think if I got so far the other panels can be done too.
Screenshot:
XAML:
<Window x:Class="AvalonDockMvvmTest.View.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock"
xmlns:Pane="clr-namespace:AvalonDockMvvmTest.View.Pane"
xmlns:ViewModel="clr-namespace:AvalonDockMvvmTest.ViewModel"
Title="MainWindow"
Height="350"
Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Region Menu-->
<Menu>
<MenuItem Header="File">
<MenuItem Header="NewDetail"
Command="{Binding NewCommand}" />
<MenuItem Header="OpenSelectDetail"
Command="{Binding OpenCommand}" />
</MenuItem>
</Menu>
<!-- EndRegion Menu-->
<!-- Region DockingManager -->
<xcad:DockingManager x:Name="DockManager"
Margin="3 0 3 0"
DocumentsSource="{Binding Files}"
Grid.Row="1">
<xcad:DockingManager.LayoutItemTemplateSelector>
<Pane:PanesTemplateSelector>
<!-- Overview (startpage)-->
<Pane:PanesTemplateSelector.OverViewTemplate>
<DataTemplate DataType="{x:Type ViewModel:OverviewViewModel}">
<!-- Add UserControl here-->
<TextBox Text="{Binding ContentText}"/>
</DataTemplate>
</Pane:PanesTemplateSelector.OverViewTemplate>
<!--Detail controls-->
<Pane:PanesTemplateSelector.DetailTemplate>
<DataTemplate DataType="{x:Type ViewModel:DetailViewModel}">
<!-- Add UserControl here-->
<TextBox Text="{Binding ContentText}" />
</DataTemplate>
</Pane:PanesTemplateSelector.DetailTemplate>
</Pane:PanesTemplateSelector>
</xcad:DockingManager.LayoutItemTemplateSelector>
<xcad:DockingManager.LayoutItemContainerStyleSelector>
<Pane:PanesStyleSelector>
<!-- Overview (startpage) style -->
<Pane:PanesStyleSelector.OverviewStyle>
<Style TargetType="{x:Type xcad:LayoutItem}">
<Setter Property="Title"
Value="{Binding Model.Title}" />
<Setter Property="ToolTip"
Value="{Binding Model.Title}" />
<Setter Property="CloseCommand"
Value="{Binding Model.CloseCommand}" />
<Setter Property="ContentId"
Value="{Binding Model.ContentId}" />
</Style>
</Pane:PanesStyleSelector.OverviewStyle>
<!-- Detail style -->
<Pane:PanesStyleSelector.DetailStyle>
<Style TargetType="{x:Type xcad:LayoutItem}">
<Setter Property="Title"
Value="{Binding Model.Title}" />
<Setter Property="ToolTip"
Value="{Binding Model.Title}" />
<Setter Property="ContentId"
Value="{Binding Model.ContentId}" />
</Style>
</Pane:PanesStyleSelector.DetailStyle>
</Pane:PanesStyleSelector>
</xcad:DockingManager.LayoutItemContainerStyleSelector>
</xcad:DockingManager>
<!-- EndRegion DockingManager -->
</Grid>
</Window>