I have a problem with the first element in a listbox, the arranging is being changed in it.
This is the code:
<Grid x:Name="ContentPanel" Margin="12,10,0,0" Grid.RowSpan="2" Grid.ColumnSpan="2">
<ListBox Margin="10,233,10,0" BorderBrush="White" Hold="ListBox1_Hold" SelectionChanged="ListBox1_SelectionChanged" Height="516" x:Name="ListBox1" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Width="500" Orientation="Vertical" >
<Image Margin="10,30,0,0" HorizontalAlignment="Left" Height="100" Width="150" Source="{Binding Img}" ></Image>
<TextBlock Visibility="Collapsed" Text="ID: "/>
<TextBlock Visibility="Collapsed" Text="{Binding Id}"/>
<TextBlock Visibility="Collapsed" FontSize="30" Text="Place Name: "/>
<TextBlock Margin="160,-110,0,0" HorizontalAlignment="Left" Foreground="Blue" FontSize="30" Text="{Binding PlaceName}"/>
<TextBlock Visibility="Collapsed" Text="Description: "/>
<TextBlock Margin="160,-80,0,0" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Description}" />
<TextBlock Visibility="Collapsed" Text="Keyword: "/>
<TextBlock Visibility="Collapsed" Text="{Binding Keyword}"/>
<TextBlock Visibility="Collapsed" Text="Longitude: "/>
<TextBlock Visibility="Collapsed" Text="{Binding Long}"/>
<TextBlock Visibility="Collapsed" Text="Latitude: "/>
<TextBlock Visibility="Collapsed" Text="{Binding Latit}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And here the result of this code:
The Picture
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
// First block
<grid grid.colum="0" grid.row="0" grid.rowspan="2"><image></grid>
<grid grid.colum="1" grid.row="0" ><textblock></grid>
<grid grid.colum="1" grid.row="1" ><textblock></grid>
// Seconde block
<grid grid.colum="0" grid.row="1" grid.rowspan="2"><image></grid>
<grid grid.colum="1" grid.row="2" ><textblock></grid>
<grid grid.colum="1" grid.row="3" ><textblock></grid>
// third block
<grid grid.colum="0" grid.row="2" grid.rowspan="2"><image></grid>
<grid grid.colum="1" grid.row="4" ><textblock></grid>
<grid grid.colum="1" grid.row="5" ><textblock></grid>
</Grid>
Related
In a WinUI 3 application, using CommunityToolkit.Mvvm.
All ViewModels are created by a DI container.
The parent Page has a ViewModel and contains a child UserControl that also has a ViewModel.
Right now the UserControl DataContext is bound to the ViewModel like this:
<controls:AddEditControl x:Name="AddEditControl"
DataContext="{x:Bind ViewModel.UserDetailsViewModel}" />
What I tried to set ViewModel like this:
public sealed partial class AddEditControl : UserControl
{
public UserDetailsViewModel ViewModel
{
get;
}
public AddEditControl()
{
ViewModel = App.GetService<UserDetailsViewModel>();
this.InitializeComponent();
}
}
The issue is that setting a ViewModel in a code behind of the UserControl the same way its set in Page is not binding properly.
The goal is to be able to use the same x:Bind markup in the UserControl as in the Page.
<Page x:Class="SearchUserPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:CSA2.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:converters="using:CommunityToolkit.WinUI.UI.Converters"
xmlns:ctkControls="using:CommunityToolkit.WinUI.UI.Controls"
xmlns:customConverters="using:CSA2.Converters"
xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:ic="using:Microsoft.Xaml.Interactions.Core"
mc:Ignorable="d"
Margin="-40">
<Page.Resources>
</Page.Resources>
<Grid x:Name="ContentArea">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.Row="0"
Margin="500 -78 60 0">
<StackPanel HorizontalAlignment="Right">
</StackPanel>
</Border>
<Grid x:Name="GridPanel"
Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="{x:Bind ViewModel.UserDetailsRowHeight, Mode=OneWay}"
MinHeight="40" />
</Grid.RowDefinitions>
<Grid Grid.Row="0"
Margin="{StaticResource NavigationViewPageContentMargin}">
</Grid>
<Grid Grid.Row="1"
Margin="{StaticResource NavigationViewPageContentMargin}">
</Grid>
<Grid Grid.Row="2"
Background="#FAFAFA">
<TabView IsAddTabButtonVisible="False"
Background="#CCC">
<TabView.TabItems>
<TabViewItem x:Uid="UserDetailsTab"
IsClosable="False">
<controls:AddEditControl x:Name="AddEditControl"
DataContext="{x:Bind ViewModel.UserDetailsViewModel}" />
</TabViewItem>
<TabViewItem Header="History"
IsClosable="False">
<TextBlock Text="User History"
Style="{StaticResource SubheaderTextBlockStyle}"
Margin="10" />
</TabViewItem>
</TabView.TabItems>
</TabView>
</Grid>
</Grid>
</Grid>
</Page>
<UserControl x:Class="Controls.AddEditControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:ic="using:Microsoft.Xaml.Interactions.Core"
xmlns:converters="using:CommunityToolkit.WinUI.UI.Converters"
mc:Ignorable="d">
<UserControl.Resources>
</UserControl.Resources>
<Grid Margin="{StaticResource NavigationViewPageContentMargin}"
Padding="0 0 0 40">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="7*" />
</Grid.ColumnDefinitions>
<ToggleButton Grid.Column="0"
Command="{Binding EditUserCommand,Mode=TwoWay}"
IsChecked="{Binding IsEditButtonChecked, Mode=TwoWay}"
Margin="10"
HorizontalAlignment="Left"
Style="{ThemeResource DefaultToggleButtonStyle}"
Visibility="{Binding IsEditVisible, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}}">
<StackPanel Orientation="Horizontal">
<Viewbox Style="{StaticResource ButtonIcon}">
<SymbolIcon Symbol="Edit" />
</Viewbox>
<TextBlock x:Uid="EditButton" />
</StackPanel>
</ToggleButton>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Right"
Margin="10 0"
Visibility="{Binding IsUserSelected, Converter={StaticResource BoolToVisibilityConverter}}">
<Button Command="{Binding SaveCommand}"
Style="{ThemeResource DefaultButtonStyle}"
Margin="10 0">
<StackPanel Orientation="Horizontal">
<Viewbox Style="{StaticResource ButtonIcon}">
<SymbolIcon Symbol="Save" />
</Viewbox>
<TextBlock x:Uid="SaveButton" />
</StackPanel>
</Button>
<Button Command="{Binding ResetCommand}">
<StackPanel Orientation="Horizontal">
<Viewbox Style="{StaticResource ButtonIcon}">
<SymbolIcon Symbol="Undo" />
</Viewbox>
<TextBlock x:Uid="ResetButton" />
</StackPanel>
</Button>
</StackPanel>
<StackPanel Grid.Column="1"
Margin="10"
VerticalAlignment="Center"
Visibility="{Binding IsUserSelected, Converter={StaticResource BoolToVisibilityConverter}}">
<TextBlock x:Uid="UserFunctionsText"
Style="{StaticResource DetailSubTitleStyle}" />
</StackPanel>
</Grid>
<Grid Row="1"
Grid.Column="0"
Visibility="{Binding IsUserSelected, Converter={StaticResource BoolToVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="7*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0"
Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="8*" />
</Grid.ColumnDefinitions>
<Grid.Resources>
</Grid.Resources>
<TextBlock x:Uid="UserIdText"
Grid.Row="0"
Grid.Column="0"
Style="{StaticResource EditForm_TextBlock}"
Visibility="{Binding IsCreateNewUser, Mode=TwoWay, Converter={StaticResource InverseBoolToVisibilityConverter}}" />
<TextBox x:Uid="UserIdText"
Grid.Row="0"
Grid.Column="1"
IsReadOnly="True"
Text="{Binding UserId, Mode=TwoWay}"
Style="{StaticResource EditForm_TextBox_ReadOnly}"
Visibility="{Binding IsCreateNewUser, Mode=TwoWay, Converter={StaticResource InverseBoolToVisibilityConverter}}" />
<TextBlock x:Uid="UserNameText"
Grid.Row="1"
Grid.Column="0"
Style="{StaticResource EditForm_TextBlock}" />
<TextBox x:Uid="UserNameNullText"
Grid.Row="1"
Grid.Column="1"
IsReadOnly="True"
Text="{Binding UserName, Mode=TwoWay}"
Style="{StaticResource EditForm_TextBox_ReadOnly}" />
<TextBlock x:Uid="UserEmailText"
Grid.Row="2"
Grid.Column="0"
Style="{StaticResource EditForm_TextBlock}" />
<TextBox x:Uid="UserEmailNullText"
Grid.Row="2"
Grid.Column="1"
IsReadOnly="True"
Text="{Binding UserEmail, Mode=TwoWay}"
Style="{StaticResource EditForm_TextBox_ReadOnly}" />
<TextBlock x:Uid="UserDepartmentText"
Grid.Row="3"
Grid.Column="0"
Style="{StaticResource EditForm_TextBlock}" />
<ComboBox Grid.Row="3"
Grid.Column="1"
Visibility="{Binding ReadOnlyMode, Mode=TwoWay, Converter={StaticResource InverseBoolToVisibilityConverter}}"
IsEditable="False"
HorizontalAlignment="Stretch"
MaxDropDownHeight="180"
ItemsSource="{Binding UserDepartments}"
SelectedItem="{Binding UserDepartment, Mode=TwoWay}"
Style="{StaticResource EditForm_ComboBox}" />
<TextBox x:Uid="UserDepartmentNullText"
Grid.Row="3"
Grid.Column="1"
Visibility="{Binding ReadOnlyMode, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}}"
IsReadOnly="{Binding ReadOnlyMode, Mode=TwoWay}"
Text="{Binding UserDepartment, Mode=TwoWay}"
Style="{StaticResource EditForm_TextBox}" />
<TextBlock x:Uid="UserStatusText"
Grid.Row="4"
Grid.Column="0"
Style="{StaticResource EditForm_TextBlock}" />
<ComboBox Grid.Row="4"
Grid.Column="1"
Visibility="{Binding ReadOnlyMode,Mode=TwoWay, Converter={StaticResource InverseBoolToVisibilityConverter}}"
IsEditable="False"
HorizontalAlignment="Stretch"
MaxDropDownHeight="180"
ItemsSource="{Binding UserStatus}"
SelectedItem="{Binding SelectedUserStatus, Mode=TwoWay}"
Style="{StaticResource EditForm_ComboBox}" />
<TextBox Grid.Row="4"
Grid.Column="1"
Visibility="{Binding ReadOnlyMode, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}}"
IsReadOnly="{Binding ReadOnlyMode, Mode=TwoWay}"
Text="{Binding SelectedUserStatus, Mode=TwoWay}"
Style="{StaticResource EditForm_TextBox}" />
<TextBlock x:Uid="UserRoleText"
Grid.Row="5"
Grid.Column="0"
Style="{StaticResource EditForm_TextBlock}" />
<ComboBox x:Name="UserRoles"
Grid.Row="5"
Grid.Column="1"
Visibility="{Binding ReadOnlyMode,Mode=TwoWay, Converter={StaticResource InverseBoolToVisibilityConverter}}"
HorizontalAlignment="Stretch"
MaxDropDownHeight="180"
IsEditable="False"
ItemsSource="{Binding UserRoles}"
SelectedItem="{Binding SelectedUserRole, Mode=TwoWay}"
Style="{StaticResource EditForm_ComboBox}">
<i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="SelectionChanged">
<ic:InvokeCommandAction Command="{Binding SelectedItemCommand}"
CommandParameter="{x:Bind UserRoles.SelectedItem,Mode=OneWay}" />
</ic:EventTriggerBehavior>
</i:Interaction.Behaviors>
</ComboBox>
<TextBox Grid.Row="5"
Grid.Column="1"
Visibility="{Binding ReadOnlyMode, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}}"
IsReadOnly="{Binding ReadOnlyMode, Mode=TwoWay}"
HorizontalAlignment="Stretch"
Text="{Binding SelectedUserRole, Mode=TwoWay}"
Style="{StaticResource EditForm_TextBox}" />
</Grid>
<Grid Grid.Column="1"
Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
</Grid>
</Grid>
<Grid Row="2"
Visibility="{Binding IsEditButtonChecked, Converter={StaticResource BoolToVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="7*" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Right"
Margin="10 -50 10 0"
Visibility="{Binding IsUserSelected, Converter={StaticResource BoolToVisibilityConverter}}">
<Button Command="{Binding SaveCommand}"
Style="{ThemeResource DefaultButtonStyle}"
Margin="10 0">
<StackPanel Orientation="Horizontal">
<Viewbox Style="{StaticResource ButtonIcon}">
<SymbolIcon Symbol="Save" />
</Viewbox>
<TextBlock x:Uid="SaveButton" />
</StackPanel>
</Button>
<Button Command="{Binding ResetCommand}"
Style="{ThemeResource DefaultButtonStyle}">
<StackPanel Orientation="Horizontal">
<Viewbox Style="{StaticResource ButtonIcon}">
<SymbolIcon Symbol="Undo" />
</Viewbox>
<TextBlock x:Uid="ResetButton" />
</StackPanel>
</Button>
</StackPanel>
</Grid>
</Grid>
</UserControl>
using CSA2.ViewModels;
// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.
namespace CSA2.Views;
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class SearchUserPage : Page
{
public SearchUserViewModel ViewModel
{
get;
}
public SearchUserPage()
{
ViewModel = App.GetService<SearchUserViewModel>();
InitializeComponent();
}
}
I want to split my window in 2 parts side by side, like the picture below. On each side I have a SwapChainPanel and a StackPanel with a TextBlock, a TextBox and a Button.
Below that, I have a console (TextBlock) which takes up the entire width of the window.
How can I do that in XAML?
I have this but it does not split the window into 2 equal parts:
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<SwapChainPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" >
<TextBlock />
<TextBox />
<Button />
</StackPanel>
</SwapChainPanel>
<SwapChainPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" >
<TextBlock />
<TextBox />
<Button />
</StackPanel>
</SwapChainPanel>
</StackPanel>
<StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Left" >
<TextBlock />
</StackPanel>
</StackPanel>
StackPanel are for stacking Items One after another or one below another. So you will not get exact split. For that you Need to use Grid.
I marked up a basic XAML based on your Screenshot.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border BorderBrush="Blue" BorderThickness="5,5,2.5,5" Grid.Row="0" Grid.Column="0" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<SwapChainPanel BorderBrush="Blue" BorderThickness="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock Text="SwapChainPanel_L" Foreground="Blue" Margin="20"/>
</SwapChainPanel>
<StackPanel Orientation="Horizontal" Grid.Row="1" Margin="5,0">
<TextBlock Text="IP Address 1: " Foreground="Red" VerticalAlignment="Center"/>
<TextBox BorderBrush="Red" BorderThickness="5" Width="150" Margin="5,0"/>
<Button Content="Connect" Margin="5,0" BorderBrush="Red" BorderThickness="5" />
</StackPanel>
</Grid>
</Border>
<Border BorderBrush="Blue" BorderThickness="2.5,5,5,5" Grid.Row="0" Grid.Column="1" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<SwapChainPanel BorderBrush="Blue" BorderThickness="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock Text="SwapChainPanel_R" Foreground="Blue" Margin="20"/>
</SwapChainPanel>
<StackPanel Orientation="Horizontal" Grid.Row="1" Margin="5,0">
<TextBlock Text="IP Address 2: " Foreground="Red" VerticalAlignment="Center"/>
<TextBox BorderBrush="Red" BorderThickness="5" Width="150" Margin="5,0"/>
<Button Content="Connect" Margin="5,0" BorderBrush="Red" BorderThickness="5" />
</StackPanel>
</Grid>
</Border>
<Border BorderBrush="Green" BorderThickness="5" Grid.Row="1" Grid.ColumnSpan="2" Margin="0,5,0,0" Padding="5">
<TextBox Text="> Console" Foreground="Green" />
</Border>
</Grid>
Which Renders to
Inside my xaml page, I have a dynamically generated ListBox, Textblocks and Textboxes in a Stack Panel and it also has a "Page.BottomAppBar" which consists the CommandBar at the bottom of the page.
Code Edit 1 :(Provided Complete XAML UI code)
<Page>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="60"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Foreground="#616161" x:Name="tbHeading1" Text="Event Details" Margin="15,0,0,0" Width="auto" TextWrapping="Wrap" VerticalAlignment="Center" FontFamily="Calibri" FontSize="28" HorizontalAlignment="Left"></TextBlock>
</Grid>
<!--<ScrollViewer VerticalScrollBarVisibility="Auto" >-->
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Background="White" Margin="0,0,0,1">
<!--EVENT TYPE-->
<TextBlock FontFamily="Arial MT Regular" Margin="15,0,0,0" Foreground="#616161" x:Name="tbEventType" Text="Event Type" FontSize="20"></TextBlock>
<ComboBox x:Name="cmbEventType" RequestedTheme="Light" Padding="5,0,0,0" PlaceholderText=" - Tap for Selection - " FontSize="16" FontFamily="Calibri" Width="auto" BorderBrush="#80b656" BorderThickness="2" SelectedIndex="-1" SelectionChanged="cmbEventType_SelectionChanged" Margin="15,0">
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock x:Name="txtEventType" Text="{Binding Name}" Padding="5,0,0,0" Foreground="#80b656" FontFamily="Calibri" FontSize="20" TextAlignment="Left"/>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<!--END EVENT TYPE-->
<!--SITE-->
<TextBlock FontFamily="Arial MT Regular" Margin="15,5,0,0" Foreground="#616161" x:Name="tbSite" Text="Site" FontSize="20"></TextBlock>
<ComboBox x:Name="cmbSite" RequestedTheme="Light" Padding="5,0,0,0" PlaceholderText=" - Tap for Selection - " FontSize="16" FontFamily="Calibri" Width="auto" BorderBrush="#80b656" BorderThickness="2" Margin="15,0"
SelectionChanged="cmbSite_SelectionChanged" SelectedIndex="-1">
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock x:Name="txtSite" Text="{Binding Name}" Padding="5,0,0,0" Foreground="#80b656" FontFamily="Calibri" FontSize="20" TextAlignment="Left"/>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<!--END SITE-->
<!--LOCATION-->
<TextBlock FontFamily="Arial MT Regular" Margin="15,5,0,0" Foreground="#616161" x:Name="tbLocation" Text="Location" FontSize="20"></TextBlock>
<ComboBox x:Name="cmbLocation" RequestedTheme="Light" Padding="5,0,0,0" PlaceholderText=" - Tap for Selection - " FontSize="16" FontFamily="Calibri" Width="auto" BorderBrush="#80b656" BorderThickness="2" SelectedIndex="-1" Margin="15,0">
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock x:Name="txtLocation" Text="{Binding Location_Description}" Padding="5,0,0,0" Foreground="#80b656" FontFamily="Calibri" FontSize="20" TextAlignment="Left"/>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<!--END LOCATION-->
<!--EVENT DATE-->
<TextBlock FontFamily="Arial MT Regular" Margin="15,5,0,0" Foreground="#616161" x:Name="tbEventDate" Text="Event Date" FontSize="20"></TextBlock>
<DatePicker x:Name="txtEventDate" Margin="15,0" Background="White" Foreground="#80b656" FontSize="20" BorderBrush="Silver" HorizontalAlignment="Left" Width="auto" DateChanged="txtEventDate_DateChanged"></DatePicker>
<!--END EVENT DATE-->
<Line x:Name="lineSeparator" Fill="Gray" Stroke="Gray" X2="1" Stretch="Fill" Margin="0"/>
</StackPanel>
<!--ADDITIONAL FIELDS-->
<Grid x:Name="spAdditionalFeilds" Grid.Row="1" Background="White" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock x:Name="txtblkAdditionalFeilds" Grid.Row="0" Margin="15,0,0,0" Foreground="#616161" Text="Additional Fields" FontWeight="SemiBold" FontSize="20"></TextBlock>
<ListBox x:Name ="lstAdditionFields" Grid.Row="1" ItemsSource="{Binding AdditionalFieldControl, Mode=TwoWay}" ScrollViewer.VerticalScrollBarVisibility="Disabled" Foreground="Black" Background="White" HorizontalAlignment="Left" VerticalAlignment="Top" BorderThickness="1" Width="auto" Tapped="lstAdditionFields_Tapped" ScrollViewer.VerticalScrollMode="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,5,0,5">
<TextBlock x:Name="txtCaption" FontFamily="Arial MT Regular" Margin="15,5,0,0" Text="{Binding Caption, Mode=TwoWay}" Padding="0,0,0,0" Foreground="#616161" FontSize="20" Width="auto"/>
<Border Margin="15,8,10,0" Padding="2,3,2,3" BorderBrush="#80b656" BorderThickness="2">
<TextBlock x:Name="txtDefaultVal" FontFamily="Arial MT Regular" Text="{Binding StrDefalutValue, Mode=TwoWay}" TextWrapping="WrapWholeWords" Padding="5,0,0,0" Foreground="#80b656" FontSize="20" Loaded="txtDefaultVal_Loaded" />
</Border>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Line x:Name="lineSeparatorAdditionalField" Grid.Row="2" Fill="Gray" Stroke="Gray" X2="1" Stretch="Fill" Margin="5,0"/>
</Grid>
<!--END OF ADDITIONAL FIELD-->
<!--IMAGE ATACHMENT LIST-->
<Grid x:Name="spImageList" Grid.Row="2" Background="White" Margin="0,12,0,0" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock x:Name="txtblkAttachmentList" Grid.Row="0" Margin="15,0,0,0" Foreground="#616161" Text="Attachment List" FontWeight="SemiBold" FontSize="20"></TextBlock>
<ListBox x:Name="lbAttachmentList" Grid.Row="1" ItemsSource="{Binding EventAttachment, Mode=TwoWay}" Foreground="Black" Background="White" HorizontalAlignment="Left" VerticalAlignment="Top" BorderThickness="1" Width="auto" Padding="0,0,0,40" ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<!--ONE ROW-->
<StackPanel>
<Grid x:Name="attachmentStackPanel" VerticalAlignment="Center" Margin="0,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="70"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Margin="15,0,0,0" Source="{Binding AttachmentPath,Converter={StaticResource PathToImage}, Mode=TwoWay}" Width="110" Height="110" ></Image>
<TextBlock x:Name="txtName" Grid.Column="1" Width="auto" Margin="20,0,0,0" Text="{Binding Name,Mode=TwoWay}" Style="{StaticResource BodyTextBlockStyle}" Foreground="#616161" VerticalAlignment="Center" FontFamily="Calibri" FontSize="28" HorizontalAlignment="Left" Loaded="txtName_Loaded" />
<AppBarButton x:Name="btnRemoveImage" Grid.Column="2" Height="50" Icon="Cancel" Width="70" VerticalAlignment="Center" Foreground="Red" Click="btnRemoveImage_Click"></AppBarButton>
</Grid>
<Line x:Name="lineSeparator" Fill="#E0E0E0" Stroke="Gray" X2="1" Stretch="Fill" Margin="5,5"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
<!--END IMAGE ATACHMENT LIST-->
</Grid>
<!--</ScrollViewer>-->
</Grid>
</ScrollViewer>
<Page.BottomAppBar>
<CommandBar x:Name="CommandBarBottom" IsSticky="False" Background="LightGray" Foreground="#616161" ClosedDisplayMode="Compact">
<CommandBar.PrimaryCommands>
<AppBarButton x:Name="btnSaveEvent" Icon="Save" Label="Done" HorizontalAlignment="Right" Content="Save Event" Click="btnSaveEvent_Click"/>
<AppBarButton x:Name="btnAddAttachment" Icon="Attach" Label="Capture Img" HorizontalAlignment="Right" HorizontalContentAlignment="Right" Content="Capture Image" Click="btnAddAttachment_Click" />
</CommandBar.PrimaryCommands>
</CommandBar>
</Page.BottomAppBar>
Sometimes Last ListBox Item of my UI(List) hides behind the Command Bar(refer attachment).
.
So, I don't want the UI to get hide behind the Command bar.
The UI scrolls perfectly apart from overlapping the Command bar. But sometimes this issue appears when it starts scrolling behind the Command Bar. The ScrollViewer doesn't scroll as per as required in this case.
There are a couple of things:
I would advise you to use a ListView instead of a ListBox unless you need it for some particular reason. For more information refer this.
The Appbar is currently overlapping your content due to your ApplicationView to fix it, you can refer this.
In the below XAML, I am able to see the controls inside the expanderview on expanding which is on GridRow 6 but not able to see any controls inside the expanderview which is on GridRow 0. Can anyone help me as to what am I missing here?
<Grid x:Name="ContentPanel" Margin="0,50,0,1" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="0"></RowDefinition>
<RowDefinition Height="Auto" MinHeight="0"></RowDefinition>
<RowDefinition Height="Auto" MinHeight="0"></RowDefinition>
<RowDefinition Height="Auto" MinHeight="0"></RowDefinition>
<RowDefinition Height="Auto" MinHeight="0"></RowDefinition>
<RowDefinition Height="Auto" MinHeight="0"></RowDefinition>
<RowDefinition Height="Auto" MinHeight="0"></RowDefinition>
<RowDefinition Height="Auto" MinHeight="0"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Vertical" VerticalAlignment="Top">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Image x:Name="img1" VerticalAlignment="Top" Height="40" Width="40" HorizontalAlignment="Left" Margin="10,92,0,0" Source="Images/1.png" Visibility="Collapsed" Canvas.ZIndex="3"></Image>
<TextBlock x:Name="tbScore" VerticalAlignment="Top" HorizontalAlignment="Left" Foreground="White" Width="Auto" Margin="-32,97,0,0" FontFamily="TypeFace" FontSize="18" Canvas.ZIndex="3"/>
<Image x:Name="img1" Height="90" Margin="-23,20,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="90"/>
<StackPanel Orientation="Vertical">
<TextBlock x:Name="tb1" VerticalAlignment="Top" HorizontalAlignment="Left" Foreground="Black" Width="Auto" Margin="27,20,0,0" FontWeight="SemiBold" FontFamily="Georgia" FontSize="22" Tap="tbUserName_Tap"/>
<TextBlock x:Name="tb2" VerticalAlignment="Top" Foreground="#FF747171" HorizontalAlignment="Left" Margin="27,10,0,0" FontFamily="Georgia" FontSize="20" Tap="tbScreenName_Tap"/>
</StackPanel>
</StackPanel>
<toolkit:ExpanderView x:Name="evMoreDetails" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10,10,0,0" Collapsed="evMoreDetails_Collapsed" Header="V " Foreground="Black" FontSize="26" Expanded="evMoreDetails_Expanded">
<toolkit:ExpanderView.Items>
<StackPanel Orientation="Vertical" VerticalAlignment="Top">
<TextBlock Width="Auto" x:Name="Name" VerticalAlignment="Top" FontFamily="Segoe UI" TextWrapping="Wrap" Margin="10,8,0,0" FontSize="22" FontWeight="SemiBold" Foreground="Black" Text="{Binding name}" />
<TextBlock Width="Auto" x:Name="Name1" VerticalAlignment="Top" Margin="8,2,0,0" FontFamily="Segoe UI" TextWrapping="Wrap" FontSize="20" Foreground="Black" Text="{Binding name1}" />
</StackPanel>
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
</StackPanel>
<StackPanel Grid.Row="6" Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top">
<toolkit:ExpanderView x:Name="evMore" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10,20,0,50" Visibility="Collapsed">
<toolkit:ExpanderView.HeaderTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" >
<TextBlock Text="+ more" FontSize="26" Foreground="Black">
</TextBlock>
</Grid>
</DataTemplate>
</toolkit:ExpanderView.HeaderTemplate>
<toolkit:ExpanderView.Items>
<ListBox x:Name="lb" Height="250" HorizontalAlignment="Left">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Left" Width="{Binding Width}">
<Image x:Name="ProfilePic" Width="80" Height="80" Source="{Binding image}" VerticalAlignment="Top" Margin="0,10,0,0" />
<StackPanel Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Left" Width="{Binding Width}">
<StackPanel Orientation="Vertical" VerticalAlignment="Top">
<TextBlock Width="Auto" x:Name="Name" VerticalAlignment="Top" FontFamily="Segoe UI" TextWrapping="Wrap" Margin="10,8,0,0" FontSize="22" FontWeight="SemiBold" Foreground="Black" Text="{Binding name}" />
<TextBlock Width="Auto" x:Name="Name1" VerticalAlignment="Top" Margin="8,2,0,0" FontFamily="Segoe UI" TextWrapping="Wrap" FontSize="20" Foreground="Black" Text="{Binding name1}" />
</StackPanel>
</StackPanel>
<StackPanel Orientation="Vertical" VerticalAlignment="Top">
<CheckBox x:Name="chkSelect" IsChecked="{Binding isprim}" Foreground="Black" Tag="{Binding id}" HorizontalAlignment="Right" BorderBrush="Black" BorderThickness="0.5" Margin="0,0,0,0" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
</StackPanel>
</Grid>
I also have same problem in past. Please specify some height for expander item, in your case give some height to stackpanel at row 0.
I am not able to get the Scrollviewer to working in WPF. I guess I am doing something wrong but not able to figure out what. I also made sure that I am not using the ScrollViewer in side a StackPanel. Please note there are 2 of them and none seems to work.
I did try to fix the size of the ScrollViewer parent container to restrict size, which works, but that's not what I want to do. I want to make sure that on resizing the window, the increase of size happens in the containers appropriately.
Here is my code, I did change the strings and paths as this is a part of client application:
<Window x:Class="Common.Views.SomeView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wnd="clr-namespace:Common"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
xmlns:dxgt="http://schemas.devexpress.com/winfx/2008/xaml/grid/themekeys"
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
xmlns:uc="clr-namespace:Library.UI.Core;assembly=Library.UI.Core"
xmlns:cocls="clr-namespace:Library.UI.Core;assembly=Library.UI.Core"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
ToolTipService.ShowOnDisabled="True"
dx:ThemeManager.ThemeName="Office2007Silver"
mc:Ignorable="d"
WindowStartupLocation="CenterScreen"
ResizeMode="CanResize"
Title="Some Validation" IsTabStop="False"
Height="365"
Width="792" d:Height="700" d:Width="1000">
<Grid Background="{StaticResource BackgroundBrush}" x:Name="SomeGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Menu Name="MainMenu" Background="{StaticResource BackgroundBrush}" Grid.Row="0" >
</Menu>
<Rectangle Grid.Row="1" Style="{StaticResource ResourceKey=HorizontalRectangleBorderStyle}" />
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ToolBarTray HorizontalAlignment="Stretch" FlowDirection="LeftToRight" Background="{StaticResource BackgroundBrush}" Grid.Column="0" x:Name="tlbartrayMaster" >
<ToolBar Background="{StaticResource BackgroundBrush}" Style="{DynamicResource DefaultToolBarStyle}" Width="Auto" x:Name="tlbarMasterImgTools" IsTabStop="False">
<Button Name="NewToolBarButton" x:FieldModifier="public" Style="{StaticResource ResourceKey=ToolBarBtnStyle}"
Command="{x:Static wnd:MyAppCommands.MyAppInsertCommand}" CommandTarget="{Binding ElementName=SomeValidationGrid}"
ToolTip="Insert (F5)" IsTabStop="False"
IsEnabled="{Binding RelativeSource={RelativeSource AncestorType={x:Type wnd:MainWindowBase},
Mode=FindAncestor},Path=CanInsert, Mode=TwoWay}">
<Image Source="pack://application:,,,/Common;component/Images/new.bmp"
Style="{StaticResource ImageOpacityStyle}" Height="16" Width="16" />
</Button>
<Button Name="SaveToolBarButton" x:FieldModifier="public" ToolTip="Save (F2)" Style="{StaticResource ResourceKey=ToolBarBtnStyle}"
IsTabStop="False" ToolTipService.ShowOnDisabled="True"
Command="{x:Static wnd:MyAppCommands.MyAppSaveCommand}" CommandTarget="{Binding ElementName=SomeValidationGrid}"
IsEnabled="{Binding RelativeSource={RelativeSource AncestorType={x:Type wnd:MainWindowBase},
Mode=FindAncestor},Path=CanSave, Mode=TwoWay}">
<Image Source="pack://application:,,,/Common;component/Images/Save.bmp"
Style="{DynamicResource ImageOpacityStyle}" Height="16" Width="16" />
</Button>
<Separator/>
<Button Name="SearchToolBarButton" ToolTip="Search for a specific record (F4)" Style="{StaticResource ResourceKey=ToolBarBtnStyle}"
IsTabStop="False"
Command="{x:Static wnd:MyAppCommands.MyAppSearchCommand}" CommandTarget="{Binding ElementName=SomeValidationGrid}"
IsEnabled="{Binding RelativeSource={RelativeSource AncestorType={x:Type wnd:MainWindowBase},
Mode=FindAncestor},Path=CanSearch, Mode=TwoWay}">
<Image Source="pack://application:,,,/Common;component/Images/Edit.bmp"
Style="{DynamicResource ImageOpacityStyle}" Height="16" Width="16" />
</Button>
<Separator/>
<Button Name="CancelToolBarButton" Focusable="False" x:FieldModifier="public" ToolTip="Cancel (Esc)" Style="{StaticResource
ResourceKey=ToolBarBtnStyle}" IsTabStop="False" ToolTipService.ShowOnDisabled="True"
Command="{x:Static wnd:MyAppCommands.MyAppEscCommand}" CommandTarget="{Binding ElementName=SomeValidationGrid}"
IsEnabled="{Binding RelativeSource={RelativeSource AncestorType={x:Type wnd:MainWindowBase},
Mode=FindAncestor},Path=CanCancel, Mode=TwoWay}">
<Image Source="pack://application:,,,/Common;component/Images/Undo.bmp"
Style="{DynamicResource ImageOpacityStyle}" Height="16" Width="16" />
</Button>
<Button Name="DeleteToolBarButton" x:FieldModifier="public" ToolTip="Delete (Shift+F2)" Style="{StaticResource ResourceKey=ToolBarBtnStyle}"
IsTabStop="False"
Command="{x:Static wnd:MyAppCommands.MyAppDeleteCommand}" CommandTarget="{Binding ElementName=SomeValidationGrid}"
IsEnabled="{Binding RelativeSource={RelativeSource AncestorType={x:Type wnd:MainWindowBase},
Mode=FindAncestor},Path=CanDelete, Mode=TwoWay}">
<Image Source="pack://application:,,,/Common;component/Images/Bin.bmp"
Style="{DynamicResource ImageOpacityStyle}" Height="16" Width="16" />
</Button>
<Separator/>
<Button Name="CalculatorToolBarButton" ToolTip="Activate Calculator" Style="{StaticResource ResourceKey=ToolBarBtnStyle}"
Command="{x:Static wnd:MyAppCommands.MyAppCalculatorCommand}" CommandTarget="{Binding ElementName=SomeValidationGrid}"
IsTabStop="False" IsEnabled="True">
<Image Source="pack://application:,,,/Common;component/Images/Calculator.bmp"
Style="{DynamicResource ImageOpacityStyle}" Height="16" Width="16"/>
</Button>
<Button x:Name="PrintToolBarButton" Style="{StaticResource ResourceKey=ToolBarBtnStyle}" ToolTip="View/Print Report"
IsTabStop="False" >
<Image Source="pack://application:,,,/Common;component/Images/Print.bmp"
Style="{DynamicResource ImageOpacityStyle}" Height="16" Width="16" />
</Button>
<Button x:Name="HelpToolBarButton" Visibility="Collapsed" Style="{StaticResource ResourceKey=ToolBarBtnStyle}"
ToolTip="Access help on current subject" IsTabStop="False" >
<Image Source="pack://application:,,,/Common;component/Images/information.bmp"
Style="{DynamicResource ImageOpacityStyle}" Height="16" Width="16" />
</Button>
<Button x:Name="SearchParticipantToolbarButton" Style="{StaticResource ResourceKey=ToolBarBtnStyle}"
ToolTip="Search for Participant/Entity/Member" IsTabStop="False" >
<Image Source="pack://application:,,,/Common;component/Images/Candle.bmp"
Style="{DynamicResource ImageOpacityStyle}" Height="16" Width="16" />
</Button>
<Separator/>
</ToolBar>
<ToolBar x:Name="MyCompImageToolbar" HorizontalAlignment="Stretch" FlowDirection="LeftToRight" IsTabStop="False"
Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type ToolBarTray}}}"
Style="{DynamicResource DefaultToolBarStyle}" MaxHeight="1000" ToolBarTray.IsLocked="True">
<Label x:Name="ToolBarMessageLabel" HorizontalContentAlignment="Center" Foreground="#000084" FontWeight="Bold" Margin="50,0,0,0"/>
</ToolBar>
</ToolBarTray>
<TextBlock Grid.Column="1" >
<Hyperlink NavigateUri="http://MyComp-software.com" Foreground="Transparent" ToolTip="http://MyComp-software.com">
<Image Source="pack://application:,,,/Common;component/Images/MyCompLogo.bmp"
VerticalAlignment="Stretch"
Style="{StaticResource DefaultMenuTabImgStyle}" />
</Hyperlink>
</TextBlock>
</Grid>
<Rectangle Grid.Row="3" Style="{StaticResource ResourceKey=HorizontalRectangleBorderStyle}" />
<Grid Grid.Column="0" Grid.Row="4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="ErrorStringGrid" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3">
<TextBlock x:Name="ErrorText" Text="{Binding Path=ErrorString}" Foreground="Red" />
</Grid>
<Grid x:Name="SomeToValidateSectionGrid" Grid.Column="0" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="SomeToValidateSection1Grid" Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="Some To Validate" FontWeight="Bold" Grid.Row="0" HorizontalAlignment="Center" />
<ScrollViewer CanContentScroll="True" IsDeferredScrollingEnabled="False" VerticalScrollBarVisibility="Auto" Width="Auto" Grid.Row="1">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock x:Name="txtblSomeBlockToValidate" Foreground="{StaticResource BlueTextBrush}" Height="42" HorizontalAlignment="Center" />
<TextBlock Text="Some Details:" FontWeight="Bold" HorizontalAlignment="Center"/>
<Grid HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="Some1:" Grid.Column="0" Grid.Row="0" />
<TextBlock Text="Some1:" Grid.Column="0" Grid.Row="1" />
<TextBlock Text="Some1:" Grid.Column="0" Grid.Row="2" />
<TextBlock Text="Some1:" Grid.Column="0" Grid.Row="3" />
<TextBlock Text="Some1:" Grid.Column="0" Grid.Row="4" />
<TextBlock Text="Some1:" Grid.Column="0" Grid.Row="5" />
<TextBlock Text="Some1:" Grid.Column="0" Grid.Row="6" />
<TextBlock Text="{Binding Some1}" Grid.Column="1" Grid.Row="0" />
<TextBlock Text="{Binding Some1}" Grid.Column="1" Grid.Row="1" />
<TextBlock Text="{Binding Some1}" Grid.Column="1" Grid.Row="2" />
<TextBlock Text="{Binding Some1}" Grid.Column="1" Grid.Row="3" />
<TextBlock Text="{Binding Some1}" Grid.Column="1" Grid.Row="4" />
<TextBlock Text="{Binding Some1}" Grid.Column="1" Grid.Row="5" />
<TextBlock Text="{Binding Some1}" Grid.Column="1" Grid.Row="6" />
</Grid>
</Grid>
</ScrollViewer>
</Grid>
<Grid x:Name="SomeToValidateSection2Grid" Grid.Row="1">
<Expander Name="MyAppExpander" IsExpanded="False" Height="Auto" Style="{DynamicResource ExpanderStyle4}"
BorderThickness="2" BorderBrush="#FFBA8B8B" Opacity="1" IsTabStop="False" HorizontalAlignment="Stretch">
<Expander.Header>
<StackPanel HorizontalAlignment="Stretch">
<TextBlock Text="More Information" HorizontalAlignment="Center" TextDecorations="Underline" Foreground="#0054E3"/>
</StackPanel>
</Expander.Header>
<Border BorderThickness="1,0,0,0" BorderBrush="#FFBA8B8B" Background="White" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<StackPanel x:Name="panelBanks">
<TextBlock Text="{Binding AdditionalInfo}" HorizontalAlignment="Center" Height="61" />
</StackPanel>
</Border>
</Expander>
</Grid>
</Grid>
<GridSplitter Grid.Row="1" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center"/>
<Grid x:Name="SuggestedSomeGrid" Grid.Column="2" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="Suggested Validation Some" FontWeight="Bold" Grid.Row="0" HorizontalAlignment="Center"/>
<ScrollViewer CanContentScroll="True" IsDeferredScrollingEnabled="False" VerticalScrollBarVisibility="Auto" Width="Auto" Grid.Row="1">
<Grid ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Visible">
<TextBlock x:Name="txtblSomeBlockValidated" Foreground="{StaticResource BlueTextBrush}" Height="42" HorizontalAlignment="Stretch" />
<TextBlock Text="Some Details:" FontWeight="Bold" HorizontalAlignment="Center"/>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="Some1:" Grid.Row="0" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="1" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="2" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="3" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="4" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="5" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="6" Grid.Column="0" Margin="0,10,0,0"/>
<TextBlock Text="Some1:" Grid.Row="7" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="8" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="9" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="10" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="11" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="12" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="13" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="14" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="15" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="16" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="17" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="18" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="19" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="20" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="21" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="22" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="23" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="24" Grid.Column="0"/>
<TextBlock Text="Some1:" Grid.Row="25" Grid.Column="0"/>
<TextBlock Text="{Binding Some1}" Grid.Row="0" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="1" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="2" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="3" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="4" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="5" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="6" Grid.Column="1" Margin="0,10,0,0"/>
<TextBlock Text="{Binding Some1}" Grid.Row="7" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="8" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="9" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="10" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="11" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="12" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="13" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="14" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="15" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="16" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="17" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="18" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="19" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="20" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="21" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="22" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="23" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="24" Grid.Column="1"/>
<TextBlock Text="{Binding Some1}" Grid.Row="25" Grid.Column="1"/>
</Grid>
</Grid>
</ScrollViewer>
<StackPanel Orientation="Horizontal" Grid.Row="2" >
<Button x:Name="btnAcceptSuggested" Margin="0,0,10,0" IsTabStop="True"
TabIndex="5" Height="28" Width="132" Click="btnAcceptSuggested_Click">
<StackPanel Orientation="Horizontal">
<Image Name="imgAcceptSuggestion"
Source="pack://application:,,,/Common;component/Images/Some1.bmp" Margin="0,0,5,0"/>
<TextBlock Name="txtblAcceptSuggested">
<Underline>A</Underline>ccept Suggested
</TextBlock>
<AccessText Text="_A" Height="0" Width="0"/>
</StackPanel>
</Button>
<Button x:Name="btnValidateSome" Margin="0,0,10,0" IsTabStop="True"
TabIndex="5" Height="28" Width="132" Click="btnValidateSome_Click">
<StackPanel Orientation="Horizontal">
<Image Name="imgAcceptSuggestion1"
Source="pack://application:,,,/Common;component/Images/Some1.bmp" Margin="0,0,5,0"/>
<TextBlock Name="txtblValidateSome" Grid.Column="1">
Show me <Underline>M</Underline>ore
</TextBlock>
<AccessText Text="_M" Height="0" Width="0"/>
</StackPanel>
</Button>
<Button x:Name="btnUndo" Margin="0,0,10,0" IsTabStop="True" Visibility="Collapsed"
TabIndex="5" Height="28" Width="132" Click="btnUndo_Click">
<StackPanel Orientation="Horizontal">
<Image Name="imgAcceptSuggestion2"
Source="pack://application:,,,/Common;component/Images/Some1.bmp" Margin="0,0,5,0"/>
<TextBlock Name="txtblUndo" Grid.Column="1">
<Underline>U</Underline>ndo
</TextBlock>
<AccessText Text="_U" Height="0" Width="0"/>
</StackPanel>
</Button>
<Button x:Name="btnOverrideSuggested" Margin="0,0,10,0" IsTabStop="True"
TabIndex="5" Height="28" Width="140" ToolTip="Override suggested validated Some." Click="btnOverrideSuggested_Click">
<StackPanel Orientation="Horizontal">
<Image Name="imgAcceptSuggestion3"
Source="pack://application:,,,/Common;component/Images/Some1.bmp" Margin="0,0,5,0"/>
<TextBlock Name="txtblOverrideSuggested" Grid.Column="1">
<Underline>O</Underline>verride Suggested
</TextBlock>
<AccessText Text="_O" Height="0" Width="0"/>
</StackPanel>
</Button>
</StackPanel>
</Grid>
</Grid>
<Rectangle x:Name="rectRowBorder_Row05" Grid.Row="5" Style="{StaticResource ResourceKey=HorizontalRectangleBorderStyle}" />
<StackPanel Grid.Row="6" Orientation="Horizontal" VerticalAlignment="Center" Margin="0,5,0,5">
<Button x:Name="btnCancel" Margin="0,0,10,0" IsTabStop="True"
TabIndex="5" Height="28" Width="132" IsCancel="True">
<StackPanel Orientation="Horizontal">
<Image Name="imgCancel"
Source="pack://application:,,,/Common;component/Images/Cancel.bmp" Margin="0,0,5,0"/>
<TextBlock Name="txtblCancel" Grid.Column="1">
<Underline>C</Underline>ancel
</TextBlock>
<AccessText Text="_C" Height="0" Width="0"/>
</StackPanel>
</Button>
</StackPanel>
</Grid>
</Window>
Sorry for the huge code, but that's what I have. Also, please leave a comment for downvotes.