We Keep Coding

WPF Arrow Key Event/Input Binding

I have a semi-complicated WPF control. Here is the basic setup with some of the unnecessary parts removed/simplified.
<CustomContentControl x:Class="Views.ChartView"
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:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:controls="clr-namespace:Controls"
xmlns:vCharting="clr-namespace:Charting;assembly=Direct3D"
mc:Ignorable="d">
<CustomContentControl.Resources>
<ResourceDictionary>
<ControlTemplate x:Key="MyDataTemplate">
<controls:CommandsPanel DisplayManager="{DynamicResource DisplayManager}" ActivatedCommand="{Binding ActivatedCommand}" Focusable="True">
<controls:CommandsPanel.FlyoutItems>
<controls:FlyoutItem Text="Display"
CollapsedTemplate="{StaticResource ChartsDisplayCommandsCollapsed}"
ExpandedTemplate="{StaticResource ChartsDisplayCommandsExpanded}" />
<controls:FlyoutItem Text="Style"
CollapsedTemplate="{StaticResource ChartsStyleCommandsCollapsed}"
ExpandedTemplate="{StaticResource ChartsStyleCommandsExpanded}" />
</controls:CommandsPanel.FlyoutItems>
<vCharting:WpfChartViewer ChartManager="{Binding Chart.ChartManager}"
ChartType="{Binding Chart.ChartType}"
SingleXAxisEnabled="{Binding Chart.IsSingleXAxisEnabled}"
FirstChartOffset="{Binding Chart.FirstChartOffset, Mode=TwoWay}"
ZoomBoxEnabled="{Binding Chart.IsZoomBoxEnabled, Mode=TwoWay}"
Focusable="True">
<i:Interaction.Triggers>
<i:EventTrigger EventName="ChartYAxisDoubleClicked">
<i:InvokeCommandAction Command="{Binding Chart.ShowYAxisDialogCommand}" />
</i:EventTrigger>
<i:EventTrigger EventName="ChartXAxisDoubleClicked">
<i:InvokeCommandAction Command="{Binding Chart.ShowXAxisDialogCommand}" />
</i:EventTrigger>
<i:EventTrigger EventName="ChartClickedWithNoCursor">
<i:InvokeCommandAction Command="{Binding Chart.TurnOnChartLineCursor}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<vCharting:WpfChartViewer.InputBindings>
<KeyBinding Key="Right" Command="{Binding Chart.RightArrowKeyPressedCommand}"/>
</vCharting:WpfChartViewer.InputBindings>
</vCharting:WpfChartViewer>
</controls:CommandsPanel>
</ControlTemplate>
<Style x:Key="StructureViewStyle" TargetType="ContentControl">
<Setter Property="Template" Value="{StaticResource StructureTemplate}" />
</Style>
<Style x:Key="SourceViewStyle1" TargetType="ContentControl">
<Setter Property="DataContext" Value="{Binding Source1}" />
<Setter Property="Template" Value="{StaticResource MyDataTemplate}" />
</Style>
<Style x:Key="SourceViewStyle2" TargetType="ContentControl">
<Setter Property="DataContext" Value="{Binding Source2}" />
<Setter Property="Template" Value="{StaticResource MyDataTemplate}" />
</Style>
</ResourceDictionary>
</CustomContentControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="6" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentControl Grid.Column="0" Style="{StaticResource StructureViewStyle}" />
<GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" />
<UniformGrid Grid.Column="2" Columns="1" Rows="2">
<ContentControl Style="{StaticResource SourceViewStyle1}" />
<ContentControl Style="{StaticResource SourceViewStyle2}" />
</UniformGrid>
</Grid>
</CustomContentControl>
Explanation: I have a custom ContentControl, which has a few Resources, including a ControlTemplate. This ControlTemplate is used in a couple Styles, also in Resources, then those Styles are used down in ContentControls in the Grid, contained within the custom ContentControl.
What I am trying to do is have arrow key bindings that would invoke a command that's on my ViewModel (DataContext).
I've tried using an InputBinding, which is currently shown, and I've also tried using Interaction Triggers/EventTriggers. The command does not fire for ANY key press using both the KeyDown and PreviewKeyDown events via Interaction Triggers. However, if I replace the EventName property in the EventTrigger with a MouseDown, the command on my ViewModel DOES fire.
For all cases, when I press the arrow keys, all that happens is I get shifting focus between all the different controls on the screen. I've looked around and found something about setting KeyboardNavigation.DirectionalNavigation to None on every control in the chain, from the top level window down, but that didn't do anything for me.
I've tried these KeyBindings and Interaction Triggers in both the controls:CommandsPanel and the vWpf:WpfModelViewer, and I've set both of those controls' Focusable properties to True. Doesn't help anything.
It seems like something is consuming the KeyDown/PreviewKeyDown event before my control can see it, as evidenced by the fact that the MouseDown event works, but I can't figure out who would be consuming them or how to turn it off.

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

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

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

Actually using the Tile Control in MahApps Metro?

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

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

How to enable users to edit a control style in runtime?

What approach can be used for enabling users to define their own application preferences by setting personal values in some custom controls styles?
We can set them in XAML in design-time:
<UserControl.Resources>
<Style TargetType="{x:Type cc:MyControl}">
<Setter Property="SWidth" Value="20" />
...
<Setter Property="SBrush" Value="Blue" />
</Style>
</UserControl.Resources>
But how to edit these style values in runtime?

You'll want to bind the values in your style to some static class—for example, the application's default settings—that can be modified by whatever class defines what the values should be.
In the app below, I created a property called FontSize in the Settings.settings file. I added the appropriate namespace in the XAML file and can now bind to it as I like:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="clr-namespace:WpfApplication1"
xmlns:prop="clr-namespace:WpfApplication1.Properties"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.Resources>
<Style TargetType="TextBlock" x:Key="myStyle">
<Setter Property="FontSize" Value="{Binding FontSize, Source={x:Static prop:Settings.Default}}" />
</Style>
</Grid.Resources>
<TextBlock Style="{DynamicResource myStyle}" Text="The quick brown fox jumped over the lazy dog." />
<TextBox Grid.Row="1" Text="{Binding FontSize, Source={x:Static prop:Settings.Default}, UpdateSourceTrigger=PropertyChanged}" />
</Grid>
</Window>
I bound the value directly to a TextBox but it goes without saying that some control mechanism, in a viewmodel for instance, is strongly recommended.
Finally, if you want to save the settings, all you have to do is call the class's Save method, for example, in the event handler of the application's Exit event:
private void Application_Exit(object sender, ExitEventArgs e)
{
WpfApplication1.Properties.Settings.Default.Save();
}

What WPF control or approach for this requirement?

Just being new to WPF I"m not sure what control or approach would be best for this requirement, for a WPF application.
I want to present a summary table of information, but the user should be able to decide to view the information based on either: "All Time", Month, Week or Day.
I'd like to visually have the selection of the option appear at the top of this section and have it appear as a TabControl
I'm not sure however whether TabControl is the best choice re repeating the table for each Tab Item
So overall functionally what would work is just radio buttons across the top, however what I want visually is a TabControl look
What would be the best way to achieve the TabControl look but with a programming approach for which I don't have to repeat things in each Tab Item?
For example, would I use a TabControl and then a WPF template to do the equivalent of an include in each Tab Item but with a different input parameter? (haven't used WPF templates before)
Thanks

Since you want the behavior of a group of RadioButtons and you want the visual appearance of a TabItem, you should use RadioButton controls and style them such that they look like TabItem controls. Here is a very simple example:
<Window x:Class="TabTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<Style TargetType="{x:Type RadioButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border x:Name="tabBorder" BorderThickness="1" BorderBrush="Black"
Margin="0,0,-4,0"
CornerRadius="2,12,0,0"
Background="White"
SnapsToDevicePixels="True">
<ContentPresenter
Margin="12,2,12,2"
VerticalAlignment="Center"
HorizontalAlignment="Left"
RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="tabBorder" Property="Background" Value="LightBlue" />
<Setter TargetName="tabBorder" Property="BorderThickness" Value="1,1,1,0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Margin="4">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal" Margin="0,0,0,-1" Panel.ZIndex="1">
<RadioButton>All Time</RadioButton>
<RadioButton IsChecked="True">Month</RadioButton>
<RadioButton>Week</RadioButton>
<RadioButton>Day</RadioButton>
</StackPanel>
<Border Grid.Row="1" Background="LightBlue"
BorderThickness="1" BorderBrush="Black"
SnapsToDevicePixels="True">
<Button Margin="10" Grid.Row="1">This is a test</Button>
</Border>
</Grid>
</Window>
In this example, the Button is the place where you would put your summary table.

Greg, I suppose, grouping grid would be the most ideal control of your requirement. Either you can customize the datagrid as explained in the following article. But this would take more time to get things right.
http://blog.smoura.com/wpf-toolkit-datagrid-part-iv-templatecolumns-and-row-grouping/
or else you could make use of commercial WPF Grid grouping control which would match you requirement.

What would be the best way to achieve the TabControl look but with a programming approach for which I don't have to repeat things in each Tab Item?
Use a TabControl. Have each TabItem contain a CollectionViewSource based on the same underlying collection of data, but with a different filter. Use a DataTemplate to present the CollectionViewSource.
Filtering requires some kind of code-behind, but here's a XAML-only demo that does sorting:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase">
<Page.Resources>
<XmlDataProvider x:Key="Data">
<x:XData>
<Data xmlns="">
<Item Date="2010-01-01" Value="January"/>
<Item Date="2010-02-01" Value="February"/>
<Item Date="2010-03-01" Value="March"/>
<Item Date="2010-04-01" Value="April"/>
<Item Date="2010-05-01" Value="May"/>
<Item Date="2010-06-01" Value="June"/>
<Item Date="2010-07-01" Value="July"/>
<Item Date="2010-08-01" Value="August"/>
<Item Date="2010-09-01" Value="September"/>
</Data>
</x:XData>
</XmlDataProvider>
<CollectionViewSource x:Key="ByDate" Source="{Binding Source={StaticResource Data}, XPath=Data/Item}">
<CollectionViewSource.SortDescriptions>
<scm:SortDescription PropertyName="#Date"/>
</CollectionViewSource.SortDescriptions>
</CollectionViewSource>
<CollectionViewSource x:Key="ByValue" Source="{Binding Source={StaticResource Data}, XPath=Data/Item}">
<CollectionViewSource.SortDescriptions>
<scm:SortDescription PropertyName="#Value"/>
</CollectionViewSource.SortDescriptions>
</CollectionViewSource>
<DataTemplate DataType="{x:Type CollectionViewSource}">
<Border Margin="5" BorderBrush="DodgerBlue" BorderThickness="1" CornerRadius="4">
<DockPanel Margin="5">
<Label DockPanel.Dock="Top">This is here to show how you can make the layout of your TabItems complex without repeating yourself.</Label>
<ListBox DockPanel.Dock="Top" x:Name="Items" ItemsSource="{Binding}" DisplayMemberPath="#Value" SelectedValuePath="#Value"/>
<DockPanel>
<Label>Selected item: </Label>
<Label Content="{Binding ElementName=Items, Path=SelectedValue}"/>
</DockPanel>
</DockPanel>
</Border>
</DataTemplate>
</Page.Resources>
<Grid>
<TabControl>
<TabItem Header="By date" Content="{StaticResource ByDate}"/>
<TabItem Header="By value" Content="{StaticResource ByValue}"/>
</TabControl>
</Grid>
</Page>