We Keep Coding

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>

I want to see my design that´s in a expander XAML

How can i see my design that´s in the expander in design view? I use VS2015.
<Grid Grid.Row="2" Height="30" Background="{StaticResource HeaderBackground}" Margin="5">
<TextBlock Foreground="{StaticResource HeaderText}" Text="Old Events" FontSize="15" Margin="10,0,0,0" />
<Expander HorizontalAlignment="Left"
VerticalAlignment="Center"
IsExpanded="True"
ExpandDirection="Down"
FlowDirection="RightToLeft">
<Grid FlowDirection="LeftToRight">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Margin="5,0,5,0" Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="6"" />
<ColumnDefinition Width="56"/>
<ColumnDefinition Width="18"/>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="106" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="15"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="0,0,0,2"/>
</Style>
</Grid.Resources>
<TextBlock Grid.Column="0" Text="Id" Margin="0,4,0,6" Grid.ColumnSpan="2"/>
<TextBlock Grid.Row="0" Grid.Column="3" Text="Event" Margin="0,4,0,6"/>
<TextBlock Grid.Row="0" Grid.Column="4" Text="Namn" Margin="0,4,0,6"/>
<TextBlock Grid.Row="0" Grid.Column="5" Text="Tidpunkt" Margin="0,4,0,6"/>
<Border Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="6" BorderThickness="0,0,0,1" BorderBrush="Black"/>
<ListView Grid.Column="0" Grid.ColumnSpan="6" Grid.Row="1" x:Name="OldEventsListView" Style="{x:Null}" ItemsSource="{Binding NotificationEvents}" BorderThickness="0" Width="488" Height="150" HorizontalAlignment="Left" Margin="0,0,-2,-150" Grid.RowSpan="2">
<ListView.Resources>
<DataTemplate DataType="{x:Type local:NotificationEventViewModel+NotificationEvent}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A" />
<ColumnDefinition SharedSizeGroup="B" />
<ColumnDefinition SharedSizeGroup="B"/>
<ColumnDefinition SharedSizeGroup="C"/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Height" Value="30"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
</Grid.Resources>
<Border BorderThickness="0,0,0,1" BorderBrush="LightGray" Grid.ColumnSpan="4" Margin="0,5,0,5" />
<TextBlock Grid.Column="0" Text="{Binding Id}" />
<TextBlock Grid.Column="1" Text="{Binding Event}"/>
<TextBlock Grid.Column="2" Text="{Binding Name}"/>
<TextBlock Grid.Column="3" Text="{Binding TimeStamp}"/>
</Grid>
</DataTemplate>
</ListView.Resources>
</ListView>
</Grid>
<Grid Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Bottom">
<Button Background="MidnightBlue" Foreground="White" FontSize="14" FontWeight="Medium" Click="GetTenMoreEvents">
<Button.Content>
<TextBlock Text="10 till"/>
</Button.Content>
</Button>
</Grid>
</Grid>
</Expander>
</Grid>
I thought that IsExpanded="True" would do the thing. But it´s no different. In the picture you can see my design. Here i want my expander to show my "Old Events" listview. So the problem is in Visual Studio, not when I fire my program.
Thanks for the help.

I have now found the solution for my problem.
I had done wrong with my <Grid> and added one too many.
<Grid Grid.Row="2" Height="30" Background="{StaticResource HeaderBackground}" Margin="5">
<TextBlock Foreground="{StaticResource HeaderText}" Text="Old Events" FontSize="15" Margin="10,0,0,0" />
</Grid>
<Grid Grid.Row="3">
<Expander HorizontalAlignment="Left"
VerticalAlignment="Center"
ExpandDirection="Down">
<Grid Margin="5,0,5,0" Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="80" SharedSizeGroup="A" />
<ColumnDefinition Width="150" SharedSizeGroup="B" />
<ColumnDefinition SharedSizeGroup="B" />
<ColumnDefinition Width="106" SharedSizeGroup="C" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="15"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="0,0,0,2"/>
</Style>
</Grid.Resources>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Id" />
<TextBlock Grid.Row="0" Grid.Column="1" Text="Event"/>
<TextBlock Grid.Row="0" Grid.Column="2" Text="Name"/>
<TextBlock Grid.Row="0" Grid.Column="3" Text="Timestamp"/>
<Border Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="4" BorderThickness="0,0,0,1" BorderBrush="Black"/>
<ListView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4" x:Name="OldEventsListView" Style="{x:Null}" ItemsSource="{Binding NotificationEvents}" BorderThickness="0" Width="488" Height="150" HorizontalAlignment="Left" Grid.RowSpan="2">
<ListView.Resources>
<DataTemplate DataType="{x:Type model:NotificationEvent}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A" />
<ColumnDefinition SharedSizeGroup="B" />
<ColumnDefinition SharedSizeGroup="B"/>
<ColumnDefinition SharedSizeGroup="C"/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Height" Value="30"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
</Grid.Resources>
<Border BorderThickness="0,0,0,1" BorderBrush="LightGray" Grid.ColumnSpan="4" Margin="0,5,0,5" />
<TextBlock Grid.Column="0" Text="{Binding Id}" />
<TextBlock Grid.Column="1" Text="{Binding Event}"/>
<TextBlock Grid.Column="2" Text="{Binding Name}"/>
<TextBlock Grid.Column="3" Text="{Binding TimeStamp}"/>
</Grid>
</DataTemplate>
</ListView.Resources>
</ListView>
<Button Grid.Row="2" Grid.Column="3" HorizontalAlignment="Right" VerticalAlignment="Bottom" Background="MidnightBlue" Foreground="White" FontSize="14" FontWeight="Medium" Click="GetTenMoreEvents">
<Button.Content>
<TextBlock Text="10 till"/>
</Button.Content>
</Button>
</Grid>
</Expander>
</Grid>
So I remove <Grid Grid.Row="0" Margin="5,0,5,0" Grid.IsSharedSizeScope="True"> because this was totally wrong. Now the expander works as a charm.

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 datatemplate textblock tag

I have code:
<DataTemplate x:Key="SelectedTime">
<Border BorderBrush="DimGray" BorderThickness="4" Margin="-3,-2,-2,-4" Height="35">
<Grid Width="61" Height="31" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="LightGray" >
<Grid.RowDefinitions>
<RowDefinition Height="14"/>
<RowDefinition Height="15"/>
</Grid.RowDefinitions>
<Grid Background="LightBlue" Grid.Row="0" Margin="0,0,0,0">
<TextBlock TextBlock.FontSize="12" HorizontalAlignment="Left" VerticalAlignment="Stretch" TextAlignment="Center" Margin="6,-2,0,0"
Text="{TemplateBinding Tag}"/>
</Grid>
<TextBlock Grid.Row="1" Text="{TemplateBinding Content}" HorizontalAlignment="Left" VerticalAlignment="Stretch" TextAlignment="Center" TextBlock.FontSize="10" Height="12" Margin="16,-2,0,0"/>
</Grid>
</Border>
</DataTemplate>
<Style x:Key="LowerRadioButton"
TargetType="RadioButton"
BasedOn="{StaticResource {x:Type ToggleButton}}">
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="ContentTemplate" Value="{StaticResource SelectedTime}" />
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="ContentTemplate" Value="{StaticResource OrdinaryTime}" />
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<Grid Height="35" x:Name="testGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="15"/>
</Grid.RowDefinitions>
<RadioButton Style="{StaticResource LowerRadioButton}" Content="12.10" Tag="1" Grid.Column="0" Grid.RowSpan="2" />
<RadioButton Style="{StaticResource LowerRadioButton}" Content="13.10" Tag="2" Grid.Column="1" Grid.RowSpan="2" />
<RadioButton Style="{StaticResource LowerRadioButton}" Content="14.10" Tag="3" Grid.Column="2" Grid.RowSpan="2" IsChecked="True" />
</Grid >
I need to bind to tag in my DataTemplate. Tried through construnction "{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}", but it disn't bind, shows the empty text. What am I doing wrong?

You should know that TemplateBinding can be used only in ControlTemplate, not DataTemplate. So you can try something like this as a workaround:
<TextBlock TextBlock.FontSize="12" HorizontalAlignment="Left"
VerticalAlignment="Stretch" TextAlignment="Center" Margin="6,-2,0,0"
Text="{Binding Tag,
RelativeSource={RelativeSource AncestorType=RadioButton}}"/>

The resource "xxx" could not resolved

Hi i am working with C# Wpf application.I am continuously getting red squiggly where i am importing my Style for button:
Style="{StaticResource AppButtons}"
It is compiling correctly but continuously giving warning :
The resource "AppButtons" could not resolved.
The full XAML code is :
<UserControl x:Class="AFIC.View.VLANS"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:res="clr-namespace:AFIC.Resources"
xmlns:view="clr-namespace:AFIC.View"
>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label
Grid.Row="0"
Grid.Column="0"
VerticalAlignment="Center"
Content="VLAN NAME"
Foreground="Black"
Opacity="0.8"
/>
<TextBox
Grid.Row="0"
Grid.Column="1"
Margin="0,5,0,0"
Height="25"
Foreground="Black"
Opacity="0.8"
Width="Auto"
Text="{Binding VlanName, UpdateSourceTrigger=PropertyChanged}"
/>
<Label
Grid.Row="1"
Grid.Column="0"
VerticalAlignment="Center"
Content="VLAN ID"
Foreground="Black"
Opacity="0.8"
/>
<TextBox
Grid.Row="1"
Grid.Column="1"
Margin="0,5,0,0"
Height="25"
Foreground="Black"
Opacity="0.8"
Width="Auto"
Text="{Binding VlanID, UpdateSourceTrigger=PropertyChanged}"
/>
<Label
Grid.Row="2"
Grid.Column="0"
VerticalAlignment="Center"
Content="IP FOR VLAN"
Foreground="Black"
Opacity="0.8"
/>
<Grid
Grid.Column="1"
Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<TextBox
Grid.Row="2"
Grid.Column="0"
Margin="5"
VerticalAlignment="Center"
MaxLength="3"
Width="30"
Foreground="Black"
Opacity="0.8"
Text="{Binding VlanIP1, UpdateSourceTrigger=PropertyChanged}"
/>
<TextBox
Grid.Row="2"
Grid.Column="1"
Margin="5"
VerticalAlignment="Center"
MaxLength="3"
Width="30"
Foreground="Black"
Opacity="0.8"
Text="{Binding VlanIP2, UpdateSourceTrigger=PropertyChanged}"
/>
<TextBox
Grid.Row="2"
Grid.Column="2"
Margin="5"
VerticalAlignment="Center"
MaxLength="3"
Width="30"
Foreground="Black"
Opacity="0.8"
Text="{Binding VlanIP3, UpdateSourceTrigger=PropertyChanged}"
/>
<TextBox
Grid.Row="2"
Grid.Column="3"
Margin="5"
VerticalAlignment="Center"
MaxLength="3"
Width="30"
Foreground="Black"
Opacity="0.8"
Text="{Binding VlanIP4, UpdateSourceTrigger=PropertyChanged}"
/>
</Grid>
<Label
Grid.Row="3"
Grid.Column="0"
VerticalAlignment="Center"
Content="DEFAULT ROUTE"
Foreground="Black"
Opacity="0.8"
/>
<Grid
Grid.Row="3"
Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<TextBox
Grid.Row="2"
Grid.Column="0"
Margin="5"
VerticalAlignment="Center"
MaxLength="3"
Width="30"
Foreground="Black"
Opacity="0.8"
Text="{Binding VlanDefaultRoute1, UpdateSourceTrigger=PropertyChanged}"
/>
<TextBox
Grid.Row="2"
Grid.Column="1"
Margin="5"
VerticalAlignment="Center"
MaxLength="3"
Width="30"
Foreground="Black"
Opacity="0.8"
Text="{Binding VlanDefaultRoute2, UpdateSourceTrigger=PropertyChanged}"
/>
<TextBox
Grid.Row="2"
Grid.Column="2"
Margin="5"
VerticalAlignment="Center"
MaxLength="3"
Width="30"
Foreground="Black"
Opacity="0.8"
Text="{Binding VlanDefaultRoute3, UpdateSourceTrigger=PropertyChanged}"
/>
<TextBox
Grid.Row="2"
Grid.Column="3"
Margin="5"
VerticalAlignment="Center"
MaxLength="3"
Width="30"
Foreground="Black"
Opacity="0.8"
Text="{Binding VlanDefaultRoute4, UpdateSourceTrigger=PropertyChanged}"
/>
</Grid>
<Button Grid.Column="3"
Grid.Row="0"
Content="Add VLAN"
Margin="10,5,0,0"
Style="{StaticResource AppButtons}"
/>
<Button Grid.Column="3"
Grid.Row="2"
Content="Remove VLAN"
Margin="10,5,0,0"
Style="{StaticResource AppButtons}"
Width="100"/>
<DataGrid Grid.Row="4"
Grid.ColumnSpan="3"
Height="200"
Margin="10,10,0,0">
</DataGrid>
</Grid>
</UserControl>
And here is my Resource dictionary code:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:res="clr-namespace:AFIC.Resources"
xmlns:VM="clr-namespace:AFIC.ViewModel"
>
<Style TargetType="{x:Type Button}" x:Key="AppButtons">
<Setter Property="Height" Value="30"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Opacity" Value="0.5" />
<Setter Property="Foreground" Value="{StaticResource ATTWhite}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="2"
BorderBrush="White"
BorderThickness="0"
Background="{StaticResource ATTBlue}"
>
<ContentPresenter
x:Name="contentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Setter Property="Opacity" Value="1" />
</Trigger>
</Style.Triggers>
</Style>
<!-- EULA Accept Buuton Style -->
<!-- Style inherits from the AppButtons style set above -->
<Style BasedOn="{StaticResource AppButtons }" TargetType="{x:Type Button}" x:Key="EULAAcceptButton">
<Setter Property="Opacity" Value="0.5" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsChecked, ElementName=EULAAcceptOption}" Value="True">
<Setter Property="Opacity" Value="1" />
</DataTrigger>
<DataTrigger Binding="{Binding IsChecked, ElementName=EULAAcceptOption}" Value="False">
<Setter Property="IsEnabled" Value="False" />
</DataTrigger>
</Style.Triggers>
</Style>
<!-- EULA Reject Buuton Style -->
<!-- Style inherits from the AppButtons style set above -->
<Style BasedOn="{StaticResource AppButtons}" TargetType="{x:Type Button}" x:Key="EULARejectButton">
<Setter Property="Opacity" Value="0.5" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsChecked, ElementName=EULARejectOption}" Value="True">
<Setter Property="Opacity" Value="1" />
</DataTrigger>
<DataTrigger Binding="{Binding IsChecked, ElementName=EULARejectOption}" Value="False">
<Setter Property="IsEnabled" Value="False" />
</DataTrigger>
</Style.Triggers>
</Style>
<!-- Next Button Style. This Style inherits from the Button style seen above. -->
<Style BasedOn="{StaticResource AppButtons }" TargetType="{x:Type Button}" x:Key="NextButtonStyle">
<Setter Property="Opacity" Value="0.5" />
<Setter Property="Content" Value="{x:Static res:Strings.WizardView_Button_Next}" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=LastPageConfigure}" Value="True">
<Setter Property="Content" Value="{x:Static res:Strings.WizardView_Button_Configure}" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=LastPageFinish}" Value="True">
<Setter Property="Content" Value="{x:Static res:Strings.WizardView_Button_Finish}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
Any suggestion to get me out of this warning would be highly appreciable!?

You should merge the Resource Dictionary (2nd snip) to where you use it (1st snip), follow the following example and you should be good to go:
Add this to your Grid node (could add it in any ancestor node of your Button):
<Grid.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="Resources/MyResourceDictionary.xaml">
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Grid.Resources>
Some good links to read regarding Resources and Resource Dictionaries:
http://www.codeproject.com/Articles/35346/Using-a-Resource-Dictionary-in-WPF
http://blogs.msdn.com/b/wpfsldesigner/archive/2010/06/03/creating-and-consuming-resource-dictionaries-in-wpf-and-silverlight.aspx

Looks like your'e not the only one who encountered such problem, and it sounds like some bug in the VS wpf designer.
However, Expression Blend 4 deals with this problem using a design time resource dictionary which helps resolving such resources.
The resource could not be resolved (VS 2010 RC)