WPF Change TabIndex to not follow visual appearence order - wpf

Question

I am trying to set the tab index to follow against the order of visual appearance. Meaning the buttons that appears at the top of the window gets focused first when I specifically set it not to.
Here's how the controls are structured;
DocPanel
|
|---- DockPanel
| |----- Button
| |----- Button
| |----- Button
|
|---- Grid
|----- Canvas
|---- TabControl
|------ TextBox
|------ ComboBox
The Tab Order I want;
Canvas
TextBox
ComboBox
3 buttons
Currently order is;
3 buttons
TextBox,
ComboBox
Canvas.
I tried setting KeyboardNavigation.TabNavigation="Local" for the outer DockPanel.
Then I set TabNavigation.TabIndex and TabIndex to the number that I want but that's not working.
If controls appear visually at the top of windows, is it not possible to change the tab index to focus after the controls appearing at the bottom?
Here's my XAML:
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
FocusManager.FocusedElement="{Binding ElementName=pic}"
Title="Window1" Height="504" Width="929">
<DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" KeyboardNavigation.TabNavigation="Local">
<DockPanel DockPanel.Dock="Top" Height="30">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Content="Save and Close" KeyboardNavigation.TabIndex="4" TabIndex="4"/>
<Button Content="Forward" KeyboardNavigation.TabIndex="5" TabIndex="5" />
<Button Content="Delete" KeyboardNavigation.TabIndex="6" TabIndex="6" />
</StackPanel>
</DockPanel>
<Grid DockPanel.Dock="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="50"/>
<ColumnDefinition MinWidth="500"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Border BorderBrush="Aqua" BorderThickness="2" >
<Canvas x:Name="pic" Grid.Column="0" Grid.Row="0" KeyboardNavigation.TabIndex="1" KeyboardNavigation.IsTabStop="True" Focusable="True" >
<Canvas.Background>
<ImageBrush ImageSource="bookcover.jpg" Stretch="Fill"/>
</Canvas.Background>
</Canvas>
</Border>
<TabControl x:Name="tabs" Grid.Column="2" Grid.Row="0">
<TabItem Header="Fax Details" IsTabStop="False">
<StackPanel>
<TextBox Name="fdCustomerFileNumber" HorizontalAlignment="Left" Height="30" KeyboardNavigation.TabIndex="2" TabIndex="2" />
<ComboBox TabIndex="3" KeyboardNavigation.TabIndex="3" Width="165" HorizontalAlignment="Left" Height="22" VerticalAlignment="Center" Name="fdDocType" IsEditable="False" />
</StackPanel>
</TabItem>
</TabControl>
</Grid>
</DockPanel>

Answer 1

You can set your XAML to;
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
FocusManager.FocusedElement="{Binding ElementName=pic}"
Title="Window1" Height="504" Width="929">
<DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<DockPanel DockPanel.Dock="Top" Height="30">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Content="Save and Close" TabIndex="4"/>
<Button Content="Forward" TabIndex="5" />
<Button Content="Delete" TabIndex="6" />
</StackPanel>
</DockPanel>
<Grid DockPanel.Dock="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="50"/>
<ColumnDefinition MinWidth="500"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Border BorderBrush="Aqua" BorderThickness="2" >
<Canvas x:Name="pic" Grid.Column="0" Grid.Row="0" Focusable="True" >
<Canvas.Background>
<ImageBrush ImageSource="bookcover.jpg" Stretch="Fill"/>
</Canvas.Background>
</Canvas>
</Border>
<TabControl x:Name="tabs" Grid.Column="2" Grid.Row="0">
<TabItem Header="Fax Details" IsTabStop="False">
<StackPanel>
<TextBox Name="fdCustomerFileNumber" HorizontalAlignment="Left" Height="30" TabIndex="2" />
<ComboBox TabIndex="3" Width="165" HorizontalAlignment="Left" Height="22" VerticalAlignment="Center" Name="fdDocType" IsEditable="False" />
</StackPanel>
</TabItem>
</TabControl>
</Grid>
</DockPanel>
</Window>
Then in your code behind, in the New Sub, simply set the focus to the Canvas;
pic.Focus;