We Keep Coding

WPF ContentControl in ListViewItem is not changing it's width (not stretching) while dragging gridsplitter

So, I have a grid, containing 3 columns. 2 one is gridsplitter which is working fine.
In the first one I have a ListView
<ListView Grid.Row="1"
ItemsSource="{Binding Chats}"
Background="Transparent"
BorderThickness="0"
ItemContainerStyle="{StaticResource ContactItem}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>
Then there is Style: ContactItem
<Style TargetType="{x:Type ListViewItem}" x:Key="ContactItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<l:RippleEffectDecorator Background="Black" HighlightBackground="White">
<Border Height="62" Background="Transparent" BorderThickness="0">
</Border>
</l:RippleEffectDecorator>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
As you can see there is RippleEffectDecorator - which is ContentControl(I've found it in another case). There is link on github to it: Xaml file
And Cs file
So, starting the project I have:this
When I try to drag gridsplitter I have: this
I've already tried to put HorizontalAlignment and/or HorizontalContentAlignment Stretch to ListView/to ListViewItem style/to RippleEffectDecorator style.
Not problem about anything inside RippleEffectDecorator cuz when I was writing it without this contentcontrol it was working fine.
All I need is just everything inside this RippleEffectDecorator to be able to stretch horizontally when I'm moving gridsplitter, thank you!

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.

Is it possible to apply MahApps’s TextBoxHelper to a ScrollViewer?

I’m building a WPF application in which there’s a TextBox. To apply rounded corners to it, here I read that I need to create a specific style using a ScrollViewer inside a Border. So far so good, but I want to apply the funcionalities of MahApps’ TextBoxHelper class, which lets you use stuff like:
<TextBox controls:TextboxHelper.Watermark="I’m a watermark"/>
to display a watermark inside the TextBox. The problem is that I don’t understand how to combine the style (using the advices in the article I linked to) with MahApps. I tried something like:
<Style TargetType="TextBox" x:Key="myKey">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border" CornerRadius="10">
<ScrollViewer x:Name="PART_ContentHost"
Focusable="false"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
ctrl:TextboxHelper.Watermark="true"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
but the watermark doesn’t show.

Why does adding ContentControl cause my application to enter break mode? [duplicate]

This question already has answers here:
Provide value on 'System.Windows.Markup.StaticResourceHolder' threw an exception
(5 answers)
Closed 5 years ago.
Brief
I've created a beautiful WindowChrome style to apply to my windows. When I add ContentControl to my style, however, the application enters break mode.
I've pieced together code from this youtube video, this article, this SO question and Microsoft's documentation and I've come up with the following code.
Note: The code below is all considered relevant since the application cannot run with either of these parts (yes I know it can run without the code-behind, but it's annoying having to stop the application from Visual Studio instead of the close button - which is also what I'm trying to accomplish). I've actually slimmed down the code below so that it's easier to work with.
Code
Window.xaml
<Style x:Key="TestWindow" TargetType="{x:Type Window}">
<Setter Property="Background" Value="#FF222222"/>
<Setter Property="BorderBrush" Value="WhiteSmoke"/>
<Setter Property="BorderThickness" Value="5,30,5,5"/>
<Setter Property="WindowChrome.WindowChrome">
<Setter.Value>
<WindowChrome CaptionHeight="20"
CornerRadius="0"
GlassFrameThickness="0,0,0,-1"
NonClientFrameEdges="None"
ResizeBorderThickness="5"
UseAeroCaptionButtons="True"/>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid>
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<AdornerDecorator>
<ContentPresenter/>
</AdornerDecorator>
</Border>
<DockPanel LastChildFill="True" VerticalAlignment="Top" Height="30">
<StackPanel DockPanel.Dock="Right"
Orientation="Horizontal"
VerticalAlignment="Center">
<Button x:Name="Button_Close"
WindowChrome.IsHitTestVisibleInChrome="True"
Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}"
Click="CloseClick">
<ContentControl Template="{StaticResource Icon_Close}" Height="10"/>
</Button>
</StackPanel>
<StackPanel DockPanel.Dock="Left"
Orientation="Horizontal"
VerticalAlignment="Center">
<Image x:Name="PART_WindowCaptionIcon"
Width="16"
Height="16"
Margin="0,0,6,0"
Source="{TemplateBinding Icon}"/>
<TextBlock x:Name="PART_WindowCaptionText"
Margin="6,0,0,0"
Padding="0">
<Run BaselineAlignment="Center"
Text="{TemplateBinding Title}"
Foreground="Black"/>
</TextBlock>
</StackPanel>
</DockPanel>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="PART_WindowCaptionIcon" Property="Source" Value="{x:Null}">
<Setter TargetName="PART_WindowCaptionIcon" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="PART_WindowCaptionText" Property="Margin" Value="5,0,0,0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Icons.xaml
Window.xaml makes reference to this file for the ContentControl Template attribute values through App.xaml.
<ControlTemplate x:Key="Icon_Close">
<Viewbox>
<Polygon Points="357,35.7 321.3,0 178.5,142.8 35.7,0 0,35.7 142.8,178.5 0,321.3 35.7,357 178.5,214.2 321.3,357 357,321.3 214.2,178.5" Fill="Black"/>
</Viewbox>
</ControlTemplate>
Window.xaml.cs
public partial class Window : ResourceDictionary
{
public Window()
{
InitializeComponent();
}
private void CloseClick(object sender, RoutedEventArgs e)
{
var window = (System.Windows.Window)((FrameworkElement)sender).TemplatedParent;
window.Close();
}
}
Issue
When the line <ContentControl Template="{StaticResource Icon_Close}" Height="10"/> is present (line 38), the following message is received. When the same line is removed/commented out the application runs without entering break mode.
Looking at the Output window I'm getting the following messages:
An unhandled exception of type 'System.Windows.Markup.XamlParseException' occurred in PresentationFramework.dll
Provide value on 'System.Windows.Markup.StaticResourceHolder' threw an exception.
Questions
This code worked when placed directly in the XAML code for the Window, but the moment I try to place it in the template it fails.
My questions are:
Why does my application enter break mode when ContentControl is placed in the Window's template?
How can I resolve this problem?
Please note that I must use my ControlTemplate from the Icons.xaml file and that the call to this content must remain in the window's Style (and not the window's actual xaml).

Brief
The issue was due to an incorrect order of my styles as per the answer on this question. I'm marking my question as a duplicate of that one, but felt I should share this as the answer in case it helps anyone else.
I love that Microsoft doesn't handle this with an appropriate exception and that you need to bang your head against a wall until either your head or the wall breaks.
Code
My App.xaml contains the following code in ResourceDictionary.MergedDictionaries
<ResourceDictionary Source="pack://application:,,,/MyProject;component/Window.xaml"/>
<ResourceDictionary Source="pack://application:,,,/MyProject;component/Icons.xaml"/>
I changed the order to the following
<ResourceDictionary Source="pack://application:,,,/MyProject;component/Icons.xaml"/>
<ResourceDictionary Source="pack://application:,,,/MyProject;component/Window.xaml"/>

WPF Custom control guidance - horizontal tree

I've been asked to create a new control for a feature that we need, I'm really struggling on how to best achieve this in a generic and flexible way.
basically the control is very similar to a tree view, where as you would click on a node and then its children would then appear underneath that node.
for this control, they want it like this - when you click on a node, its children are then displayed on the left of parents container and so on.
I've done a quick (super quick) diagram in paint... (please don't laugh, its terrible! :) )
So you should just start with a single list of items and then progressive through the children of the selected item..
so my question is really, where do you start on something like this.. ? I'm fine with the data side but the XAML is the bit that's really confusing me, it needs to be very generic so it could potential cope with 100's of children panels
any help would be brilliant.
cheers.
ste.

If you are after a usercontrol and known bindings at designtime - it would be easy, but as a custom control - i'm very interested in good answers
like i said this can easy be done if you know the collection bindings and the childlevel. but its maybe a start to get a custom control.
<UserControl>
<UserControl.Resources>
<Style x:Key="{x:Type ListBox}" TargetType="{x:Type ListBox}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ListBoxItem">
<Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<UniformGrid Columns="1"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate DataType="{x:Type local:TreeItems}">
<Grid VerticalAlignment="Stretch">
<Border BorderBrush="Black" BorderThickness="1" >
<TextBlock Margin="5" Text="{Binding Name}"/>
</Border>
</Grid>
</DataTemplate>
</UserControl.Resources>
<StackPanel Orientation="Horizontal">
<ListBox x:Name="root" ItemsSource="{Binding}"></ListBox>
<ListBox x:Name="Lvl1" ItemsSource="{Binding ElementName=root, Path=SelectedItem.Childs}" />
<ListBox x:Name="Lvl2" ItemsSource="{Binding ElementName=Lvl1, Path=SelectedItem.Childs}" />
</StackPanel>
</UserControl>

This article from Josh Smith is a good starting point.
If all you need is a hierarchical data control, you better use a TreeView and not rolling your own control, as it is probably more complicated than you think (selection, keyboard navigation, etc.)