Develop Reference

How to Pass data from one UserControl1 to UserControl2 from a button in UserControl1 WPF MVVM

I recently started studying about User Controls. I have a Main Window which contains this 2 User Controls. UserControl1 is a form to get the data, and when the submit button is clicked in UserControl1, the UserControl2 will be visible viewing the data send from the UserControl1.
Here is my MainWindow xaml (HomeCareMain.xaml)
<Window x:Class="PatientRecordMVVM.Views.HomeCareMain"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
FontFamily="{materialDesign:MaterialDesignFont}"
xmlns:local="clr-namespace:PatientRecordMVVM.Views"
mc:Ignorable="d"
Title="HomeCareMain" Height="850" Width="1500" Foreground="White">
<Window.Resources>
<Storyboard x:Key="MenuOpen">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridSideMenu">
<EasingDoubleKeyFrame KeyTime="0" Value="60"/>
<EasingDoubleKeyFrame KeyTime="0:0:0:0" Value="210"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MenuClose">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridSideMenu">
<EasingDoubleKeyFrame KeyTime="0" Value="210"/>
<EasingDoubleKeyFrame KeyTime="0:0:0:0" Value="60"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpenMenu">
<BeginStoryboard Storyboard="{StaticResource MenuOpen}"/>
</EventTrigger>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonCloseMenu">
<BeginStoryboard Storyboard="{StaticResource MenuClose}"/>
</EventTrigger>
</Window.Triggers>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="8*"/>
<ColumnDefinition Width="8*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="25*"/>
</Grid.RowDefinitions>
<Image x:Name="Logo" Grid.Row="1" Grid.ColumnSpan="3" Source="/PatientRecordMVVM;component/Images/logo.jpg" Opacity="0.12" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Grid Grid.Row="0" Grid.ColumnSpan="3" Height="60" VerticalAlignment="Top" Background="#2c8a93">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Image Source="/PatientRecordMVVM;component/Images/logo.jpg" Width="30" Height="30" Margin="0,0,20,0"/>
<TextBlock Text="HOME CARE" FontSize="22" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
<materialDesign:PopupBox PlacementMode="BottomAndAlignRightEdges" StaysOpen="False" Foreground="White" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="10">
<StackPanel Width="150">
<Button Content="Settings"/>
<Separator/>
<Button Command="{Binding Path=LogoutCommand}" Content="Logout"/>
</StackPanel>
</materialDesign:PopupBox>
</Grid>
<Grid x:Name="GridSideMenu" Grid.RowSpan="2" Grid.Column="0" Width="210" HorizontalAlignment="Left" Background="#1f3e66">
<StackPanel Orientation="Vertical">
<Grid Height="60" VerticalAlignment="Top">
<Button x:Name="ButtonCloseMenu" Background="{x:Null}" BorderBrush="{x:Null}" Width="60" Height="60" HorizontalAlignment="Right" Visibility="Collapsed" Click="ButtonCloseMenu_Click">
<materialDesign:PackIcon Kind="ArrowLeft" Width="25" Height="25"/>
</Button>
<Button x:Name="ButtonOpenMenu" Background="{x:Null}" BorderBrush="{x:Null}" Width="60" Height="60" HorizontalAlignment="Right" Click="ButtonOpenMenu_Click">
<materialDesign:PackIcon Kind="Menu" Width="25" Height="25"/>
</Button>
</Grid>
<ListView Foreground="White" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListViewItem Height="60">
<Button Command="{Binding Path=AddPatientCommand}" CommandParameter="{Binding ElementName=AddPatient}" Background="#1f3e66" BorderBrush="#1f3e66" Width="190" Height="40" VerticalAlignment="Top">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<materialDesign:PackIcon Kind="Add" Foreground="White" Width="25" Height="25" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="-5,0,20,0"/>
<TextBlock Text="Add Patient Details" FontSize="12" VerticalAlignment="Center" Margin='0,0,20,0'/>
</StackPanel>
</Button>
</ListViewItem>
</ListView>
</StackPanel>
</Grid>
<Grid Grid.Row="1" Grid.ColumnSpan="3">
<local:AddPatientRecordDetails
x:Name="AddPatient"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Width="800"
Height="730"
Margin="0,0,20,0"
/>
</Grid>
<Grid Grid.Row="1" Grid.Column="2">
<local:PrintPreviewControl
x:Name="PrintPreview"
HorizontalAlignment="Center"
Width="600"
Height="700"
/>
</Grid>
</Grid>
</Window>
This is UserControl1 xaml (AddPatientRecordDetails.xaml)
<UserControl x:Class="PatientRecordMVVM.Views.AddPatientRecordDetails"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
FontFamily="{materialDesign:MaterialDesignFont}"
xmlns:local="clr-namespace:PatientRecordMVVM.Views"
mc:Ignorable="d"
d:DesignHeight="850" d:DesignWidth="600" Background="Transparent" BorderBrush="#58af9d" BorderThickness="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="2.5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1.5*"/>
<RowDefinition Height="1.5*"/>
<RowDefinition Height="18*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Grid Grid.RowSpan="2" Grid.ColumnSpan="3" Background="#2c8a93"/>
<!--Patient Id block-->
<StackPanel Grid.ColumnSpan="2" Style="{StaticResource StackpanelStyle}">
<Label FontSize="16" FontWeight="Bold" Foreground="White">
Patient ID :
</Label>
<Label Content="{Binding Path=GuidGenerator}" FontSize="16" Foreground="White" Margin="5,0"/>
</StackPanel>
<!--Date block-->
<StackPanel Grid.ColumnSpan="3" Style="{StaticResource StackpanelStyle}" HorizontalAlignment="Right">
<Label FontSize="16" FontWeight="Bold" Foreground="White">
Date :
</Label>
<Label Name="date_time" Content="{Binding Path=CurrentDate}" FontSize="16" Foreground="White" Margin="5,0"/>
</StackPanel>
<!--Title block-->
<TextBlock Grid.Row="1" Grid.ColumnSpan="3" FontSize="20" FontWeight="Bold" Foreground="White" TextDecorations="Underline" HorizontalAlignment="Center" VerticalAlignment="Center" MinWidth="200">
Patient Registration Information
</TextBlock>
<!--Main sub Grid-->
<Grid Grid.Row="2" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="25,25,25,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="200*" MinWidth="158" MaxWidth="190" />
<ColumnDefinition Width="700*" MaxWidth="600" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="2.95*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<!--Name block-->
<Label Grid.Row="0" Grid.Column="1" Style="{StaticResource LabelStyles}">Name :</Label>
<TextBox Name="fName" Grid.Row="0" Grid.Column="2" Text="{Binding Path = PatientName}" Style="{StaticResource TextBoxStyle}"/>
<!--Address block-->
<Label Grid.Row="1" Grid.Column="1" Style="{StaticResource LabelStyles}" VerticalAlignment="Top" Margin="0,7,15,0">Address :</Label>
<StackPanel Grid.Row="1" Grid.Column="2" Orientation="Vertical" VerticalAlignment="Center" Margin="0,2">
<DockPanel LastChildFill="True" Margin="0,5">
<Label Style="{StaticResource AddressLabelStyles}" HorizontalAlignment="Right">Number :</Label>
<TextBox Name="Number" Text="{Binding Path = PatientAddress.Number}" Style="{StaticResource TextBoxStyle}"/>
</DockPanel>
<DockPanel LastChildFill="True" Margin="0,5">
<Label Style="{StaticResource AddressLabelStyles}" Margin="12,0">Street :</Label>
<TextBox Name="Street" Text="{Binding Path = PatientAddress.Street}" Style="{StaticResource TextBoxStyle}" Margin="3,0,0,0" />
</DockPanel>
<DockPanel LastChildFill="True" Margin="0,5">
<Label Style="{StaticResource AddressLabelStyles}" Margin="24,0">City :</Label>
<TextBox Name="City" Text="{Binding Path = PatientAddress.City}" Style="{StaticResource TextBoxStyle}" Margin="-9,0,0,0"/>
</DockPanel>
</StackPanel>
<!--Gender block-->
<Label Grid.Row="2" Grid.Column="1" Style="{StaticResource LabelStyles}">Gender :</Label>
<StackPanel Grid.Row="2" Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,6,0,0">
<RadioButton Name="male" Command="{Binding Path=GetPatientGenderCommand}" CommandParameter="{Binding ElementName=male, Path=Content}" Content="Male" FontSize="14" Foreground="Black" Padding="5,-2.5" MinWidth="100"/>
<RadioButton Name="female" Command="{Binding Path=GetPatientGenderCommand}" CommandParameter="{Binding ElementName=female, Path=Content}" Content="Female" FontSize="14" Foreground="Black" Padding="5,-2.5"/>
</StackPanel>
<!--Birthdate block-->
<Label Grid.Row="3" Grid.Column="1" Style="{StaticResource LabelStyles}">Birthdate :</Label>
<DatePicker Name="Date" Grid.Row="3" Grid.Column="2" SelectedDate ="{Binding Path = PatientDateOfBirth}" Style="{StaticResource TextBoxStyle}" MaxHeight="30" Padding="1"/>
<!--Age block-->
<Label Grid.Row="4" Grid.Column="1" Style="{StaticResource LabelStyles}">Age :</Label>
<TextBox Name="Age" Grid.Row="4" Grid.Column="2" Text="{Binding Path = PatientAge}" Style="{StaticResource TextBoxStyle}"/>
<!--Image block-->
<Label Grid.Row="5" Grid.Column="1" Style="{StaticResource LabelStyles}">Image :</Label>
<DockPanel Grid.Row="5" Grid.Column="2" LastChildFill="True" VerticalAlignment="Center" MinHeight="30">
<Button DockPanel.Dock="Left" Command="{Binding Path=GetPatientImageCommand, UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource ButtonStyle}" Content="Browse" Margin="0,0,5,0"/>
<TextBox Name="FileBrowser" DockPanel.Dock="Right" Text="{Binding Path= PatientImageSource}" Style="{StaticResource TextBoxStyle}" HorizontalAlignment="Stretch"/>
</DockPanel>
<!--Image view block-->
<Image Name="ImageViewer" Grid.Row="6" Grid.Column="2" Source ="{Binding Path= PatientImageSource}" HorizontalAlignment="Left" MinWidth="95" MaxWidth="150" MinHeight="95" MaxHeight="150" Margin="0,0,0,10"/>
<!--Department block-->
<Label Grid.Row="7" Grid.Column="1" Style="{StaticResource LabelStyles}">Department :</Label>
<ComboBox Name="Department" Grid.Row="7" Grid.Column="2" ItemsSource="{Binding Department}" SelectedItem="{Binding Path = PatientDepartment}" FontSize="14" Foreground="Black" BorderBrush="LightGray" BorderThickness="1" VerticalAlignment="Center" MinHeight="30"/>
<!--Ward Block-->
<Label Grid.Row="8" Grid.Column="1" Style="{StaticResource LabelStyles}">Ward :</Label>
<ComboBox Name="Ward" Grid.Row="8" Grid.Column="2" ItemsSource="{Binding Ward}" SelectedItem="{Binding Path = PatientWard}" FontSize="14" Foreground="Black" BorderBrush="LightGray" BorderThickness="1" VerticalAlignment="Center" MinHeight="30"/>
<!--Doctor Block-->
<Label Grid.Row="9" Grid.Column="1" Style="{StaticResource LabelStyles}">Doctor In Charge :</Label>
<ComboBox Name="Doctor" Grid.Row="9" Grid.Column="2" ItemsSource="{Binding DocInCharge}" SelectedItem="{Binding Path = PatientDotorcInCharge}" FontSize="14" Foreground="Black" BorderBrush="LightGray" BorderThickness="1" VerticalAlignment="Center" MinHeight="30"/>
</Grid>
<!--Buttons Section-->
<StackPanel Grid.Row="3" Grid.ColumnSpan="3" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="20,10,26,0" >
<Button Command="{Binding Path=PreviewCommand}" Style="{StaticResource ButtonStyle}" Content="Print Preview" Margin="0,0,5,0"/>
<Button Command="{Binding Path=ClearPatientCommand}" Style="{StaticResource ButtonStyle}" Content="Clear"/>
</StackPanel>
</Grid>
</UserControl>
This is my UserControl2 (PrintPreviewControl.xaml)
<UserControl x:Class="PatientRecordMVVM.Views.PrintPreviewControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
FontFamily="{materialDesign:MaterialDesignFont}"
xmlns:local="clr-namespace:PatientRecordMVVM.Views"
mc:Ignorable="d"
d:DesignHeight="850" d:DesignWidth="800" Background="White">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="22*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<!--Main Sub Grid 1-->
<Grid x:Name="MainSubGrid" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2.5*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="2.5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height ="1.5*"/>
<RowDefinition Height ="1.5*"/>
<RowDefinition Height ="6.5*"/>
<RowDefinition Height ="7*"/>
<RowDefinition Height ="6*"/>
</Grid.RowDefinitions>
<Grid Grid.RowSpan="2" Grid.ColumnSpan="3" Background="#58af9d"/>
<!--Patient Id block-->
<StackPanel Grid.ColumnSpan="2" Style="{StaticResource StackpanelStyle}">
<Label FontSize="16" FontWeight="Bold" Foreground="White">
Patient ID :
</Label>
<Label Content="{Binding PatientID}" FontSize="16" Foreground="White" Margin="5,0,0,0"/>
</StackPanel>
<!--Date block-->
<StackPanel Grid.ColumnSpan="3" Style="{StaticResource StackpanelStyle}" HorizontalAlignment="Right">
<Label FontSize="16" FontWeight="Bold" Foreground="White">
Date :
</Label>
<Label Name="date_time" Content="{Binding PatientRegisteredDate}" FontSize="16" Foreground="White" Margin="5,0"/>
</StackPanel>
<!--Title block-->
<TextBlock Grid.Row="1" Grid.ColumnSpan="3" FontSize="20" FontWeight="Bold" Foreground="White" TextDecorations="Underline" HorizontalAlignment="Center" VerticalAlignment="Center">
Patient Registration Information
</TextBlock>
<!--Sub grid 1-->
<Grid Grid.Row="2" Grid.ColumnSpan="3" HorizontalAlignment="Center" VerticalAlignment="Stretch" Margin="25,10,25,20">
<!--User's image View and name-->
<StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
<Ellipse Width="150" Height="150">
<Ellipse.Fill>
<ImageBrush x:Name="ImageViewer2" ImageSource="{Binding PatientImageSource}"/>
</Ellipse.Fill>
</Ellipse>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,10">
<Label Style="{StaticResource LabelStyles}" Margin="0">Patient Name :</Label>
<TextBlock x:Name="ViewName" Text="{Binding PatientName}" Style="{StaticResource TextBlockStyle}"/>
</StackPanel>
</StackPanel>
</Grid>
<!--Sub grid 2-->
<GroupBox Grid.Row="3" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="25,-35,25,0">
<GroupBox.Header>
<TextBlock Style="{StaticResource TextBlockStyleControl}">Patient Personal Information</TextBlock>
</GroupBox.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500*"/>
<ColumnDefinition Width="500*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="5*"/>
<RowDefinition Height="3*" MaxHeight="80"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Vertical" Margin="10,5">
<Label Style="{StaticResource PreviewLabelStyles}" >Address :</Label>
<TextBlock x:Name="ViewANum" Text="{Binding PatientAddress.Number}" Style="{StaticResource TextBlockStyle}"/>
<TextBlock x:Name="ViewAStrt" Text="{Binding PatientAddress.Street}" Style="{StaticResource TextBlockStyle}"/>
<TextBlock x:Name="ViewACity" Text="{Binding PatientAddress.City}" Style="{StaticResource TextBlockStyle}"/>
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="1" Orientation="Vertical" Margin="50,5,10,10">
<Label Style="{StaticResource PreviewLabelStyles}">Gender :</Label>
<TextBlock x:Name="ViewGender" Text="{Binding PatientGender}" Style="{StaticResource TextBlockStyle}"/>
</StackPanel>
<StackPanel Grid.Row="1" Grid.Column="0" Orientation="Vertical" Margin="10,5">
<Label Style="{StaticResource PreviewLabelStyles}">Date of Birth :</Label>
<TextBlock x:Name="ViewDob" Text="{Binding PatientDateOfBirth}" Style="{StaticResource TextBlockStyle}"/>
</StackPanel>
<StackPanel Grid.Row="1" Grid.Column="1" Orientation="Vertical" Margin="50,5,10,5">
<Label Style="{StaticResource PreviewLabelStyles}">Age :</Label>
<TextBlock x:Name="ViewAge" Text="{Binding PatientAge}" Style="{StaticResource TextBlockStyle}"/>
</StackPanel>
</Grid>
</GroupBox>
<!--Sub grid 3-->
<GroupBox Grid.Row="4" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="25,0,25,0">
<GroupBox.Header>
<TextBlock Style="{StaticResource TextBlockStyleControl}">Patient Medical Information</TextBlock>
</GroupBox.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500*"/>
<ColumnDefinition Width="500*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="3*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Vertical" Margin="10,5">
<Label Style="{StaticResource PreviewLabelStyles}">Department :</Label>
<TextBlock x:Name="ViewDepartment" Text="{Binding PatientDepartment}" Style="{StaticResource TextBlockStyle}"/>
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="1" Orientation="Vertical" Margin="50,5,10,0">
<Label Style="{StaticResource PreviewLabelStyles}">Ward :</Label>
<TextBlock x:Name="ViewWard" Text="{Binding PatientWard}" Style="{StaticResource TextBlockStyle}"/>
</StackPanel>
<StackPanel Grid.Row="1" Grid.Column="0" Orientation="Vertical" Margin="10,5,10,10">
<Label Style="{StaticResource PreviewLabelStyles}">Doctor in Charge :</Label>
<TextBlock x:Name="ViewDoc" Text="{Binding PatientDotorcInCharge}" Style="{StaticResource TextBlockStyle}"/>
</StackPanel>
</Grid>
</GroupBox>
</Grid>
<StackPanel Grid.Row="2" Grid.ColumnSpan="3" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="20,10,26,0">
<Button Command="{Binding Path=DefaultPrintCommand}" CommandParameter="{Binding ElementName=MainSubGrid}" Style="{StaticResource ButtonStyle}" Content="Default Print" Margin="0,0,5,0"/>
<Button Command="{Binding Path=ConfigureAndPrintCommand}" CommandParameter="{Binding ElementName=MainSubGrid}" Style="{StaticResource ButtonStyle}" Content="Configure Print"/>
</StackPanel>
</Grid>
</UserControl>
This is the Button Command of the UserControl1 in its ViewModel
#region Handlers : Commands
private void OnPreviewCommandExecute()
{
PatientRecordDetailsModel getPatientDetails = PopulatePatientDetails();
}
I didn't put the whole code inside the ViewModel since it's too long.
PatientRecordDetailsModel is the model object that will be sent to the UserControl2.
Inside the UserControl2 ViewModel constructor it binds the data with the userControl View.
class PrintPreviewViewModel
{
#region Fields
private IWindowService m_windowService;
private PatientRecordDetailsModel patient;
#endregion
#region Constructors
public PrintPreviewViewModel(PatientRecordDetailsModel patient)
{
this.patient = patient;
PatientID = patient.PatientId;
PatientRegisteredDate = patient.PatientRegisteredDate;
PatientName = patient.PatientName;
PatientAddress = patient.PatientAddress;
PatientGender = patient.PatientGender;
PatientDateOfBirth = patient.PatientDateOfBirth.ToShortDateString();
PatientAge = patient.PatientAge;
PatientImageSource = patient.PatientImageSource;
PatientDepartment = patient.PatientDepartment;
PatientWard = patient.PatientWard;
PatientDotorcInCharge = patient.PatientDoctorInCharge;
m_windowService = new WindowService();
}
}
Inside the HomeCareMain.xaml.cs file I defined a method called PrintPreviewButtonClicked() to bind the data to the UserControl2's DataContext and to Visible it.
public partial class HomeCareMain : Window
{
public HomeCareMain()
{
InitializeComponent();
this.DataContext = new HomeCareMainViewModel();
PatientRecordDetailsViewModel patientRecordDetailsViewModel = new PatientRecordDetailsViewModel();
AddPatient.DataContext = patientRecordDetailsViewModel;
AddPatient.Visibility = Visibility.Hidden;
PrintPreview.Visibility = Visibility.Hidden;
}
public void PrintPreviewButtonClicked(PatientRecordDetailsModel patient)
{
PrintPreview.DataContext = new PrintPreviewViewModel(patient);
PrintPreview.Visibility = Visibility.Visible;
}
}
The problem is I want to send the PatientRecordDetailsModel object to the HomeCareMain.xaml.cs without violating MVVM architecture.
Or is there an alternative way of doing this.
I have used separate viewModels for user controls and the main window since they have their own responsibilities to perform.
I really hope you could help me with this.

You should either bind to the same view model from both UserControls, or use an event aggregator or messenger to send an event or a message from one component to another in a loosely coupled way as explained in this blog post.
If you don't use a framework, you'll have to implement the event aggregator yourself.

How to add Lives tiles in Gridview as Data template, as a gridview item

<Models:VariableSizedGridView x:Name="SalesGridview" ItemsSource="{Binding SalesData}" Padding="50,10,0,1000" SelectionChanged="On_selectionChanged" ItemContainerStyle="{StaticResource SalesGridviewitemcustomStyle}" HorizontalAlignment="Left" VerticalAlignment="Top" >
<Models:VariableSizedGridView.ItemTemplate>
<DataTemplate>
<callisto:LiveTile>
<callisto:LiveTile.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.Background>
<SolidColorBrush Color="{Binding Background}"></SolidColorBrush>
</Grid.Background>
<Button Content="" FontFamily="Segoe UI Symbol" x:Name="flyoutcancel" Command="{Binding DeleteCommand}" Style="{StaticResource CustomSettingsButtonStyle}">
<Button.Flyout>
<Flyout x:Name="EditFlyout" Models:FlyoutHelpers.IsOpen="{Binding IsFlyoutOpen, Mode=TwoWay}" Models:FlyoutHelpers.Parent="{Binding ElementName=flyoutcancel}" Placement="Bottom">
<Grid Background="Transparent" VerticalAlignment="Top" HorizontalAlignment="Left" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" ></RowDefinition>
<RowDefinition Height="*" ></RowDefinition>
</Grid.RowDefinitions>
<Button Content="" Grid.Row="0" Foreground="White" Command="{Binding DataContext.CancelCommand, ElementName=SalesGridview}" CommandParameter="{Binding }" Style="{StaticResource CustomCancelPopupButtonStyle}" ></Button>
<StackPanel Width="165" Height="200" Grid.Row="1" Background="#334157">
<Button HorizontalAlignment="Left" Height="Auto" Margin="10,10,0,10" Style="{StaticResource CustomCancelPopupButtonStyle}" >
<Button.Content>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" >
<TextBlock Text="" FontSize="16" VerticalAlignment="Center" Style="{StaticResource SplitViewTextBlockStyle}"></TextBlock>
<TextBlock Text="Widget Settings" Margin="10,3,0,0" FontSize="14" VerticalAlignment="Center" FontFamily="Segeo UI Semibold" Style="{StaticResource SplitViewTextBlockStyle}"></TextBlock>
</StackPanel>
</Button.Content>
</Button>
<Button HorizontalAlignment="Left" Margin="10,0,0,0" Height="Auto" Command="{Binding DataContext.DeleteCommand, ElementName=SalesGridview}" CommandParameter="{Binding Id}" Style="{StaticResource CustomCancelPopupButtonStyle}" >
<Button.Content>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" >
<TextBlock Text="" FontSize="16" VerticalAlignment="Center" Style="{StaticResource SplitViewTextBlockStyle}"></TextBlock>
<TextBlock Text="Remove Widget" Margin="10,3,0,0" FontSize="14" VerticalAlignment="Center" FontFamily="Segeo UI Semibold" Style="{StaticResource SplitViewTextBlockStyle}"></TextBlock>
</StackPanel>
</Button.Content>
</Button>
</StackPanel>
</Grid>
</Flyout>
</Button.Flyout>
</Button>
</Grid>
</DataTemplate>
</callisto:LiveTile.ItemTemplate>
</callisto:LiveTile>
</DataTemplate>
</Models:VariableSizedGridView.ItemTemplate>
<Models:VariableSizedGridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid VerticalAlignment="Center" Orientation="Horizontal"
ItemHeight="90"
ItemWidth="90">
<VariableSizedWrapGrid.ChildrenTransitions>
<TransitionCollection>
<RepositionThemeTransition></RepositionThemeTransition>
<ReorderThemeTransition></ReorderThemeTransition>
</TransitionCollection>
</VariableSizedWrapGrid.ChildrenTransitions>
</VariableSizedWrapGrid>
</ItemsPanelTemplate>
</Models:VariableSizedGridView.ItemsPanel>
</Models:VariableSizedGridView>
am using above code for a variable sized gridview to show the item, in those items, some of items I want to display as live tiles.
How to bind the data for both Gridview and and Callisto Live tiles items.
Thanks in advance.

Add xaml to top of Listbox

I have a listbox which is filled up with items taken from a data contract. I want to add a bit of xaml to the top of the listbox which takes data from another data contract. How do i go about doing this?
<phone:PivotItem>
<ScrollViewer>
<StackPanel>
<ListBox x:Name="StatusCommentsList"
Background="Transparent"
ItemsSource="{Binding StatusComments}"
u:ScrollViewerMonitor.AtEndCommand="{Binding FetchMoreStatusCommentsDataCommand}" VerticalContentAlignment="Top">
<!-- THIS DOESNT WORK-->
<ListBoxItem>
<Grid Height="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="389"/>
</Grid.ColumnDefinitions>
<StackPanel Height="auto" Grid.Column="0" Background="Transparent">
<Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Image Source="{Binding Notification.context.data.created_by.image.thumbnail_link}" Width="62" Height="62"></Image>
</Border>
</StackPanel>
<StackPanel Height="auto" Grid.Column="1" Width="389" MaxWidth="389" Orientation="Vertical" >
<TextBlock TextWrapping="Wrap" Text="{Binding Notification.context.data.created_by.name}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
<TextBlock TextWrapping="Wrap" Text="{Binding Notification.context.data.created_on}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
<TextBlock TextWrapping="Wrap" Text="{Binding Notification.context.data.rich_value}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
</StackPanel>
</Grid>
</ListBoxItem>
<!-- /THIS DOESNT WORK -->
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel VerticalAlignment="Top" Margin="5,0,0,0">
<Button Style="{StaticResource JamesTransparentButton}" Padding="-5,0,-5,-5" Margin="-7,-12,-7,-7" Height="auto" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" UseLayoutRounding="True" FontSize="0.01">
<Grid Height="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="389"/>
</Grid.ColumnDefinitions>
<StackPanel Height="auto" Grid.Column="0" Background="Transparent">
<Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Image Source="{Binding created_by.image.thumbnail_link}" Width="62" Height="62"></Image>
</Border>
</StackPanel>
<StackPanel Height="auto" Grid.Column="1" Width="389" MaxWidth="389" Orientation="Vertical" >
<TextBlock Text="{Binding created_by.name}" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" />
<TextBlock Text="{Binding created_on}" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" />
<TextBlock TextWrapping="Wrap" Text="{Binding value}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
</StackPanel>
</Grid>
</Button>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
</phone:PivotItem>
I tried just adding a new item to the listbox but the data contract would mean i have to instantiate all the sub levels of objects and it would suckkk as they are different domains.
Keep in mind that i want the entire screen to scroll in union... so that it looks like one big long list, regardless of the first being like a default value.

Put the first item outside the ListBox and disable ScrollViewer for the ListBox so the whole thing will scroll together. Here's an example where the item is a simple TextBlock. You can change it to suit your requirement.
<ScrollViewer>
<StackPanel Orientation="Vertical">
<TextBlock Text="Item 1"/>
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding item}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>

List scroller not working properly wp8

listbox scroller not working properly when i try to scroller Down .This is my code and i am open this page on popup . How to solve this prob . Please Help .thankyou ....................................................................................................................................................................................
<phone:PhoneApplicationPage
x:Class="PdfReader.Views.BookMark"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True" >
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent" Height="auto">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<!--<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>-->
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0">
<StackPanel Background="#6c4a7d" Width="auto" Margin="0,248,0,95">
<StackPanel Orientation="Horizontal">
<Button x:Name="btnCancel" Content="Cancel" Click="btnCancel_Click"/>
<TextBlock Text="BookmarkList" VerticalAlignment="Center" Margin="100 0 0 0"></TextBlock>
<Button Margin="70,0,0,0" Background="Transparent" HorizontalAlignment="Left" BorderBrush="Transparent" Width="80" Height="70" Name="DeleteAll" Click="DeleteAll_Click" Canvas.ZIndex="10" >
<StackPanel Width="68" Height="60" Margin="0,-5,-40,-14" UseLayoutRounding="False" RenderTransformOrigin="0.45,0.5" >
<StackPanel.Projection>
<PlaneProjection RotationX="24" RotationY="9"/>
</StackPanel.Projection>
<StackPanel.RenderTransform>
<CompositeTransform TranslateX="-1" TranslateY="-12"/>
</StackPanel.RenderTransform>
<TextBlock Visibility="Collapsed" Text="{Binding Bookname}"></TextBlock>
<TextBlock Visibility="Collapsed" Text="{Binding Pageno}"></TextBlock>
<Image Source="/Assets/delete_bookmark.png" Width="74" Height="65"
HorizontalAlignment="Center" VerticalAlignment="Center" Margin="8,-4,11,570" Canvas.ZIndex="62" RenderTransformOrigin="0.55,0.5">
<Image.Projection>
<PlaneProjection CenterOfRotationX="0.1" LocalOffsetX="-1"/>
</Image.Projection>
<Image.RenderTransform>
<CompositeTransform TranslateX="1" ScaleX="0.95"/>
</Image.RenderTransform>
</Image>
</StackPanel>
</Button>
<!--<Button x:Name="btnOK" Content="OK"/>-->
</StackPanel>
<ListBox Name="Bookmark_List" SelectionChanged="Bookmark_List_SelectionChanged" >
<ListBox.ItemTemplate >
<DataTemplate>
<Grid Margin="10 10 10 10">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Bookname}" Foreground="White" VerticalAlignment="Center"></TextBlock>
<TextBlock Text="{Binding Pageno}" FontSize="29" VerticalAlignment="Center" Margin="30 0 0 0" Foreground="White"></TextBlock>
<!--<Button Margin="5 0 0 0" Background="Transparent" HorizontalAlignment="Right" BorderBrush="Transparent" Width="80" Height="70" Name="DeleteBookmark" Click="DeleteBookmark_Click" >
<StackPanel>
<TextBlock Visibility="Collapsed" Text="{Binding Bookname}"></TextBlock>
<TextBlock Visibility="Collapsed" Text="{Binding Pageno}"></TextBlock>
<Image Source="/Assets/delete_bookmark.png" Width="62" Height="100"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
</Button>-->
<Button Margin="5 0 0 0" Background="Transparent" HorizontalAlignment="Right" BorderBrush="Transparent" Width="80" Height="70" Click="DeleteBookmark_Click" Name="DeleteBookmark" >
<StackPanel >
<TextBlock Visibility="Collapsed" Text="{Binding Bookname}"></TextBlock>
<TextBlock Visibility="Collapsed" Text="{Binding Pageno}"></TextBlock>
<Image Source="/Assets/delete_book.png" Width="45" Height="30"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
</Button>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
</Grid>
</phone:PhoneApplicationPage>

Please apply a height to listbox and set ScrollViewer.VerticalScrollBarVisibility
<ListBox Name="Bookmark_List" Height="450" ScrollViewer.VerticalScrollBarVisibility="Visible" SelectionChanged="Bookmark_List_SelectionChanged" >

re size screen area when keyboard is open WP8

I am making an application in which I want to resize screen area when keyboard is open. Just like in this calendar application of windows phone.
After opening keyboard look screen should resize and also I should be able to scroll till the end of the page without closing keyboard:
In my application i am not able to do these things. In my page last elements of the page stays behind keyboard if i want to access that elements of the page i have to close keyboard but in calendar application of Nokia does great job by re sizing the page somehow so i can access whole part of page even though keyboard is open.
Can somebody help me out in this problem?
Here is code for my page
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Style="{StaticResource HeaderStackPanelStyle}">
<TextBlock TextAlignment="Center" Style="{StaticResource PhoneTextBlockHeaderStyle}" Text="Add Claim Item" />
</StackPanel>
<ScrollViewer Name="MainPageScroller" Grid.Row="1">
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Margin="12,0,12,12">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Name="MainContentPenal" Grid.Row="0">
<StackPanel >
<TextBlock TextAlignment="Left" Text="Category" Style="{StaticResource PhoneTextFirstItemStyle}" >
</TextBlock>
<ToolKit:ListPicker x:Name="CategoryListPicker"
ItemsSource="{Binding Categories}" SelectedItem="{Binding SelectedCategory, Mode=TwoWay}" SelectedIndex="{Binding Categories,Converter={StaticResource DefaultSetter}}"
ExpansionMode="FullScreenOnly" SelectionMode="Single" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" SelectionChanged="CategorySelection" ItemTemplate="{StaticResource CategoryTamplate}" FullModeItemTemplate="{ StaticResource CategoryTamplate}" >
</ToolKit:ListPicker>
</StackPanel >
<StackPanel Visibility="{Binding SelectedCategory, Converter={StaticResource TravelMileageHelper}, ConverterParameter=amount}" >
<TextBlock TextAlignment="Left" Text="Amount" Style="{StaticResource PhoneTextFirstItemStyle}" />
<TextBox x:Name="AmountTextBox" Style="{StaticResource WebExpensesTextBoxStyle}" Text="{Binding Amount, Mode=TwoWay}" KeyUp="numericTextBox_keyUp" KeyDown="numericTextBox_keyDown" InputScope="Number" TextChanged="TextChange_Event" />
</StackPanel>
<StackPanel Visibility="{Binding SelectedCategory, Converter={StaticResource TravelMileageHelper},ConverterParameter=mileage}" >
<TextBlock TextAlignment="Left" Text="Mileage units" Style="{StaticResource PhoneTextFirstItemStyle}" />
<TextBox x:Name="mileageTextBox" Text="{Binding MileageUnit, Mode=TwoWay}" Style="{StaticResource WebExpensesTextBoxStyle}" KeyUp="numericTextBox_keyUp" KeyDown="numericTextBox_keyDown" TextWrapping="Wrap" InputScope="Number" TextChanged="TextChange_Event"/>
</StackPanel>
<StackPanel Visibility="{Binding SelectedCategory, Converter={StaticResource TravelMileageHelper}, ConverterParameter=trip}" >
<TextBlock TextAlignment="Left" Text="Mileage" Style="{StaticResource PhoneTextFirstItemStyle}" />
<Button Content="Add mileage" Click="AddMileage"/>
</StackPanel>
<StackPanel Visibility="{Binding SelectedCategory,Converter={StaticResource TravelMileageHelper}, ConverterParameter=trip}" >
<StackPanel Visibility="{Binding TripMasterModel, Mode=TwoWay, Converter={StaticResource VisibiltyHelper}}">
<Grid DataContext="{Binding TripMasterModel}">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0">
<TextBlock TextWrapping="Wrap" HorizontalAlignment="Left" Margin="5 0 0 0" VerticalAlignment="Center" Text="{Binding Start}"></TextBlock>
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="1">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="" FontFamily="Segoe UI Symbol" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="2">
<TextBlock TextWrapping="Wrap" VerticalAlignment="Center" Text="{Binding End}"></TextBlock>
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="3">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Distance}"/>
</StackPanel>
<StackPanel Visibility="{Binding subTrips,Converter={StaticResource VisibiltyHelper}}" Grid.Row="1" Orientation="Horizontal" Grid.ColumnSpan="4" >
<TextBlock HorizontalAlignment="Left" Text="via"/>
<ItemsControl ItemsSource="{Binding subTrips}" ItemTemplate="{StaticResource SubTripTemplate}" HorizontalAlignment="Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</StackPanel>
</Grid>
</StackPanel>
</StackPanel>
<StackPanel >
<TextBlock TextAlignment="Left" Text="Description" Style="{StaticResource PhoneTextFirstItemStyle}" />
<TextBox x:Name="DescriptionTextBox" Style="{StaticResource WebExpensesTextBoxStyle}" Text="{Binding Description, Mode=TwoWay}" Height="120" TextWrapping="Wrap" TextChanged="TextChange_Event" KeyDown="DescriptionTextBox_KeyDown"/>
</StackPanel>
<StackPanel >
<ToolKit:DatePicker HeaderTemplate="{StaticResource DatePickerHeader}" Value="{Binding SelectedDate,Mode=TwoWay}" ValueStringFormat="{Binding DateFormat}" HorizontalAlignment="Left" x:Name="DatePicker" VerticalAlignment="Top" Width="200" />
</StackPanel>
<StackPanel Visibility="{Binding Currencies, Converter={StaticResource VisibiltyHelper}}" >
<TextBlock TextAlignment="Left" Text="Currency" Style="{StaticResource PhoneTextFirstItemStyle}" />
<ToolKit:ListPicker x:Name="CurrencyListPicker"
ItemsSource="{Binding Currencies}" SelectedItem="{Binding SelectedCurrency, Mode=TwoWay}"
DisplayMemberPath="Name" SelectedIndex="{Binding Currencies,Converter={StaticResource DefaultSetter}}" FullModeItemTemplate="{ StaticResource CurrencyTamplate}" >
</ToolKit:ListPicker>
</StackPanel>
<StackPanel Visibility="{Binding Clients, Converter={StaticResource VisibiltyHelper}}" >
<TextBlock TextAlignment="Left" Text="Client" Style="{StaticResource PhoneTextFirstItemStyle}"/>
<ToolKit:ListPicker x:Name="ClientListPicker"
ItemsSource="{Binding Clients}" SelectedItem="{Binding SelectedClient, Mode=TwoWay}"
ItemTemplate="{StaticResource ShowMember}" SelectedIndex="{Binding Clients,Converter={StaticResource DefaultSetter}}" FullModeItemTemplate="{ StaticResource ClientTemplate}" >
</ToolKit:ListPicker>
</StackPanel>
<StackPanel Visibility="{Binding SubClients, Converter={StaticResource VisibiltyHelper}}" >
<TextBlock TextAlignment="Left" Text="Subclient" Style="{StaticResource PhoneTextFirstItemStyle}"/>
<ToolKit:ListPicker x:Name="SubClientListPicker"
ItemsSource="{Binding SubClients,Mode=TwoWay}"
DisplayMemberPath="Name" SelectedItem="{Binding SelectedSubclient, Mode=TwoWay}" SelectedIndex="{Binding SubClients,Converter={StaticResource DefaultSetter},Mode=TwoWay}" FullModeItemTemplate="{ StaticResource ClientTemplate}" >
</ToolKit:ListPicker>
</StackPanel>
<StackPanel Visibility="{Binding Vendors, Converter={StaticResource VisibiltyHelper}}" >
<TextBlock TextAlignment="Left" Text="Vendor" Style="{StaticResource PhoneTextFirstItemStyle}"/>
<ToolKit:ListPicker x:Name="VendorListPicker"
ItemsSource="{Binding Vendors}" SelectedItem="{Binding SelectedVendor, Mode=TwoWay}"
DisplayMemberPath="Name" SelectedIndex="{Binding Vendors,Converter={StaticResource DefaultSetter}}" SelectionChanged="vendorSelection" FullModeItemTemplate="{ StaticResource ClientTemplate}" >
</ToolKit:ListPicker>
</StackPanel>
<StackPanel >
<TextBlock TextAlignment="Left" Text="Receipt" Style="{StaticResource PhoneTextFirstItemStyle}"/>
<Button Click="AddReceipt_Btn_Click" Content="Add receipt"/>
</StackPanel>
<StackPanel x:Name="ImagePenal">
<ItemsControl Width="Auto" HorizontalAlignment="Stretch" ItemsSource="{Binding ReceiptList}" ItemTemplate="{StaticResource ImageListTemplate}" >
</ItemsControl>
</StackPanel>
</StackPanel>
</Grid>
</ScrollViewer>

Give your content in between ListBox or ScrollViewer.
<ListBox>
//your textbox and everything
</ListBox>
or
<ScrollViewer>
//your textbox and everything
</ScrollViewer>