Scrollviewer Scrollbar doesn't appear - .net-4.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.

Related

Replace a FlexLayout with a StackLayout

I have a Grid with two rows in Auto within a CollectionView. In one I have a FlexLayout, in the other a Label. For some strange problem, with these two controls the Label is not displayed and the only way I have found so far is to replace the FlexLayout with a StackLayout.
<DataTemplate>
<yummy:PancakeView CornerRadius="15">
<yummy:PancakeView.Shadow>
<yummy:DropShadow Color="LightBlue" Offset="10,10"/>
</yummy:PancakeView.Shadow>
<Grid BackgroundColor="{DynamicResource SfondoElemDiario}" RowSpacing="0.2">
<Grid.RowDefinitions>
<RowDefinition Height="27"/>
<RowDefinition Height="27"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="32"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Margin="4,4,4,7" Source="{Binding Umore}" VerticalOptions="Center"/>
<Label Grid.Row="0" FontFamily="FontM" Grid.Column="1" Text="{Binding GiornoTrascritto}" FontSize="16" TextColor="{DynamicResource TextColor}" Opacity="0.6" VerticalOptions="Center" />
<Label Grid.Row="1" FontFamily="FontM" Grid.Column="1" Text="{Binding Orario}" FontSize="16" TextColor="{DynamicResource TextColor}" Opacity="0.6" VerticalOptions="Center"/>
<ProgressBar Grid.Row="1" Grid.Column="0" ProgressColor="LightGray" HeightRequest="10" Progress="1" VerticalOptions="End"/>
<ProgressBar Grid.Row="1" Grid.Column="0" ProgressColor="{Binding ColoreUmore}" HeightRequest="10" Progress="{Binding ProgValore}" VerticalOptions="End"/>
<FlexLayout
Grid.Row="2"
Margin="0,5,10,0"
Grid.Column="1"
BindableLayout.ItemsSource="{Binding IconDiaries}"
Wrap="Wrap"
JustifyContent="Start"
Direction="Row"
AlignItems="Start"
AlignContent="Start">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid Padding="0,2,3,0">
<Grid.RowDefinitions>
<RowDefinition Height="18"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="18"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<controls:TintedImage Grid.Row="0" Grid.Column="0" Source="{Binding isSource}" Margin="2" TintColor="{Binding ColoreUmore}"/>
<Label Grid.Row="0" Grid.Column="1" FontFamily="FontM" Text="{Binding id}" TextColor="{DynamicResource TextColor}" Opacity="0.9" FontSize="13" VerticalTextAlignment="Center" Margin="0,0,3,0"/>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
<Label Grid.Row="3" Grid.Column="1" FontFamily="FontM" TextColor="{DynamicResource TextColor}" FontSize="16" Text="{Binding Nota}"/>
Result
Is there any way to turn this FlexLayout into a StackLayout and be able to visualize in the same way?
Use * instead of Auto for your FlexLayout row.
<Grid BackgroundColor="{DynamicResource SfondoElemDiario}" RowSpacing="0.2">
<Grid.RowDefinitions>
<RowDefinition Height="27" />
<RowDefinition Height="27" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- elements -->
</Grid>

Split the window vertically in XAML

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

XAML ListView on wrong positon in the grid

I am trying to make the listview in the picture to the third row on the grid, which is below the slider controls. Unfortunately it is not taking its position as per the definition. Please advise
Here is the definition:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/> <!--Top date-->
<RowDefinition Height="10"/> <!--Just space between top date & slider controls-->
<RowDefinition Height="Auto"/> <!--Slider row-->
<RowDefinition Height="*"/> <!--Favorite shifts list view-->
</Grid.RowDefinitions>
<TextBlock x:Name="tbDate" Grid.Row="0" Text="Mon 28 April" Foreground="White" HorizontalAlignment="Center" FontSize="23" Margin="6,0,0,0" Style="{StaticResource MessageDialogTitleStyle}"/>
<Grid Grid.Row="2" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="88.333"/>
<ColumnDefinition Width="Auto" MinWidth="193.333"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button x:Name="btnAddToFavs" Grid.Column="0" Content="ADD" Click="btnAddToFavs_Click"/>
<StackPanel Grid.Column="1" Orientation="Vertical" HorizontalAlignment="Center" Margin="0,0,0.333,0" Width="88">
<Slider x:Name="sliderStartTime" Orientation="Vertical" LargeChange="0" Maximum="48" SmallChange="0" Margin="0,31,0,-332" Style="{StaticResource SliderStartStyle}" IsDirectionReversed="True" HorizontalAlignment="Center" />
<Border Background="White" CornerRadius="5" Width="Auto">
<TextBlock x:Name="tbShiftStart" Text="{Binding Value, Converter={StaticResource sliderValueToHoursConverter}, ElementName=sliderStartTime}" Foreground="Red" FontSize="13" FontFamily="Nirmala UI" Width="55" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Vertical" HorizontalAlignment="Center" Margin="0.333,0,0,0" Width="88">
<Slider x:Name="sliderEndTime" Orientation="Vertical" LargeChange="0" Maximum="48" SmallChange="0" Margin="0,31,0,-332" Style="{StaticResource SliderEndStyle}" IsDirectionReversed="True" HorizontalAlignment="Center" Value="48" />
<Border Background="White" CornerRadius="5" Width="Auto">
<TextBlock x:Name="tbShiftEnd" Text="{Binding Value, Converter={StaticResource sliderValueToHoursConverter}, ElementName=sliderEndTime}" Foreground="Green" FontSize="13" FontFamily="Nirmala UI" Width="55" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</StackPanel>
</Grid>
<ListView x:Name="lvFavShifts" Grid.Row="3" Foreground="Red" FontSize="40" MaxHeight="300" Margin="0,40" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border BorderThickness="12" Background="#FFC2CEDC" Grid.Column="0" Grid.ColumnSpan="5" CornerRadius="15"/>
<Button x:Name="btnSetShift" Content="Set" Background="Green" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
<TextBlock x:Name="tbFavShiftStart" Grid.Column="1" Text="{Binding theStartTime}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
<TextBlock x:Name="tbHyphen" Grid.Column="2" Text="-" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
<TextBlock x:Name="tbFavShiftEnd" Grid.Column="3" Text="{Binding theEndTime}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
<Button x:Name="btnDeleteShift" Content="Delete" Background="Red" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Ive changed your code a bit to hopefully get a better result. Its not ideal but should be more easily tweaked for desired result.
The main change is that the Margins like
<Slider x:Name="sliderStartTime" Margin="0,31,0,-332" />
have gone as they are a recipe for disaster on varying screen sizes. Have a look and see what you think.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/> //its ok to set height here
<!--Top date-->
<RowDefinition Height="10"/>
<!--Just space between top date & slider controls-->
<RowDefinition Height="Auto"/>
<!--Slider row-->
<RowDefinition Height="*"/>
<!--Favorite shifts list view-->
</Grid.RowDefinitions>
<TextBlock x:Name="tbDate" Grid.Row="0" Text="Mon 28 April" Foreground="White" HorizontalAlignment="Center" FontSize="23" Margin="6,0,0,0" Style="{StaticResource MessageDialogTitleStyle}"/>
<Grid Grid.Row="2" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="1*"/> //adaptable fit to varying screen sizes
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Button x:Name="btnAddToFavs" Grid.Column="0" Content="ADD" />
<StackPanel Grid.Column="1" Orientation="Vertical" HorizontalAlignment="Center" Width="88">
<Border Background="White" CornerRadius="5" Width="Auto">
<TextBlock x:Name="tbShiftStart" Text="30" Foreground="Red"
FontSize="13" FontFamily="Nirmala UI"
Width="55" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Slider x:Name="sliderStartTime" Orientation="Vertical" LargeChange="0" Maximum="48"
SmallChange="0"
IsDirectionReversed="True" HorizontalAlignment="Center" Height="300"
/> // Slider has a reasonable height. You probably want control of this on phones
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Vertical" HorizontalAlignment="Center" Width="88">
<Border Background="White" CornerRadius="5" Width="Auto">
<TextBlock x:Name="tbShiftEnd" Text="22" Foreground="Green" FontSize="13" FontFamily="Nirmala UI" Width="55" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Slider x:Name="sliderEndTime" Orientation="Vertical" LargeChange="0" Maximum="48" SmallChange="0" IsDirectionReversed="True" HorizontalAlignment="Center"
VerticalAlignment="Stretch" Value="48" Height="300" />
</StackPanel>
</Grid>
<ListView x:Name="lvFavShifts" Grid.Row="3" Foreground="Red"
FontSize="40" Margin="0,40" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border BorderThickness="12" Background="#FFC2CEDC" Grid.Column="0" Grid.ColumnSpan="5"
CornerRadius="15"/>
<Button x:Name="btnSetShift" Content="Set" Background="Green" Grid.Column="0"
HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
<TextBlock x:Name="tbFavShiftStart" Grid.Column="1" Text="{Binding theStartTime}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
<TextBlock x:Name="tbHyphen" Grid.Column="2" Text="-" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
<TextBlock x:Name="tbFavShiftEnd" Grid.Column="3" Text="{Binding theEndTime}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="19" FontFamily="Global User Interface" Foreground="#FF216E8B"/>
<Button x:Name="btnDeleteShift" Content="Delete" Background="Red" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontFamily="Global User Interface"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>

XAML = Objects in grid are not visible

I'm learning XAML right now and i want to create simple music player but i have a little problem. If i define second, third... grid, objects in this grid are not visible (only in first grid are visible). Can u help me?
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75"></ColumnDefinition>
<ColumnDefinition Width="75"></ColumnDefinition>
<ColumnDefinition Width="75"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="53"></RowDefinition>
<RowDefinition Height="75"></RowDefinition>
</Grid.RowDefinitions>
<Rectangle Fill="#333333"
HorizontalAlignment="Left"
Height="128"
Grid.RowSpan="2"
VerticalAlignment="Top"
Width="480"
Grid.ColumnSpan="4" />
<Button CommandParameter="alarm"
Click="PlaySound"
VerticalContentAlignment="Center"
Grid.Column="0"
Grid.Row="1"
Content="►"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="75"
Height="75"
Style="{StaticResource Rounded}"
FontFamily="Arial"
FontSize="20" />
<Button VerticalContentAlignment="Center"
Grid.Column="1"
Grid.Row="1"
Content=" ▌▌"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="75"
Height="75"
Style="{StaticResource Rounded}"
FontFamily="Arial"
FontSize="15" />
<Button VerticalContentAlignment="Center"
Grid.Column="2"
Grid.Row="1"
Content="■"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="75"
Height="75"
Style="{StaticResource Rounded}"
FontFamily="Arial"
FontSize="25" />
<TextBlock Grid.Row="0"
HorizontalAlignment="Left"
TextWrapping="Wrap"
Text="song_name"
VerticalAlignment="Top"
Grid.ColumnSpan="3"
Height="53"
Width="auto"
FontSize="30"
Margin="12,0,0,0" />
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75"></ColumnDefinition>
<ColumnDefinition Width="75"></ColumnDefinition>
<ColumnDefinition Width="75"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="53"></RowDefinition>
<RowDefinition Height="75"></RowDefinition>
</Grid.RowDefinitions>
<Rectangle Fill="#333333"
HorizontalAlignment="Left"
Height="128"
Grid.RowSpan="2"
VerticalAlignment="Top"
Width="480"
Grid.ColumnSpan="4" />
<Button CommandParameter="alarm"
Click="PlaySound"
VerticalContentAlignment="Center"
Grid.Column="0"
Grid.Row="1"
Content="►"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="75"
Height="75"
Style="{StaticResource Rounded}"
FontFamily="Arial"
FontSize="20" />
<Button VerticalContentAlignment="Center"
Grid.Column="1"
Grid.Row="1"
Content=" ▌▌"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="75"
Height="75"
Style="{StaticResource Rounded}"
FontFamily="Arial"
FontSize="15" />
<Button VerticalContentAlignment="Center"
Grid.Column="2"
Grid.Row="1"
Content="■"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="75"
Height="75"
Style="{StaticResource Rounded}"
FontFamily="Arial"
FontSize="25" />
<TextBlock Grid.Row="0"
HorizontalAlignment="Left"
TextWrapping="Wrap"
Text="song_name"
VerticalAlignment="Top"
Grid.ColumnSpan="3"
Height="53"
Width="auto"
FontSize="30"
Margin="12,0,0,0" />
</Grid>
</StackPanel>
Screen: http://i.imgur.com/Wry3Zvl.png
You are not being explicit with your grid location assignments.
Where is the Grid.Row and Grid.Column here?
<Rectangle Fill="#333333" HorizontalAlignment="Left" Height="128" Grid.RowSpan="2" VerticalAlignment="Top" Width="480" Grid.ColumnSpan="4"/>

Wp8 xaml design

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>