We Keep Coding

Controls moving haphazardly when resizing window

I have created a wpf application. The XAML code for the application is below.
The window looks great when its run, however when I try to resize the window the controls moves haphazardly. I want the controls to stay in place like a proper windows application. Also I am new to WPF. Any suggestion would be appreciated.
I have inserted a image of original and resized window.
<Window x:Class="demoUI.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:demoUI"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="8*"/>
<RowDefinition Height="17*"/>
<RowDefinition Height="397*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="39*"/>
<ColumnDefinition Width="113*"/>
<ColumnDefinition Width="46*"/>
<ColumnDefinition Width="12*"/>
<ColumnDefinition Width="149*"/>
<ColumnDefinition Width="38*"/>
<ColumnDefinition Width="141*"/>
<ColumnDefinition Width="256*"/>
</Grid.ColumnDefinitions>
<!--<Border BorderBrush="Black" BorderThickness="1" Grid.Column="6" Height="100" Margin="9.2,13,21.6,0" Grid.Row="1" Grid.RowSpan="2" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>-->
<Menu Margin="0,-4,56.2,5.8" Grid.ColumnSpan="2" Grid.RowSpan="2" >
<MenuItem Header="File">
<MenuItem Header="Open Log File"/>
<MenuItem Header="Open Workspace"/>
<Separator/>
<MenuItem Header="Save as Workspace"/>
<MenuItem Header="Set Path host file"/>
<Border BorderBrush="Black" BorderThickness="1" Margin="-34,-117,-656.4,37.6"/>
</MenuItem>
<MenuItem Header="Control" Grid.Row="0" Grid.Column="1" Width="60">
<MenuItem Header="Open Command Line View"/>
</MenuItem>
</Menu>
<TextBlock Text="Connect To" Width="65" Height="Auto" HorizontalAlignment="Left" Margin="4,16.2,0,360.6" Grid.Row="2" Grid.ColumnSpan="2"/>
<TextBox TextWrapping="Wrap" Text="IP/HostName" Margin="37.8,14.2,11.4,360.6" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
<TextBox TextWrapping="Wrap" Text="Line" Margin="100.8,46.2,12.4,328.6" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
<TextBlock Text="Protocol" Width="78" Height="Auto" HorizontalAlignment="Left" Margin="111.6,9,0,383.6" Grid.Column="4" Grid.ColumnSpan="3" Grid.RowSpan="2" Grid.Row="1"/>
<StackPanel VerticalAlignment="Top" Grid.Column="3" Orientation="Horizontal" Grid.ColumnSpan="2" Height="48" Margin="2.6,0.2,0,0" Grid.Row="2" HorizontalAlignment="Left" Width="78">
<Button Content="Play" HorizontalAlignment="Left" VerticalAlignment="Top" Height="20" Margin="4.5,14.2,0,0" Width="32"/>
<Button Content="Stop" HorizontalAlignment="Right" VerticalAlignment="Top" Height="20" Margin="4.5,14.2,0,0" Width="32"/>
</StackPanel>
<StackPanel Orientation="Vertical"
VerticalAlignment="Top" Grid.Column="4" Grid.ColumnSpan="2" Grid.Row="2"
HorizontalAlignment="Center" Width="34" Margin="123.6,6.2,28.8,0" Height="115">
<TextBlock Text="Rx" Width="20" Height="Auto" HorizontalAlignment="Center"/>
<CheckBox Margin="5,5,4.6,5" Height="14" />
<CheckBox Margin="5,5,4.6,5" Height="14" RenderTransformOrigin="0.492,-0.286" />
<CheckBox Margin="5,5,4.6,5" Height="14" />
<CheckBox Margin="5,5,4.6,5" Height="14" />
</StackPanel>
<StackPanel Orientation="Vertical"
VerticalAlignment="Top" Grid.Column="5" Grid.ColumnSpan="2" Grid.Row="2"
HorizontalAlignment="Left" Margin="4.8,6.2,0,0" Height="124" Width="36">
<TextBlock Text="Tx" Width="20" Height="Auto" HorizontalAlignment="Center" />
<CheckBox Margin="5,5,4.8,5" Height="14" />
<CheckBox Margin="5,5,4.8,5" Height="14" />
<CheckBox Margin="5,5,4.8,5" Height="14" />
<CheckBox Margin="5,5,4.8,5" Height="14" />
</StackPanel>
<TextBlock Text="Log Cmd" Width="65" Height="Auto" HorizontalAlignment="Left" Margin="9,51.2,0,325.6" Grid.Row="2" Grid.ColumnSpan="2"/>
<TextBlock TextWrapping="Wrap" Text="RSP" Margin="93.6,25.2,15.2,348.6" Grid.Column="4" Grid.Row="2" />
<TextBlock TextWrapping="Wrap" Text="RTU" Margin="93.6,49.2,15.2,327.6" Grid.Column="4" Grid.Row="2" />
<TextBlock TextWrapping="Wrap" Text="Error" Margin="93.6,69.2,15.2,307.6" Grid.Column="4" Grid.Row="2"/>
<TextBlock TextWrapping="Wrap" Text="Info" Margin="93.6,96.2,15.2,280.6" Grid.Column="4" Grid.Row="2" />
<ComboBox x:Name="Job"
VerticalAlignment="Bottom" Margin="38.8,0,16,324.6"
Height="23" Grid.Row="2" Grid.Column="1">
<ComboBoxItem Content="Trace"/>
<ComboBoxItem Content="List"/>
<ComboBoxItem Content="Dump"/>
<ComboBoxItem Content="Off"/>
</ComboBox>
<StackPanel Grid.Column="3" Grid.Row="2" Grid.ColumnSpan="2" Margin="3.6,52.2,82.2,315.6">
<Button Content="Send" VerticalAlignment="Top" Height="20" Margin="3,0,0,0" HorizontalAlignment="Left" Width="69"/>
</StackPanel>
</Grid>
</Window>

The direct cause for the wandering TextBoxes and ComboBox is that their VerticalAlignment is set to Center and they are offset back to the top of the row with the use of gigantic bottom marigins.
They are also within the third row of a Grid, and all of the rows' Height is set in a way that makes them scale to the parent container (window) size. The star '*' in Height="8*", Height="17*" etc. results in rows filling the leftover space in their parent aiming for the specified proportions.
The main culprit behind all of this is most likely use of the designer to drag and drop everything into its place, rather than mindful utilization of the various panels/containers that are avaliable in WPF.
At the very least, you should create the initial panel setup by writing the code yourself. It will result in much cleaner and more maintainable code. I recommend using the designer only as a feedback tool in the beginning of your journey with WPF.
This is probably the layout you're looking for:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Menu Grid.Row="0">
<MenuItem Header="File">
<MenuItem Header="Open Log File" />
<MenuItem Header="Open Workspace" />
<Separator />
<MenuItem Header="Save as Workspace" />
<MenuItem Header="Set Path host file" />
</MenuItem>
<MenuItem Header="Control">
<MenuItem Header="Open Command Line View" />
</MenuItem>
</Menu>
<WrapPanel Grid.Row="1" Margin="10">
<WrapPanel.Resources>
<Style TargetType="Grid">
<Setter Property="Margin" Value="0,0,20,0" />
</Style>
</WrapPanel.Resources>
<Grid>
<Grid.Resources>
<Style TargetType="TextBox">
<Setter Property="Margin" Value="3" />
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
<Style TargetType="TextBlock">
<Setter Property="Margin" Value="3" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style TargetType="ComboBox">
<Setter Property="Margin" Value="3" />
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock VerticalAlignment="Center" Text="Connect To" />
<TextBox
Grid.Column="1"
Grid.ColumnSpan="2"
Text="IP/HostName" />
<TextBlock Grid.Row="1" Text="Log Cmd" />
<ComboBox
x:Name="Job"
Grid.Row="1"
Grid.Column="1">
<ComboBoxItem Content="Trace" />
<ComboBoxItem Content="List" />
<ComboBoxItem Content="Dump" />
<ComboBoxItem Content="Off" />
</ComboBox>
<TextBox
Grid.Row="1"
Grid.Column="2"
VerticalContentAlignment="Center"
Text="Line" />
</Grid>
<Grid>
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="3" />
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Content=" Play " />
<Button Grid.Column="1" Content=" Stop " />
<Button
Grid.Row="1"
Grid.ColumnSpan="2"
Content=" Job " />
</Grid>
<Grid>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Margin" Value="3" />
</Style>
<Style TargetType="CheckBox">
<Setter Property="Margin" Value="3" />
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.ColumnSpan="3" Text="Protocol" />
<TextBlock
Grid.Row="1"
Grid.Column="1"
Text="Rx" />
<TextBlock
Grid.Row="1"
Grid.Column="2"
Text="Tx" />
<TextBlock Grid.Row="2" Text="RSP" />
<CheckBox Grid.Row="2" Grid.Column="1" />
<CheckBox Grid.Row="2" Grid.Column="2" />
</Grid>
</WrapPanel>
</Grid>
Also, I would recommend reading the following article about Panels and Containers in WPF https://www.codeproject.com/Articles/140613/WPF-Tutorial-Layout-Panels-Containers-Layout-Trans
Edit: Other than that I advise to avoid setting hard Width and Height for the containers and most of the controls. Also do not fear to nest containers into one another to achieve the desired result. It's much easier to create and work with nested containers than with a mega Grid.

The main problem is in your row/column definitions. By using starred values, you instruct the application to scale the width/height relative to the other columns/rows.
In other words, to make the controls stay where they are when resizing, remove the stars from the ColumnDefinitions / RowDefinitions.

GridSplitter getting stuck after dragging some pixels

GridSplitter getting stuck after dragging some pixels,and have to reselect the splitter and drag again.
I am using RadTreeView in one column, and ListBox in second column, in which user can select Item from ListBox and Drag it into RadTreeView.
Please find below screenshot for the UI.
I tried to find solution on SO, but not getting any useful answer.
Please find below code for the same, Let me know if you require more information for the same.
<UserControl x:Class="StructureDesigner.StructureDesigner"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:dragDrop="clr-namespace:Telerik.Windows.Controls.DragDrop;assembly=Telerik.Windows.Controls"
xmlns:vm="clr-namespace:StructureDesigner.ViewModel"
MinHeight="400" MinWidth="400" AllowDrop="True" telerik:DragDropManager.AllowCapturedDrag="True" Name="StructureDesignerScreen">
<UserControl.Resources>
<Style TargetType="telerik:RadTreeViewItem">
<Setter Property="AllowDrop" Value="true" />
<Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" />
<Setter Property="telerik:DragDropManager.AllowDrag" Value="True" />
</Style>
<Style TargetType="ListBoxItem">
<Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" />
</Style>
</UserControl.Resources>
<Grid x:Name="MainGrid" ScrollViewer.CanContentScroll="false" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter x:Name="gridSplitter" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" Width="10" Background="DarkGray" Height="Auto" />
<telerik:RadTreeView x:Name="radStructureTreeView" IsDragTooltipEnabled="True" IsDragDropEnabled="True"
IsDragPreviewEnabled="True" IsDropPreviewLineEnabled="True"
Grid.Row="0" Grid.Column="0" SelectionMode="Extended"
HorizontalAlignment="Stretch" Margin="2,2,11,2" IsLoadOnDemandEnabled="True"
LoadOnDemand="radStructureTreeView_LoadOnDemand"
ExpanderStyle="{StaticResource ExpanderStyle}"
ItemContainerStyle="{StaticResource ItemContainerStyle}"
IsExpandOnSingleClickEnabled="False" ItemsSource="{Binding StructureDesignerList}"
ItemTemplate="{StaticResource NavigationTemplate}"
telerik:TreeViewSettings.DragDropExecutionMode="New"
>
</telerik:RadTreeView>
<Grid Grid.Row="0" Grid.Column="1" Name="gridEntities" HorizontalAlignment="Stretch" Margin="1,2,2,2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ListBox x:Name="listBox1" Grid.Row="0" Grid.Column="0" Margin="8" HorizontalAlignment="Stretch"
SelectionMode="Extended" Width="Auto" ItemsSource="{Binding EntityList}"
AllowDrop="True">
<ListBox.ContextMenu>
<ContextMenu>
<MenuItem Header="Hide posted entities" Tag="Hide posted entities" IsCheckable="True" IsChecked="{Binding Path=IsHidePostedEntitiesChecked}"></MenuItem>
</ContextMenu>
</ListBox.ContextMenu>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Label Name="lblSpacer1" Height="5"></Label>
<StackPanel Orientation="Horizontal">
<Image Grid.Column="1" Width="25" Height="16" Source="{Binding Path=Icon}" VerticalAlignment="Top"></Image>
<Label Content="" Width="1" Height="16" ></Label>
<TextBlock Text="{Binding Description}" FontWeight="Bold" VerticalAlignment="Center" />
</StackPanel>
<Label Name="lblSpacer2" Height="5"></Label>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
</UserControl>

Strange layout issue MVVM .Net 4.7.2 App controls disappear

I’m building a MVVM app using .Net 4.7.2 that works like a wizard (based on https://www.codeproject.com/KB/WPF/InternationalizedWizard.aspx?display=Print), so no additional frameworks, just the RelayCommand class, a MainWindow.cs that hosts the Main view (the view that has navigation items of the wizard on the left side, and the right side area that hosts the subviews which display based on the stage of the wizard).
Mi issue is that one of my users is experiencing a very strange behaviour with the controls. This is a sample photo of what the application should look like:
And this is a sample photo of what happens to the user. Notice that the image on the bottom left disappears, the bar on the bottom left also disappears, the heading and top text have moved up and clipped inside the window, and the rest of the content in the right side disappears.
Similar to the base InternationalizedWizard App I placed the controls in a grid that has horizontal + vertical alignment set to stretch. The
<Border Background="White" Grid.Column="1" Grid.Row="0">
<ScrollViewer>
<HeaderedContentControl Content="{Binding Path=CurrentPage}" Header="{Binding Path=CurrentPage.DisplayName}" />
</ScrollViewer>
</Border>
I applied this style to the HeaderedContentControl:
<Style TargetType="{x:Type HeaderedContentControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type HeaderedContentControl}">
<StackPanel Margin="2,0">
<Grid Margin="1,1,1,12" RenderTransformOrigin="0.5,0.5">
<Rectangle Fill="{DynamicResource {x:Static SystemColors.AppWorkspaceBrushKey}}" Height="3" Margin="10,-4" Opacity="0.6" RadiusX="8" RadiusY="8" VerticalAlignment="Bottom" />
<ContentPresenter ContentSource="Header" TextBlock.FontSize="22" TextBlock.FontWeight="DemiBold" TextBlock.Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center" OpacityMask="Black" />
<Grid.Effect>
<DropShadowEffect Opacity="0.1" />
</Grid.Effect>
<Grid.RenderTransform>
<RotateTransform Angle="0" />
</Grid.RenderTransform>
</Grid>
<Grid>
<Rectangle Fill="{TemplateBinding Background}" />
<ContentPresenter ContentSource="Content" />
</Grid>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The scrollviewer only scrolls up and down if the content is large, but in this case the content should fit fine so as expected the user won't see the scrollviewer.
The image from the bottom left that strangely disappear was placed in the column 0, row 0 of the grid a custom margin so it remains in that area:
<Image Grid.Column="0" Grid.Row="0" Source="..\Assets\SplashLogo.png" HorizontalAlignment="Center" VerticalAlignment="Bottom" Stretch="None" Margin="20,20,20,20"/>
The first page (e.g. Welcome) that displays has another grid with two
<Grid>
<Grid.RowDefinitions>
<RowDefinition MinHeight="30" MaxHeight="60"/>
<RowDefinition Height="*" MinHeight="200"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{x:Static res:Strings.SomeText_Description}" FontSize="15" FontWeight="Light" Margin="20,0,20,0" TextWrapping="Wrap" />
<StackPanel Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
<Label Content="{x:Static res:Strings.WelcomeView_SomeText}" FontSize="15" FontWeight="Light" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,0,20,0" />
<TextBox Text="{Binding Path=SomeInput, UpdateSourceTrigger=PropertyChanged}" Height="25" Width="200" FontSize="15" FontWeight="Light" HorizontalAlignment="Left">
<TextBox.InputBindings>
<KeyBinding Key="Enter" Command="{Binding MoveNextFromWelcomeCommand}" CommandParameter="{Binding Path=Text, RelativeSource={RelativeSource AncestorType={x:Type TextBox}}}" />
</TextBox.InputBindings>
</TextBox>
</StackPanel>
</Grid>
But the contents of the stack panel completely disappear of view.
Finally, the bottom area of the main view is created in a border like this one, which also completely disappears from view:
<Border Grid.Column="0" Grid.Row="1" Background="LightGray" Grid.ColumnSpan="2">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="5" Margin="4" FontSize="15" Text="{Binding Path=ReportStatus}" VerticalAlignment="Center" Visibility="{Binding Path=ShowReportStatus}" />
<!-- NAVIGATION BUTTONS -->
<Grid Grid.Column="2" Grid.Row="0" Grid.IsSharedSizeScope="True" HorizontalAlignment="Right" >
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Buttons" />
<ColumnDefinition SharedSizeGroup="Buttons" />
<ColumnDefinition SharedSizeGroup="Buttons" />
<ColumnDefinition SharedSizeGroup="Buttons" />
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Grid.Row="0" Command="{Binding Path=MovePreviousCommand}" Style="{StaticResource movePreviousButtonStyle}" />
<Button Grid.Column="2" Grid.Row="0" Command="{Binding Path=MoveNextCommand}" Style="{StaticResource moveNextButtonStyle}" />
<Button Grid.Column="3" Grid.Row="0" Command="{Binding Path=CancelCommand}" Style="{StaticResource cancelButtonStyle}" />
</Grid>
</Grid>
</Border>
I initially thought there could be an issue with the version of .NET or OS, but my users has the latest version of Windows 10 Enterprise (10.0.17134) and dual screen with 1: 3840x2160 2: 2560x1600. I have tried to replicate that on my own computer but everything works fine for me. I also tested the App in Windows 7 and it works with no issues.
I really don't understand what could be happening, does it have anything to do with the user's DPI settings or any accessibility feature?
EDIT:
To make things a bit easier, this is the full code of the main view's xaml:
<UserControl x:Class="MyCompany.MyAppName.App.View.MyAppView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:MyCompany.MyAppName.App.View"
xmlns:viewModel="clr-namespace:MyCompany.MyAppName.App.ViewModel"
xmlns:view="clr-namespace:MyCompany.MyAppName.App.View"
xmlns:res="clr-namespace:MyCompany.MyAppName.App.Assets"
xmlns:util="clr-namespace:MyCompany.MyAppName.App.Utils"
mc:Ignorable="d"
x:Name="configuratorControl" d:DesignHeight="600" d:DesignWidth="600"
>
<UserControl.Resources>
<util:PercentageConverter x:Key="percentageConverter"/>
<DataTemplate DataType="{x:Type viewModel:ObjectSelectionViewModel}">
<view:ObjectSelectionPageView/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModel:CurrentObjectComponentsViewModel}">
<view:CurrentObjectComponentsView/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModel:CurrentObjectOptionsViewModel}">
<view:CurrentObjectOptionsView/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModel:SageFourViewModel}">
<view:SageFourView/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModel:SageThreeViewModel}">
<view:SageThreeView/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewModel:ObjectViewModel}">
<view:MyNumberView/>
</DataTemplate>
<Style TargetType="{x:Type Button}">
<Setter Property="Padding" Value="3.5,0" />
<Setter Property="Margin" Value="3.5" />
<Setter Property="MinWidth" Value="80" />
<Setter Property="FontSize" Value="15"/>
<Setter Property="FontWeight" Value="Regular"/>
</Style>
<!-- This Style inherits from the Button style seen above. -->
<Style BasedOn="{StaticResource {x:Type Button}}" TargetType="{x:Type Button}" x:Key="moveNextButtonStyle">
<Setter Property="Content" Value="{x:Static res:Strings.MyAppView_Button_MoveNext}" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsOnLastPage}" Value="True">
<Setter Property="Content" Value="{x:Static res:Strings.SageThreeView_Confirm}" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsOnCreateSageThreePage}" Value="True">
<Setter Property="Content" Value="{x:Static res:Strings.MyAppView_Button_CreateSageThree}" />
</DataTrigger>
</Style.Triggers>
</Style>
<Style BasedOn="{StaticResource {x:Type Button}}" TargetType="{x:Type Button}" x:Key="cancelButtonStyle">
<Setter Property="Content" Value="{x:Static res:Strings.MyAppView_Button_Cancel}" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsOnLastPage}" Value="True">
<Setter Property="Content" Value="{x:Static res:Strings.MyAppView_Button_ExportPDF}" />
</DataTrigger>
</Style.Triggers>
</Style>
<Style BasedOn="{StaticResource {x:Type Button}}" TargetType="{x:Type Button}" x:Key="movePreviousButtonStyle">
<Setter Property="Content" Value="{x:Static res:Strings.MyAppView_Button_MovePrevious}" />
</Style>
<!-- HEADERED CONTENT CONTROL STYLE -->
<Style TargetType="{x:Type HeaderedContentControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type HeaderedContentControl}">
<StackPanel Margin="2,0">
<Grid Margin="1,1,1,12" RenderTransformOrigin="0.5,0.5">
<Rectangle Fill="{DynamicResource {x:Static SystemColors.AppWorkspaceBrushKey}}" Height="3" Margin="10,-4" Opacity="0.6" RadiusX="8" RadiusY="8" VerticalAlignment="Bottom" />
<ContentPresenter ContentSource="Header" TextBlock.FontSize="22" TextBlock.FontWeight="DemiBold" TextBlock.Foreground="Black" HorizontalAlignment="Center" VerticalAlignment="Center" OpacityMask="Black" />
<Grid.Effect>
<DropShadowEffect Opacity="0.1" />
</Grid.Effect>
<Grid.RenderTransform>
<RotateTransform Angle="0" />
</Grid.RenderTransform>
</Grid>
<Grid>
<Rectangle Fill="{TemplateBinding Background}" />
<ContentPresenter ContentSource="Content" />
</Grid>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="workflowStepTemplate">
<Border x:Name="bdOuter" BorderBrush="Black" BorderThickness="0,0,1,1" CornerRadius="12" Margin="1,1,1,12" Opacity="0.25" SnapsToDevicePixels="True">
<Border x:Name="bdInner" Background="White" BorderBrush="DarkBlue" BorderThickness="2,2,1,1" CornerRadius="12" Padding="2">
<TextBlock x:Name="txt" Margin="4,0,0,0" FontSize="15" FontWeight="Light" Text="{Binding Path=DisplayName}" />
</Border>
</Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsCurrentPage}" Value="True">
<Setter TargetName="txt" Property="FontWeight" Value="SemiBold" />
<Setter TargetName="bdInner" Property="Background" Value="White" />
<Setter TargetName="bdOuter" Property="Opacity" Value="1" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</UserControl.Resources>
<Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=configuratorControl}" Height="{Binding ActualHeight, ElementName=configuratorControl}">
<Canvas x:Name="searchCanvas" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Panel.ZIndex="3" Width="{Binding ActualWidth, ElementName=configuratorControl}" Height="{Binding ActualHeight, ElementName=configuratorControl}" Visibility="{Binding SearchBoxVisibility}">
<Grid Panel.ZIndex="4" Width="{Binding ActualWidth, ElementName=searchCanvas}" Height="{Binding ActualHeight, ElementName=searchCanvas}">
<StackPanel Panel.ZIndex="4" Orientation="Vertical" Width="270" Height="70" VerticalAlignment="Center" HorizontalAlignment="Center" >
<StackPanel Orientation="Horizontal" >
<TextBlock Margin="5" FontSize="15" Text="Serial Number:" Width="100" Height="25" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
<TextBox Text="{Binding MyNumber, UpdateSourceTrigger=PropertyChanged}" Margin="5" Width="150" Height="25" />
</StackPanel>
<DockPanel HorizontalAlignment="Stretch">
<Button Margin="5" Content="Dismiss" Width="100" HorizontalAlignment="Left" Command="{Binding DismissSearchDraftCommand}"/>
<Button Margin="5" Content="Search" Width="100" HorizontalAlignment="Right" Command="{Binding StartSearchDraftCommand}"/>
</DockPanel>
</StackPanel>
<Rectangle Panel.ZIndex="3" Fill="LightBlue" Width="300" Height="100" />
</Grid>
<Rectangle Panel.ZIndex="2" Fill="LightGray" Opacity="0.4" Canvas.Left="0" Canvas.Top="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=configuratorControl}" Height="{Binding ActualHeight, ElementName=configuratorControl}" />
</Canvas>
<Grid Background="#11000000" Margin="1" Panel.ZIndex="2" IsEnabled="{Binding GridResultsEnabled}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="{Binding ActualHeight, ElementName=configuratorControl, Converter={StaticResource percentageConverter}, ConverterParameter=99.5}" Width="{Binding ActualWidth, ElementName=configuratorControl, Converter={StaticResource percentageConverter}, ConverterParameter=99.5}">
<Grid.BitmapEffect>
<BlurBitmapEffect Radius="{Binding GridBoxBlur}" KernelType="Box" />
</Grid.BitmapEffect>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="220" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="60" />
</Grid.RowDefinitions>
<!-- Workflow step listing -->
<HeaderedContentControl Header="{x:Static res:Strings.MyAppView_HeaderSteps}">
<ItemsControl ItemsSource="{Binding Path=Pages}" ItemTemplate="{StaticResource workflowStepTemplate}" />
</HeaderedContentControl>
<Button FontSize="15" Style="{StaticResource HyperLinkButtonStyle}" Margin="20,20,20,140" VerticalAlignment="Bottom" HorizontalAlignment="Center" Content="{x:Static res:Strings.MyAppView_Button_Search_Full}" Command="{Binding Path=OpenSearchFullCommand}"/>
<Button FontSize="15" Style="{StaticResource HyperLinkButtonStyle}" Margin="20,20,20,170" VerticalAlignment="Bottom" HorizontalAlignment="Center" Content="{x:Static res:Strings.MyAppView_Button_Search_Draft}" Command="{Binding Path=OpenSearchDraftCommand}"/>
<Button Margin="20,295,20,20" Command="{Binding Path=StartAgainCommand}" Content="{x:Static res:Strings.SageThreeView_StartAgain}" VerticalAlignment="Top" />
<Image Grid.Column="0" Grid.Row="0" Source="..\Assets\SplashLogo.png" HorizontalAlignment="Center" VerticalAlignment="Bottom" Stretch="None" Margin="20,20,20,20"/>
<!-- CURRENT PAGE AREA -->
<Border Background="White" Grid.Column="1" Grid.Row="0">
<ScrollViewer>
<HeaderedContentControl Content="{Binding Path=CurrentPage}" Header="{Binding Path=CurrentPage.DisplayName}" />
</ScrollViewer>
</Border>
<Border Grid.Column="0" Grid.Row="1" Background="LightGray" Grid.ColumnSpan="2">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="5" Margin="4" FontSize="15" Text="{Binding Path=SageThreeStatus}" VerticalAlignment="Center" Visibility="{Binding Path=ShowSageThreeStatus}" />
<!-- NAVIGATION BUTTONS -->
<Grid Grid.Column="2" Grid.Row="0" Grid.IsSharedSizeScope="True" HorizontalAlignment="Right" >
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Buttons" />
<ColumnDefinition SharedSizeGroup="Buttons" />
<ColumnDefinition SharedSizeGroup="Buttons" />
<ColumnDefinition SharedSizeGroup="Buttons" />
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Grid.Row="0" Command="{Binding Path=MovePreviousCommand}" Style="{StaticResource movePreviousButtonStyle}" />
<Button Grid.Column="2" Grid.Row="0" Command="{Binding Path=MoveNextCommand}" Style="{StaticResource moveNextButtonStyle}" />
<Button Grid.Column="3" Grid.Row="0" Command="{Binding Path=CancelCommand}" Style="{StaticResource cancelButtonStyle}" />
</Grid>
</Grid>
</Border>
</Grid>
</Canvas>
</UserControl>

DataTrigger Border in a ListBoxItem

I'm trying to change the backgroundcolor and borderbrush color of a ListBoxItem.
<Window x:Class="Application1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:PE2_WPF_Jelle_Vandekerckhove"
Title="MainResolutions" Height="500" Width="300" ResizeMode="NoResize" Closed="Window_Closed">
<Window.Resources>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Resafgehandeld}" Value="True">
<Setter Property="Background" Value="LightGreen" />
<Setter Property="BorderBrush" Value="DarkGreen" />
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel Orientation="Vertical" Background="Aquamarine">
<TextBlock Text="Mijn Resolutions voor het jaar 2015" Margin="5" Background="White" />
<ListBox Name="lstResolutions" Height="160">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Name="Rand" BorderBrush="Black" BorderThickness="2" Padding="5" Margin="5" CornerRadius="10" Width="240">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Resolutie : "/>
<TextBlock Grid.Column="1" Text="{Binding Resitem}"/>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Deadline : "/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Resdeadline}" />
<TextBlock Grid.Row="2" Grid.Column="0" Text="Reden :" />
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Resopmerking}" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I tried using <Style TargetType="ListBoxItem"> instead of <Style TargetType="Border"> which worked but it's not what i want, i want the Border background of that listboxitem changed but i can't seem to access it. Any help would be appreciated.

It's not working because you have the BorderBrush hard-coded in the attribute, which takes precedence. Update so that the style is not a resource, and add the Trigger to the Border itself.
<Window x:Class="Application1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:PE2_WPF_Jelle_Vandekerckhove"
Title="MainResolutions" Height="500" Width="300" ResizeMode="NoResize" Closed="Window_Closed">
<StackPanel Orientation="Vertical" Background="Aquamarine">
<TextBlock Text="Mijn Resolutions voor het jaar 2015" Margin="5" Background="White" />
<ListBox Name="lstResolutions" Height="160">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Name="Rand" BorderThickness="2" Padding="5" Margin="5" CornerRadius="10" Width="240">
<Border.Style>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="Black" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Resafgehandeld}" Value="True">
<Setter Property="Background" Value="LightGreen" />
<Setter Property="BorderBrush" Value="DarkGreen" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Resolutie : "/>
<TextBlock Grid.Column="1" Text="{Binding Resitem}"/>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Deadline : "/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Resdeadline}" />
<TextBlock Grid.Row="2" Grid.Column="0" Text="Reden :" />
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Resopmerking}" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>

Bind based on a condition

Hi. I'm running into issues with having a RadExpander in a RadListBox. Basically, I have exactly something like here or here.
I have a OneWayToSource binding, but I want the binding to happen only when the RadExpander is expanded and not when it is collapsed.
Is there a way I can conditionally bind the two UI Elements?
EDIT: (Sample code which makes some of the downvoters happy)
<DataTemplate x:Key="ListBoxItemTemplate" DataType="{x:Type telerik:RadListBoxItem}">
<!--<DataTemplate.Triggers>
<DataTrigger Binding="{Binding ElementName=listExpander, Path=IsExpanded, Mode=TwoWay}" Value="True">
<Setter Property="IsSelected" Value="True" />
</DataTrigger>
</DataTemplate.Triggers>-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<telerik:RadExpander x:Name="listExpander"
IsExpanded="{Binding Mode=TwoWay, IsAsync=True, Path=IsSelected, RelativeSource={RelativeSource AncestorType=telerik:RadListBoxItem, Mode=FindAncestor}}"
VerticalContentAlignment="Top" ToolTip="Double click on the List name to edit it">
<telerik:RadExpander.Header>
<Grid>
<TextBlock x:Name="listNameCaption" MouseDown="listName_txtblk_MouseDown"
Text="{Binding ListName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource HighlightedDetailsStyleForTextBlock}" />
<TextBox LostFocus="listName_txtbox_LostFocus" Visibility="Collapsed"
Text="{Binding ListName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource HighlightedDetailsStyleForTextBox}" />
</Grid>
</telerik:RadExpander.Header>
<telerik:RadExpander.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border BorderBrush="#FFDADADA" BorderThickness="0,0,1,1" MinHeight="20" MinWidth="200" CornerRadius="3" Margin="5">
<Border BorderBrush="#B2ADBDD1" BorderThickness="1" CornerRadius="2">
<StackPanel>
<StackPanel Orientation="Horizontal">
<Label FontFamily="Segoe UI" FontSize="11" Content="List Type:" FontStyle="Italic" />
<Label FontFamily="Segoe UI" FontSize="11" Content="{Binding ListType}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label FontFamily="Segoe UI" FontSize="11" Content="Tree:" FontStyle="Italic" />
<Label FontFamily="Segoe UI" FontSize="11" Content="{Binding TreeName}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label FontFamily="Segoe UI" FontSize="11" Content="Discount Date:" FontStyle="Italic" />
<Label FontFamily="Segoe UI" FontSize="11" Content="{Binding DiscountDate}" />
</StackPanel>
</StackPanel>
</Border>
</Border>
</Grid>
</telerik:RadExpander.Content>
<!--<telerik:RadExpander.Style>
<Style TargetType="{x:Type telerik:RadExpander}">
<Style.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter Property="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem, Mode=FindAncestor}, Path=IsSelected}" Value="True"/>
</Trigger>
</Style.Triggers>
</Style>
</telerik:RadExpander.Style>-->
</telerik:RadExpander>
</Grid>
</DataTemplate>
<telerik:RadListBox x:Name="allListBox"
Style="{StaticResource ListBoxStyle}"
ItemsSource="{Binding Lists, Mode=TwoWay}"
ItemTemplate="{StaticResource ListBoxItemTemplate}"
SelectedItem="{Binding SelectedListItem, Mode=TwoWay}">
<telerik:RadListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</telerik:RadListBox.ItemsPanel>
</telerik:RadListBox>
EDIT 2:
Fixed it, but from code behind. Wish there was a cleaner way where we could just say: "RadExpander - you bind to RadListBoxItem's IsSelected property only if you have IsExpanded=True" from XAML.
This is the work-around code:
private void ListItemExpanded(object sender, RadRoutedEventArgs e)
{
var listItem = sender as RadExpander;
if(listItem == null)
return;
if (!listItem.IsExpanded) return;
var parent = VisualTreeHelper.GetParent(listItem);
while (parent != null && !(parent is RadListBoxItem))
{
parent = VisualTreeHelper.GetParent(parent);
}
if(parent == null)
return;
var listBoxItem = parent as RadListBoxItem;
if (!listBoxItem.IsSelected)
listBoxItem.IsSelected = true;
}
and
<telerik:RadExpander x:Name="listExpander" Expanded="ListItemExpanded" VerticalContentAlignment="Top" ToolTip="Double click on the List name to edit it">

Solution 1. React to the expand events and change the binding of your element through code.
Solution 2: Use MultiBinding and IMultiValueConverter: http://www.switchonthecode.com/tutorials/wpf-tutorial-using-multibindings