Develop Reference

Not able to get the current active /selected TabITem in DevExpress DxTabControl in WPF

I have a WPF app and I am trying to Automate it using FlaUI. I am facing a problem with the DxTabControl. I have provided Automation IDs to the DxTabControl. I am using DXTabControl.ItemHeaderTemplate to generate TabItems dynamically.
According to DevExpress Team, The DXTabControl.ItemHeaderTemplate doesnt support AutoamtionPeer so a custom implementation has been added to override its default behaviour.
Now, I am able to see the TabControl and the TabItems in the Inspect.exe.
Now , my requirement is to Access the currently selected Tabitem and find the CloseButton using the AutoamtionID mentioned in the XAML below and close it. Pasting below the line again. As there would be multiple TabItems generated, I am unable to get the Currently active/Selected TabItem .
The XAML is below
<dx:DXTabControl AutomationProperties.AutomationId="ViewsParentTabControl"
MaxWidth="4000"
MaxHeight="4000"
Margin="1,0,-1,0"
Focusable="False"
ItemsSource="{Binding OpenViews}"
SelectedIndex="{Binding SelectedTabIndex}"
TabContentCacheMode="CacheTabsOnSelecting">
<dx:DXTabControl.ItemHeaderTemplate>
<DataTemplate DataType="viewModels1:OpenViewDefinitionViewModel">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Name="CreatedViewName"
MaxWidth="100"
Text="{Binding Data.ViewDefinition.Name}"
TextTrimming="CharacterEllipsis"
ToolTip="{Binding DisplayName}" />
<TextBlock Grid.Row="0" Grid.Column="1"><Run Text=" [" /><Run Text="{Binding ItemsCount, FallbackValue=0, Mode=OneWay}" /><Run Text="]" /></TextBlock>
<controls2:ProgressIndicator AutomationProperties.AutomationId="ProgressCurrentView"
Grid.Row="0"
Grid.Column="3"
Width="14"
Margin="4,0,0,0"
VerticalAlignment="Center"
CircleBorder="{StaticResource ListBoxItem.Foreground}"
CircleFill="{StaticResource ListBoxItem.Foreground}"
IndicatorEnabled="{Binding IsDataLoading}" />
<Button AutomationProperties.AutomationId="CloseCurrentViewButton"
Grid.Row="0"
Grid.Column="2"
Width="10"
Height="10"
Margin="10,1,0,0"
Padding="0"
HorizontalAlignment="Right"
BorderThickness="0"
Command="{Binding DataContext.CloseItemCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=dx:DXTabControl}}"
CommandParameter="{Binding}"
Focusable="False"
Style="{StaticResource MwButtonStyle}"
ToolTip="Close">
<Path
Data="F1 M 26.9166,22.1667L 37.9999,33.25L 49.0832,22.1668L 53.8332,26.9168L 42.7499,38L 53.8332,49.0834L 49.0833,53.8334L 37.9999,42.75L 26.9166,53.8334L 22.1666,49.0833L 33.25,38L 22.1667,26.9167L 26.9166,22.1667 Z"
Fill="White"
Stretch="Fill" />
</Button>
</Grid>
</DataTemplate>
</dx:DXTabControl.ItemHeaderTemplate>
<dx:DXTabControl.ItemTemplate>
<DataTemplate DataType="viewModels1:OpenViewDefinitionViewModel">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<local:VoyagesGridControl />
<local:VoyageValidationUserControl
Grid.Row="1"
Grid.Column="0"
MinHeight="100"
MaxHeight="300"
Visibility="{Binding Path=IsVoyageValidationShowing, FallbackValue=Collapsed, Converter={StaticResource BooleanToVisibilityConverter}}" />
<local:VoyageHistoryUserControl
Grid.Row="2"
Grid.Column="0"
MinHeight="300"
MaxHeight="300"
Visibility="{Binding Path=IsVoyageHistoryShowing, FallbackValue=Collapsed, Converter={StaticResource BooleanToVisibilityConverter}}" />
<local:VesselHistoryUserControl
Grid.Row="3"
Grid.Column="0"
MinHeight="300"
MaxHeight="300"
Visibility="{Binding Path=IsVesselHistoryShowing, FallbackValue=Collapsed, Converter={StaticResource BooleanToVisibilityConverter}}" />
<local:VoyageEvents
Grid.Row="0"
Grid.RowSpan="3"
Grid.Column="1"
VerticalAlignment="Top"
Visibility="{Binding Path=IsVoyageEventsShowing, FallbackValue=Collapsed, Converter={StaticResource BooleanToVisibilityConverter}}" />
<controls2:ProgressIndicator AutomationProperties.AutomationId="showProgressForLoadingViews"
Grid.Row="0"
Grid.RowSpan="3"
Grid.Column="0"
Width="80"
HorizontalAlignment="Center"
VerticalAlignment="Center"
CircleBorder="{StaticResource ListBox.BorderBrush}"
CircleFill="{StaticResource ListBox.BorderBrush}"
IndicatorEnabled="{Binding IsDataLoading}" />
<!-- Buttons -->
<Grid Grid.Row="4" Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel
Grid.Column="0"
VerticalAlignment="Center"
Orientation="Horizontal">
<TextBlock Style="{StaticResource MwTextBlockLabelStyle}" Text="Last Refresh:" />
<TextBlock
Margin="2,0,4,0"
VerticalAlignment="Center"
Text="{Binding LoadDate, StringFormat=G}" />
</StackPanel>
<Button AutomationProperties.AutomationId="AddNewVoyageButton"
Grid.Row="0"
Grid.Column="1"
Padding="0"
Command="{Binding AddVoyagesCommand}"
Focusable="False"
Style="{StaticResource MwButtonStyle}"
ToolTip="Add a new voyage to this View (ALT + A)">
<StackPanel Orientation="Horizontal">
<ContentControl Height="26" Content="{StaticResource Add}" />
<Label Style="{StaticResource MwLabelStyle}">_Add</Label>
</StackPanel>
</Button>
<Button AutomationProperties.AutomationId="refreshVoyageButton"
Grid.Row="0"
Grid.Column="2"
Padding="0"
Command="{Binding RefreshVoyagesCommand}"
Focusable="False"
Style="{StaticResource MwButtonStyle}"
ToolTip="Refresh the this View (modified entries are left unchanged)">
<StackPanel Orientation="Horizontal">
<ContentControl Height="26" Content="{StaticResource Refresh}" />
<TextBlock Style="{StaticResource MwTextBlockLabelStyle}" Text="Refresh" />
</StackPanel>
</Button>
<Button AutomationProperties.AutomationId="showVoyageHistroyButton"
Grid.Column="4"
Margin="2,2,2,2"
Padding="0"
VerticalAlignment="Center"
Command="{Binding ShowVoyageHistoryCommand}"
Focusable="False"
ToolTip="Show the selected voyage's change history"
Visibility="{Binding Data.ViewDefinition.IsInternalView, Converter={StaticResource MwBoolToVisibilityConverterReverse}}">
<StackPanel Orientation="Horizontal">
<ContentControl Height="26" Content="{StaticResource ShowVoyageHistory}" />
<TextBlock
Style="{StaticResource MwTextBlockLabelStyle}"
Text="Hide Voyage History"
Visibility="{Binding IsVoyageHistoryShowing, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBlock
Style="{StaticResource MwTextBlockLabelStyle}"
Text="Show Voyage History"
Visibility="{Binding IsVoyageHistoryShowing, Converter={StaticResource MwBoolToVisibilityConverterReverse}}" />
</StackPanel>
</Button>
<Button AutomationProperties.AutomationId="showVesselHistroyButton"
Grid.Column="5"
Margin="2,2,2,2"
Padding="0"
VerticalAlignment="Center"
Command="{Binding ShowVesselHistoryCommand}"
Focusable="False"
ToolTip="Show the selected vessel's voyage history"
Visibility="{Binding Data.ViewDefinition.IsInternalView, Converter={StaticResource MwBoolToVisibilityConverterReverse}}">
<StackPanel Orientation="Horizontal">
<ContentControl Height="26" Content="{StaticResource ShowVesselHistory}" />
<TextBlock
Style="{StaticResource MwTextBlockLabelStyle}"
Text="Hide Vessel History"
Visibility="{Binding IsVesselHistoryShowing, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBlock
Style="{StaticResource MwTextBlockLabelStyle}"
Text="Show Vessel History"
Visibility="{Binding IsVesselHistoryShowing, Converter={StaticResource MwBoolToVisibilityConverterReverse}}" />
</StackPanel>
</Button>
<Button AutomationProperties.AutomationId="showVoyageButton"
Grid.Column="6"
Margin="2,2,2,2"
Padding="0"
VerticalAlignment="Center"
Command="{Binding ShowVesselVisitsCommand}"
Focusable="False"
ToolTip="Show the selected voyage's events"
Visibility="{Binding Data.ViewDefinition.IsInternalView, Converter={StaticResource MwBoolToVisibilityConverterReverse}}">
<StackPanel Orientation="Horizontal">
<ContentControl Height="26" Content="{StaticResource Anchor}" />
<TextBlock
Style="{StaticResource MwTextBlockLabelStyle}"
Text="Hide Voyage Events"
Visibility="{Binding IsVoyageEventsShowing, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBlock
Style="{StaticResource MwTextBlockLabelStyle}"
Text="Show Voyage Events"
Visibility="{Binding IsVoyageEventsShowing, Converter={StaticResource MwBoolToVisibilityConverterReverse}}" />
</StackPanel>
</Button>
<Border Grid.Row="0" Grid.Column="8">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding IsDuplicateView, Mode=TwoWay}" Value="true">
<Setter Property="Background" Value="LightGreen" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Button AutomationProperties.AutomationId="DuplicateCheckButton"
Padding="0"
Command="{Binding DuplicateVoyagesCommand}"
Focusable="False"
Style="{StaticResource MwButtonStyle}"
ToolTip="Switch to duplicate Voyages (ALT + D)"
Visibility="{Binding Data.ViewDefinition.IsInternalView, Converter={StaticResource MwBoolToVisibilityConverterReverse}}">
<StackPanel Orientation="Horizontal">
<ContentControl Height="26" Content="{StaticResource Duplicate}" />
<AccessText Style="{StaticResource MwAccessTextLabelStyle}" Text="{Binding VoyageDuplicateText}" />
</StackPanel>
</Button>
</Border>
<Button AutomationProperties.AutomationId="PublishVoyagesButton"
Grid.Row="0"
Grid.Column="9"
Padding="0"
Command="{Binding PublishVoyagesCommand}"
Focusable="False"
Style="{StaticResource MwButtonStyle}"
ToolTip="Publish any modified Voyages (ALT + P)"
Visibility="{Binding Data.ViewDefinition.IsInternalView, Converter={StaticResource MwBoolToVisibilityConverterReverse}}">
<StackPanel Orientation="Horizontal">
<ContentControl Height="26" Content="{StaticResource Publish}" />
<AccessText Style="{StaticResource MwAccessTextLabelStyle}" Text="{Binding VoyagePublishText}" />
</StackPanel>
</Button>
<Button AutomationProperties.AutomationId="UndoSingleVoyageButton"
Grid.Row="0"
Grid.Column="10"
Padding="0"
Command="{Binding UndoSingleChangedVoyagesCommand}"
Focusable="False"
Style="{StaticResource MwButtonStyle}"
ToolTip="Locally Undo unpublished changes to the selected voyage"
Visibility="{Binding Data.ViewDefinition.IsInternalView, Converter={StaticResource MwBoolToVisibilityConverterReverse}}">
<StackPanel Orientation="Horizontal">
<ContentControl Height="26" Content="{StaticResource Undo}" />
<TextBlock Style="{StaticResource MwTextBlockLabelStyle}" Text="Undo Selected" />
</StackPanel>
</Button>
<Button AutomationProperties.AutomationId="UndoandUnpublishVoyageButton"
Grid.Row="0"
Grid.Column="11"
Padding="0"
Command="{Binding UndoChangedVoyagesCommand}"
Focusable="False"
Style="{StaticResource MwButtonStyle}"
ToolTip="Locally Undo any changed and unpublished voyages"
Visibility="{Binding Data.ViewDefinition.IsInternalView, Converter={StaticResource MwBoolToVisibilityConverterReverse}}">
<StackPanel Orientation="Horizontal">
<ContentControl Height="26" Content="{StaticResource Undo}" />
<TextBlock Style="{StaticResource MwTextBlockLabelStyle}" Text="Undo All" />
</StackPanel>
</Button>
</Grid>
</Grid>
</DataTemplate>
</dx:DXTabControl.ItemTemplate>
</dx:DXTabControl>
My FlaUIapproach of locating the Controls is below
public IMainWindow ConfirmCreatedView()
{
_logger.Info("Checking the newly created View on the screen");
//Apoorv: Need to find TabItem here
_controlAction.Highlight(ViewsTabControl); // This highlights the TabControl- Works
int NumberOfActiveTabs = ViewsTabControl.TabItems.Length; // This gives me no of TabItems
TabItem SelectedTab= ViewsTabControl.SelectedTabItem as TabItem; // Gives me Null here
var newTab = ViewsTabControl.SelectedTabItemIndex ; // Give me -1 here
_controlAction.Highlight(ViewsTabControl.TabItems[2]); // Works. It highlights the TabItem at position 2
_controlAction.ClickWait<TabItem>(ViewsTabControl.TabItems[2]); // This goes and clicks the tab item
TabItem SelectedTabs = ViewsTabControl.SelectedTabItem as TabItem;
var check = ViewsTabControl.TabItems[2].FindAllChildren();
// TabItem ti = ViewsTabControl.SelectedItem as TabItem;
//_controlAction.Highlight()
_controlAction.Highlight(CloseCurrentView); // highlights the close button atTabItem[0]
_controlAction.Click<Button>(CloseCurrentView); // closes it
return this;
}
I am using FlaUI to Find the TabControl using AutomationID as shown below
private Tab ViewsTabControl => _uiAutomation.FindElement("ViewsParentTabControl", Automation.FindBy.Id).AsTab();
private TabItem ViewsTabItem => _uiAutomation.FindElement("DXTabItem", Automation.FindBy.Id).AsTabItem();
I would like to find the curently active TabItem based on the Index and then go and click the close button by automating it.
TabItem SelectedTab= ViewsTabControl.SelectedTabItem as TabItem; // Gives me Null here
var newTab = ViewsTabControl.SelectedTabItemIndex ; // Give me -1 here

It is not TabItem it is DXTabItem. This is the type you should cast to.
DXTabItem SelectedTab = ViewsTabControl.SelectedTabItem as DXTabItem;

DevEXpress don't create automation peers for controls within ItemHeaderTemplate. It will be necessary to use a custom automation peer to provide this functionality. For example, I used the following class for test purposes:
public class DXTabItemAutomationPeerEx : DXTabItemAutomationPeer, ISelectionItemProvider {
private DXTabItem TabItem => base.Owner as DXTabItem;
private DXTabControl TabControl => TabItem.With((DXTabItem x) => x.Owner);
public DXTabItemAutomationPeerEx(DXTabItem ownerCore) : base(ownerCore) { }
protected override List<AutomationPeer> GetChildrenCore() {
List<AutomationPeer> children = base.GetChildrenCore();
foreach (var button in LayoutTreeHelper.GetVisualChildren(Owner).OfType<Button>())
children.Add(new ButtonAutomationPeer(button));
return children;
}
bool ISelectionItemProvider.IsSelected { get {
if (TabControl != null) {
return TabControl.SelectedContainer == TabItem;
}
return false;
}
}
}
Post adding this code inside my MainPage.Xaml.cs , I added a static constructor to register it
static MainWindow() {
NavigationAutomationPeersCreator.Default.RegisterObject(typeof(DXTabItem), typeof(DXTabItemAutomationPeerEx), owner => new DXTabItemAutomationPeerEx((DXTabItem)owner));
}
post this , these lines work as charm
TabItem CurrentTab = ViewsTabControl.SelectedTabItem as TabItem;
var Children = ViewsTabControl.FindAllChildren();
foreach (var child in Children) {
var subChildren = child.FindAllChildren();
}

Align right menu item inside a stackpanel WPF

i'm making a simple WPF application and i'm facing a problem.
I have a StackPanel that contain a Menu and a StackPanel and i'm trying to align certains MenuItem to right but with no success...
I trying to do something like that :
===================================================
FILE .....................................................REDUCE MINIMIZE CLOSE --->MENU
APPTITLE ---------------------------------------------> Stackpanel
There is another StackPanel that contain both elements to align them Vertically
I tried differents way, with my menu item in a stackpanel or dockpanel...
Here is my MainWindow.xaml :
<StackPanel Orientation="Vertical">
<Menu materialDesign:RippleAssist.IsDisabled="True" Name="menu" Height="40" Foreground="#FF060000" BorderBrush="#FFED0303">
<MenuItem HorizontalAlignment="Center" VerticalAlignment="Center" Header="_Fichier">
<MenuItem Header="_Quitter" Click="ExitButton_Click">
<MenuItem.Icon>
<Image Source="assets/images/quitter.png"></Image>
</MenuItem.Icon>
</MenuItem>
</MenuItem>
<MenuItem Click="minimize_Click" Height="15" Width="19" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,0,5">
<MenuItem.Background>
<ImageBrush ImageSource="assets/images/minimize.png"/>
</MenuItem.Background>
</MenuItem>
<MenuItem Click="maximize_Click" Height="15" Width="19" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="11,10,0,0">
<MenuItem.Background>
<ImageBrush x:Name="resizeImage" ImageSource="{Binding ResizeImagePath}"/>
</MenuItem.Background>
</MenuItem>
<MenuItem Click="ExitButton_Click" Height="20" Width="19" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="11,10,0,0">
<MenuItem.Background>
<ImageBrush ImageSource="assets/images/close.png"/>
</MenuItem.Background>
</MenuItem>
</Menu>
<StackPanel Orientation="Horizontal" Margin="0,14,0,0" VerticalAlignment="Center">
<Button Margin="10,0,0,0" Click="scanNetwork_Click" BorderBrush="{x:Null}">
<Button.Background>
<ImageBrush ImageSource="assets/images/756363-200.png"/>
</Button.Background>
</Button>
<TextBlock Text="Machine Sniffer" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="24" FontWeight="Bold" FontFamily="{DynamicResource MaterialDesignFont}" Foreground="White" Margin="10,0,0,0"></TextBlock>
</StackPanel>
</StackPanel>
The actual result is something like that :
===================================================
FILE REDUCE MINIMIZE CLOSE --->MENU
APPTITLE ---------------------------------------------> Stackpanel
Thanks for help

In StackPanel you are not able to adjust items to te right like you are doing, they not allow alignment in the direction in which they stack.
You can use a Grid or a DockPanel instead:
Example with DockPanel:
<DockPanel Width="300">
<!-- place menu items here and use the VerticalAlignment property like you're doing -->
</DockPanel>
Example with Grid:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- place elements here and indicate respective column -->
</Grid>

Resolution Problems C# WPF

I am having issues with sizing my WPF program so that it can adapt to resolution of the user's screen. I have two screenshots below, one is taken at 1600 x 900 and one at 1920 x 1080. Neither of them are how I want my application to look;
1600 x 900
1920 x 1080
As you can see from the first image, at the lower resolution there are parts of the UI that are just off of the screen. I could use a ScrollViewer but I would much prefer for the elements to actually fit the screen vertically and then use a ScrollViewer horizontally if neccessary.
In the second image, because I have tried to adapt the program so that it fits the lower resolution, there is now a vast amount of unused space that I would like the UI to fill into, instead of leaving blank. I feel like I have an overall understanding of * and auto as widths but feel like the general layout is wrong. Here is a snapshot of some XAML for these screenshots;
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto" MinWidth="180"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="auto" MaxWidth="160"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle Fill="#FF5FCFBA" Stroke="Black" Grid.ColumnSpan="4" Grid.RowSpan="2"/>
<Label x:Name="jobTitleLabel" Content="Job" HorizontalAlignment="Left" Margin="26,10,0,5" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Grid.ColumnSpan="4"/>
<StackPanel Grid.Row="1" >
<Label Content="Reference:" FontSize="14" HorizontalAlignment="Right" Margin="0,0,0,1" VerticalAlignment="Center" />
<Label Content="Description:" FontSize="14" HorizontalAlignment="Right" Margin="0" VerticalAlignment="Center" />
<Label Content="Created:" FontSize="14" HorizontalAlignment="Right" Margin="0,5,0,0" Grid.Row="1" VerticalAlignment="Center" />
<Label Content="Deadline:" FontSize="14" HorizontalAlignment="Right" Grid.Row="2" VerticalAlignment="Center" Margin="-2,7,0,0" />
<Label Content="Start Date:" FontSize="14" HorizontalAlignment="Right" Grid.Row="2" VerticalAlignment="Center" Margin="-2,7,0,0" />
<Label Content="Employee Name:" FontSize="14" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,4,0,0" />
<Label Content="Who's Job:" FontSize="14" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,7,0,0" />
<Label Content="Priority:" FontSize="14" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,7,0,0" />
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="1">
<TextBox x:Name="jobReferenceTextBox" Margin="5" FontSize="14" Grid.Column="1" VerticalAlignment="Center"/>
<TextBox x:Name="jobTitleTextBox" Margin="5" FontSize="14" Grid.Column="1" VerticalAlignment="Center" MaxWidth="291" MaxLength="30"/>
<wpftk:DateTimePicker x:Name="createdPicker" AutoCloseCalendar="True"
Margin="5,7,5,5" Format="Custom" FormatString="dd/MM/yyyy"
FontSize="14" TextAlignment="Left"
TimeFormat="LongDate" TimePickerAllowSpin="False"
TimePickerShowButtonSpinner="False"
TimePickerVisibility="Hidden" ShowButtonSpinner="False"
AllowTextInput="False"/>
<wpftk:DateTimePicker x:Name="deadlinePicker" AutoCloseCalendar="True" Margin="5,8,5,5" Format="Custom" FormatString="dd/MM/yyyy" FontSize="14" TextAlignment="Left" TimeFormat="LongDate" TimePickerShowButtonSpinner="False" TimePickerAllowSpin="False" TimePickerVisibility="Hidden" ShowButtonSpinner="False"/>
<wpftk:DateTimePicker x:Name="startDatePicker" AutoCloseCalendar="True" Margin="5,8,5,5" Format="Custom" FormatString="dd/MM/yyyy" FontSize="14" TextAlignment="Left" TimeFormat="LongDate" TimePickerShowButtonSpinner="False" TimePickerAllowSpin="False" TimePickerVisibility="Hidden" ShowButtonSpinner="False"/>
<TextBox x:Name="nameTextBox" Margin="5,6,5,5" FontSize="14" Grid.Column="1" Grid.Row="3" VerticalAlignment="Center" />
<ComboBox x:Name="itNameComboBox" Margin="5,7,5,5" FontSize="14" SelectedValuePath="Tag">
<ComboBoxItem Content="Unallocated" Tag="Unallocated"/>
<ComboBoxItem Content="Adam" Tag="AdamD"/>
<ComboBoxItem Content="Chris" Tag="Chris"/>
<ComboBoxItem Content="Dan" Tag="DanD"/>
<ComboBoxItem Content="Emily" Tag="EmilyC"/>
<ComboBoxItem Content="Kit" Tag="KitL"/>
<ComboBoxItem Content="Matt" Tag="Matt"/>
</ComboBox>
<ComboBox x:Name="priorityComboBox" Margin="5,7,5,5" FontSize="14" SelectedValuePath="Tag">
<ComboBoxItem Content="High" Tag="High"/>
<ComboBoxItem Content="Medium" Tag="Medium" />
<ComboBoxItem Content="Low" Tag="Low" />
</ComboBox>
</StackPanel>
<StackPanel Grid.Column="3" Grid.Row="1">
<ComboBox x:Name="jobPresetComboBox" IsEnabled="False" IsEditable="True" IsReadOnly="True" Text="Choose Predefined Job" Margin="5" FontSize="14" Grid.Column="1" Grid.Row="4" SelectionChanged="JobPresetComboBoxSelectionChanged" />
<Button x:Name="addJobButton" Content="Add a New Job" Margin="5" Click="AddJob" FontSize="14" Grid.Column="1" Grid.Row="4" />
<Button x:Name="updateButton" Content="Update Job Details" Margin="5" FontSize="14" Grid.Column="1" Grid.Row="4" Click="UpdateJob"/>
<Button x:Name="markAsCompletedButton" Content="Mark as Completed" Margin="5" FontSize="14" Click="MarkAsCompleted"/>
<Button x:Name="deleteButton" Content="Delete Job" Margin="5" FontSize="14" Click="DeleteJobPermanently"/>
<Button x:Name="excelButton" Content="Export to Excel" Margin="5" FontSize="14" Click="ExportToExcel"/>
<Button x:Name="restoreButton" Content="Restore Selected Job" Margin="5" FontSize="14" Visibility="Collapsed" Click="RestoreJob"/>
<Button x:Name="addToHistoryButton" Content="Add to History" Margin="5" FontSize="14" Visibility="Collapsed" Click="AddJobToHistory"/>
<Button x:Name="cancelButton" Content="Cancel Job Add" Margin="5" FontSize="14" Visibility="Collapsed" Click="CancelJobAdd"/>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="1">
<TextBox x:Name="notesTextBox" ScrollViewer.VerticalScrollBarVisibility="Visible" Margin="5" FontSize="14" VerticalAlignment="Center" TextWrapping="Wrap" AcceptsReturn="True" MinHeight="260" MaxHeight="260" MaxWidth="400" MinWidth="400"/>
</StackPanel>
<Grid x:Name="bnumGrid" Grid.Column="4" Grid.Row="1" Margin="8,0,10,0" MinWidth="250">
<DataGrid x:Name="bnumDataGrid" ItemsSource="{Binding CurrentBnumsCollectionView}" MaxHeight="270"
CanUserAddRows="False" AutoGenerateColumns="False" SelectionChanged="BnumDataGridSelectionChanged"
IsReadOnly="True">
<DataGrid.Columns>
<DataGridTextColumn Header="Job ID" Width="0.75*" Binding="{Binding JobID}"/>
<DataGridTextColumn Header="Job Description" Width="3*" Binding="{Binding JobDescription}"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
<StackPanel x:Name="searchGrid" Grid.Row="1" Grid.Column="5">
<Label Content="Search (ID)" HorizontalAlignment="Left" Margin="5,5,0,5" VerticalAlignment="Center" FontSize="20" FontWeight="Bold"/>
<TextBox x:Name="searchBox" TextWrapping="Wrap" Margin="20,5" FontSize="14" VerticalAlignment="Center" TextChanged="CallSearchBoxFilter"/>
<Label Content="Press Esc to clear filter" Margin="5,10,5,5" FontSize="14"/>
</StackPanel>
</Grid>
Understandably there is a lot of irrelevant code included there but I didn't want to miss something out that I am not seeing have an effect. The overall layout is a NavigationFrame located inside a Page that is located inside a Window so that I can navigate through pages on my program.
On this specific page there is a Grid with two rows, one containing a DataGrid and one containing the elements in the images above. I am unsure on whether it is the parent Grid causing the issues but thought I would post this first just in case there any "obvious" issues with my layout.

Here is something that I think should give you an idea on how to place items on your screen.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Grid.ColumnSpan="5" Grid.RowSpan="6" Fill="Red"/>
<TextBlock Text="Reference:" HorizontalAlignment="Right" VerticalAlignment="Center"/>
<TextBlock Text="Description:" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Center"/>
<TextBox Grid.Column="1" />
<TextBox Grid.Column="1" Grid.Row="1" />
<TextBox Grid.Column="2" Grid.ColumnSpan="2" Grid.RowSpan="5" Text="Mahoosive Text Box" />
<ComboBox Grid.Column="4"/>
<ComboBox Grid.Column="4" Grid.Row="1"/>
<Button Content="Save New Job" Grid.Column="4" Margin="5" Grid.Row="2" />
<DataGrid Grid.Column="5" Grid.RowSpan="7">
<DataGrid.Columns>
<DataGridTextColumn Header="Job ID"/>
</DataGrid.Columns>
</DataGrid>
<TextBlock Grid.Column="6" Text="Search (ID)"/>
<TextBox Grid.Column="6" Grid.Row="1" TextWrapping="Wrap" Text="TextBox"/>
</Grid>
As we spoke in comments this is what I meant.
Create a test UserControl, paste my code and watch it resize in the designer.

For adoptive redesigning you have go with panel approach. You to add some stack panels and wrap panels to do so. You have to avoid the MARGIN thing and height and width to panels. Well its not an easy topic to close it in one answer.
I can redesign the whole panel for you in 30 to 40 minutes. It would be adoptive then, but i have to use your Team Viewer account and do it in your PC. I have paste the code in my application, but there are a lot of errors and errors. let me know, if you want me to redesign it.

Databind to the datacontext element of the row

I've this itemtemplate binded on a ObservableCollection<MembershipUserProfiled> element so it can be displayed in a ListBox.
<UserControl.Resources>
<ResourceDictionary>
<DataTemplate x:Key="ListItemElencoTemplate">
<Grid Background="#FFFFFF" Width="300">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110" />
<ColumnDefinition Width="110" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Style="{DynamicResource label_default}" HorizontalContentAlignment="Left" VerticalContentAlignment="Center" Content="{Binding Path=FirstName}" Margin="0 0 0 3" />
<Label Grid.Column="1" Style="{DynamicResource label_default}" HorizontalContentAlignment="Left" VerticalContentAlignment="Center" Content="{Binding Path=LastName}" Margin="0 0 0 3" />
<Label Grid.Column="2" Style="{DynamicResource label_default}" HorizontalContentAlignment="Left" VerticalContentAlignment="Center" Content="{Binding Path=BaseUser.UserName}" Margin="0 0 0 3" />
<Button Content="Button" Style="{DynamicResource edit}" Click="Edit_Click" CommandParameter="{Binding Path=...}" HorizontalAlignment="Right" Grid.Column="4" Width="20" Height="20"/>
</Grid>
</DataTemplate>
</ResourceDictionary>
</UserControl.Resources>
Everything works just fine but I want to bind the button CommandParameter to the MembershipUserProfiled object of the row, in order to pass the data on the click action.
I've tried different solution but nothing seems to work. What I'm trying to do is feasible?

You can try CommandParameter="{Binding}" this will automatically bind the MembershipUserProfiled object
<Button Content="Button" CommandParameter="{Binding}" Style="{DynamicResource edit}" Click="Edit_Click" HorizontalAlignment="Right" Grid.Column="4" Width="20" Height="20"/>

How do I cycle through records in an XML file using previous/next buttons?

I'm new to C# programming so here goes..
I'm trying to write an electronic scrapbook application as a present but I've come unstuck - my application currently shows the first xml record but I don't know how to use the next button to go to the next record. I've tried experimenting with arrays and arraylists but I can't seem to get anywhere near what I'm looking for. Any help would be hugely appreciated :-)
I'll include my XML and XAML code below but I'll leave out the C# code as it'll make my post too long. Apologies if any of the code below is irrelevant to you:
XAML:
<Grid>
<Grid.DataContext>
<XmlDataProvider Source="Data/Memories.xml" XPath="/Memories/Memory" />
</Grid.DataContext>
<DockPanel Height="22" Name="dockPanel1" HorizontalAlignment="Stretch" VerticalAlignment="Top" Width="Auto">
<Menu Height="24" Name="menu1" Width="Auto" DockPanel.Dock="Top" VerticalAlignment="Top">
<MenuItem Header="_File" >
<MenuItem Header="Add _New Memory" Name="newMemory" Click="newMemory_Click" />
<MenuItem Header="_Edit this Memory" Name="editMemory" Click="editMemory_Click" />
<MenuItem Header="_Delete this Memory" Name="deleteMemory" Click="deleteMemory_Click" />
<MenuItem Header="_Save Changes" Name="saveMemory" Click="saveMemory_Click" />
<Separator/>
<MenuItem Header="E_xit" Name="exit" Click="exit_Click" />
</MenuItem>
<MenuItem Header="_Edit" />
<MenuItem Header="_Help" >
<MenuItem Header="_About muh program" Name="about" Click="about_Click" />
</MenuItem>
</Menu>
</DockPanel>
<Button Content="<" Margin="-70,32,0,0" Name="previousButton" Height="22" Width="20" VerticalAlignment="Top" Visibility="{Binding IsEnabled, ElementName=newMemory, Converter={StaticResource VisibleIfTrue}}" />
<Button Content=">" Height="22" Margin="70,32,0,0" Name="nextButton" Width="20" VerticalAlignment="Top" Visibility="{Binding IsEnabled, ElementName=newMemory, Converter={StaticResource VisibleIfTrue}}" />
<Button Content="?" Margin="0,32,0,0" Name="RandomButton" Height="22" Width="40" VerticalAlignment="Top" Visibility="{Binding IsEnabled, ElementName=newMemory, Converter={StaticResource VisibleIfTrue}}" />
<TextBlock Height="30" Width="300" Margin="0,62,0,419" TextAlignment="Center" Text="{Binding XPath=#Title}" FontSize="15" FontWeight="Bold" Name="memoryTitle" />
<TextBlock Height="30" Width="300" Margin="0,84,0,397" TextAlignment="Center" Text="{Binding XPath=./Date}" FontSize="12" FontWeight="Normal" Name="memoryDate" Panel.ZIndex="1" />
<TextBlock Height="375" HorizontalAlignment="Right" Margin="0,116,26,20" Name="textOutput" Width="300" TextWrapping="Wrap" TextAlignment="Center" Background="White" Visibility="{Binding IsEnabled, ElementName=newMemory, Converter={StaticResource VisibleIfTrue}}">
<TextBlock.Text>
<Binding XPath="./Blurb" />
</TextBlock.Text>
</TextBlock>
<TextBox HorizontalAlignment="Right" Margin="0,116,26,20" Name="textInput" Height="375" Width="300" TextWrapping="Wrap" AcceptsReturn="True" Visibility="{Binding IsEnabled, ElementName=newMemory, Converter={StaticResource VisibleIfNotTrue}}" />
<Image Height="375" HorizontalAlignment="Center" Margin="-326,94,0,0" Name="imgPhoto" Stretch="Uniform" VerticalAlignment="Center" Width="500" ClipToBounds="False" AllowDrop="False" Source="{Binding XPath=ImageFile}" />
<Image Height="375" HorizontalAlignment="Center" Margin="-326,94,0,0" Name="imgPhotoNew" Stretch="Uniform" VerticalAlignment="Center" Width="500" ClipToBounds="False" AllowDrop="False" Visibility="{Binding IsEnabled, ElementName=newMemory, Converter={StaticResource VisibleIfNotTrue}}" />
<Button Content="Done" Height="22" Width="40" Margin="463,32,375,0" Name="doneMemoryButton" VerticalAlignment="Top" Click="doneMemoryButton_Click" Visibility="{Binding IsEnabled, ElementName=newMemory, Converter={StaticResource VisibleIfNotTrue}}" />
<Button Content="Select Photo" Height="22" Width="75" Margin="377,32,427,0" Name="selectPhotoButton" VerticalAlignment="Top" HorizontalAlignment="Center" Click="selectPhotoButton_Click" Visibility="{Binding IsEnabled, ElementName=newMemory, Converter={StaticResource VisibleIfNotTrue}}" />
</Grid>
XML:
<Memories>
<Memory Title="1 Year - Howard Jones!" ID="1">
<ImageFile>Data/Images/01.jpg</ImageFile>
<Blurb>We saw Howard Jones perform!!</Blurb>
<Date>06/11/2010</Date>
</Memory>
<Memory Title="Ski Holiday" ID="2">
<ImageFile>Data/Images/02.jpg</ImageFile>
<Blurb>Our skiing holiday in Flaine!</Blurb>
<Date>29/11/2010</Date>
</Memory>
<Memory Title="Stinksy's Birthday: Ice Bar!" ID="3">
<ImageFile>Data/Images/03.jpg</ImageFile>
<Blurb>Absolut Ice Bar</Blurb>
<Date>19/12/2010</Date>
</Memory>
</Memories>

I will not work through that code but i can give you a simple example of how to do this:
<Window.Resources>
<XmlDataProvider x:Key="data" Source="Data/Memories.xml" XPath="/Memories/Memory" />
<CollectionViewSource x:Key="dataCvs" Source="{StaticResource data}" />
</Window.Resources>
<StackPanel>
<ContentControl Content="{Binding Source={StaticResource dataCvs}}">
<ContentControl.ContentTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding XPath=ImageFile}" />
<TextBlock Text="{Binding XPath=Blurb}" />
<TextBlock Text="{Binding XPath=Date}" />
</StackPanel>
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
<Button Content="Previous" Click="Previous_Click" Tag="{StaticResource dataCvs}" />
<Button Content="Next" Click="Next_Click" Tag="{StaticResource dataCvs}" />
</StackPanel>
The ContentControl binds to the CurrentItem of the view on top of the memories collection, i pass the CollectionViewSource to the Buttons so i can change the current item on click. (Normally you should use a Command and pass it as CommandParameter instead, that is cleaner)
private void Next_Click(object sender, RoutedEventArgs e)
{
var button = (Button)sender;
var cvs = (CollectionViewSource)button.Tag;
cvs.View.MoveCurrentToNext();
}
private void Previous_Click(object sender, RoutedEventArgs e)
{
var button = (Button)sender;
var cvs = (CollectionViewSource)button.Tag;
cvs.View.MoveCurrentToPrevious();
}