Develop Reference

WPF : Material Design conflicts with HandyContorl dataGrid style

<Grid Grid.Row="1">
<Grid.Resources>
<ResourceDictionary Source="/HD.Core;component/Styles/handyDictionary.xaml" />
</Grid.Resources>
<DataGrid
hc:DataGridAttach.CanUnselectAllWithBlankArea="True"
AutoGenerateColumns="True"
AutoGeneratingColumn="DataGrid_AutoGeneratingColumn"
HeadersVisibility="All"
IsReadOnly="True"
ItemsSource="{Binding Print_Infos}"
RowHeaderWidth="60">
<behaviors:Interaction.Triggers>
<behaviors:EventTrigger EventName="Loaded">
<behaviors:InvokeCommandAction Command="{Binding DataGridLoadCmd}" />
</behaviors:EventTrigger>
</behaviors:Interaction.Triggers>
<DataGrid.ItemContainerStyle>
<Style BasedOn="{StaticResource {x:Type DataGridRow}}" TargetType="DataGridRow">
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</Style>
</DataGrid.ItemContainerStyle>
<DataGrid.RowHeaderTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding Item.IsSelected, RelativeSource={RelativeSource AncestorType=DataGridRow}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</DataTemplate>
</DataGrid.RowHeaderTemplate>
</DataGrid>
</Grid>
I introduced the resource style of HandyControl in Grid
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Theme.xaml" />
<ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml" />
</ResourceDictionary.MergedDictionaries>
Introduced global styles for Material Design in App.Xaml
In the end I found that the effect was not satisfactory,
How can I prevent the styles of Material Design from inheriting the styles of my DataGrid?
Thanks in advance!

Show ContextMenu of element in ListBox

Problem:
I have a ListBox in which I display my data using DataBinding. The data is displayed as a custom view SystemEnvironmentElementView.
I want to allow the user to rename single elements. This should happen in the ViewModel of the desired element.
I created a ContextMenu in the View that displays my data. However when I right click on my element the ContextMenu is not displayed. I also encountered the problem that on my PreviewMouseDown event handler I don't get the view as OriginalSource in the EventArgs but a Border.
Question:
How do I get the ContextMenu of my element to show?
ListBox Code:
<customControls:ListBoxNoDragSelection ItemsSource="{Binding Elements}" Background="{DynamicResource BG}" SelectedItem="{Binding SystemEnviromentAnalysis.SelectedElement}"
BorderThickness="0" x:Name="ListBoxNoDragSelection" SelectedValue="{Binding SelectedElement}">
<i:Interaction.Behaviors>
<dragAndDrop:FrameworkElementDropBehaviorWithMousePos />
</i:Interaction.Behaviors>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="{DynamicResource MyVisualBrush}"
Height="Auto" Width="Auto" PreviewMouseLeftButtonDown="UIElement_OnPreviewMouseLeftButtonDown"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Canvas.Left" Value="{Binding Element.X}"/>
<Setter Property="Canvas.Top" Value="{Binding Element.Y}"/>
<Setter Property="Canvas.ZIndex" Value="{Binding Element.Z}"/>
<Setter Property="Height" Value="Auto"/>
<Setter Property="Width" Value="Auto"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<systemEnvironment:SystemEnvironmentElementView/>
</DataTemplate>
</ListBox.ItemTemplate>
</customControls:ListBoxNoDragSelection>
SystemEnviromentElementView:
<UserControl x:Class="TestApp.Editor.Views.SystemEnvironment.SystemEnvironmentElementView"
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"
mc:Ignorable="d"
Height="Auto" Width="Auto">
<UserControl.ContextMenu>
<ContextMenu>
<MenuItem Header="Rename"/>
</ContextMenu>
</UserControl.ContextMenu>
<StackPanel>
<Image Height="{Binding Element.Height}" Width="{Binding Element.Width}" Grid.Row="0" Source="{Binding Element.Icon}" IsHitTestVisible="False"/>
<Label Height="Auto" Width="Auto" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" IsHitTestVisible="False"
Content="{Binding Element.Name}"/>
</StackPanel>

Small clickable area of controls at the edge of the window

I'm using MahApps.Metro 1.3.0 and have a problem with a smaller clickable area of controls at the edge of the window, but if I move them away from the edge of the window the clickable area goes back to normal.
Is there any way to fix this?
My scrollviewer xaml:
<ScrollViewer x:Name="ScrollViewer" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Auto">
<ItemsControl x:Name="DocumentList" ItemsSource="{Binding Source={StaticResource Documents}}" BorderBrush="{x:Null}" ScrollViewer.CanContentScroll="False" Margin="0,0,0,1">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock>
<Hyperlink Command="{Binding DataContext.OpenCommand, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" CommandParameter="{Binding UNID}">
<InlineUIContainer>
<TextBlock Text="{Binding DisplayName}" />
</InlineUIContainer>
</Hyperlink>
</TextBlock>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Expander Header="{Binding Name}" IsExpanded="False">
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ItemsControl.GroupStyle>
</ItemsControl>
</ScrollViewer>
And my window xaml:
<Controls:MetroWindow x:Class="MainWindow"
Name="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:data="clr-namespace:System.Windows.Data;assembly=PresentationFramework"
xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
BorderBrush="{DynamicResource AccentColorBrush}" BorderThickness="1 0 1 1"
Title="" Height="318" Width="526"
ShowIconOnTitleBar="False"
ResizeMode="NoResize"
Cursor="{Binding Cursor}"
NonActiveWindowTitleBrush="{StaticResource InactiveBlueColorBrush}">

WFP Databinding dependencies

To summarize before posting my XAML, this form is very simple for now. There is a ListBox, two buttons and a context menu for the ListBox.
If the right mouse button is clicked in the ListBox, and NO ELEMENT is selected, my context menu, performs the ADD operation, which right now is just simply popping up a message box.
When an element is selected, such as MODIFY, my bindings do not work. So I am assuming, after much reading, that I have an inheritance problem somewhere. I have tried using DataContext, RelativeSource, etc...and still no joy.
Here is my XAML
<Window x:Class="FracasReportSettings.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:ignore="http://www.ignore.com"
mc:Ignorable="d ignore"
Height="402"
Width="578"
Title="FRACAS Ticket Value Modification"
DataContext="{Binding Main, Source={StaticResource Locator}}">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Skins/MainSkin.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="91*"/>
<ColumnDefinition Width="194*"/>
</Grid.ColumnDefinitions>
<TextBlock FontSize="36"
FontWeight="Bold"
Foreground="Purple"
Text="{Binding PageTitle}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextWrapping="Wrap" Margin="266,27,10,9" Width="112" Grid.Column="1" />
<StackPanel HorizontalAlignment="Left" Height="311" Margin="40,22,0,0" VerticalAlignment="Top" Width="111">
<Button Content="Detection Method" Margin="10,10,10,10"
Command="{Binding MyBinding}"
CommandParameter="DetectionMethod"/>
<Button Content="Button" Margin="10,0,10,0"/>
</StackPanel>
<ListBox
Name="AdminList"
ItemsSource="{Binding Names}"
Height="302" Width="231" Margin="151,22,0,0"
HorizontalAlignment="Left" VerticalAlignment="Top" Grid.ColumnSpan="2"
SelectedItem="{Binding SomeName}"
>
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<Style.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="IsSelected" Value="True"/>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.Resources>
**<-- THIS WORKS FINE -->
<ListBox.ContextMenu>
<ContextMenu>
<MenuItem Header="Add"
Command="{Binding RCContentMenu}">
</MenuItem>
</ContextMenu>
</ListBox.ContextMenu>**
<--MY ERROR IS IN HERE-->
**<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="ContextMenu">
<Setter.Value>
<ContextMenu DataContext="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}, Path=DataContext}">
<MenuItem Header="Modify"
Command="{Binding Path=ModifyElementCommand}"
CommandParameter="{Binding Path=SelectedItem}"/>
</ContextMenu>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>**
</ListBox>
</Grid>
The ModifyElementCommand is sitting in a ViewModel named MainViewModel.
The error I receive from the output window is:
System.Windows.Data Error: 4 : Cannot find source for binding with
reference 'RelativeSource FindAncestor,
AncestorType='System.Windows.Controls.ListBox', AncestorLevel='1''.
BindingExpression:Path=DataContext; DataItem=null; target element is
'ContextMenu' (Name=''); target property is 'DataContext' (type
'Object')
Which I know means that the dependency cannot be found.
What should I do to fix this?

Following my comment here is the XAML:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="ContextMenu">
<Setter.Value>
<ContextMenu DataContext="{Binding RelativeSource={RelativeSource Self},Path=PlacementTarget.Tag.DataContext}">
<MenuItem Header="Modify"
Command="{Binding Path=ModifyElementCommand}"
CommandParameter="{Binding Path=SelectedItem}"/>
</ContextMenu>
</Setter.Value>
</Setter>
<Setter Property="Tag" Value="{Binding ElementName=AdminList}" />
</Style>
</ListBox.ItemContainerStyle>

Customized TabItem in ResourceDictionary

I have created a TabItem in a ResourceDictionary and use it in my UserControl but the defined content won't show up, why and how to fix this?
The ResourceDic:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">
<ControlTemplate x:Key="T1" TargetType="sdk:TabItem">
<sdk:TabItem>
<sdk:TabItem.Header>
<StackPanel Orientation="Horizontal">
<sdk:Label Content="{TemplateBinding Header}"/>
<Button Content="X" Margin="15,0,0,0"/>
</StackPanel>
</sdk:TabItem.Header>
<toolkit:DockPanel MinWidth="600">
<Grid toolkit:DockPanel.Dock="Left">
<sdk:Label Grid.Row="2" Grid.Column="0" Content="Pic:"/>
...
</Grid>
</toolkit:DockPanel>
</sdk:TabItem>
</ControlTemplate>
</ResourceDictionary>
The UserControl:
<UserControl x:Class="PortView" ....>
<UserControl.Resources>
<ResourceDictionary Source="PortfolioTemplateDictionary.xaml" />
</UserControl.Resources>
<Grid>
<sdk:TabItem Template="{StaticResource T1}" Header="Page 2"/>
</Grid
...
</UserControl>

I have now used the approach explained in this article: TabItem in a separate XAML
<UserControl x:Class="WpfApplication19.Tab1Data"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Grid>
<TextBlock Text="Tab Data" />
</Grid>
</UserControl>
<TabControl>
<TabItem Header="Tab 1">
<tabData:Tab1Data />
</TabItem>
</TabControl>