Develop Reference

How to have the scrollview affect the inner frame only, not whole app

In writing a XAML/UWP/C# app I have the MainPage.xaml, which contains a header menu (home|back|forward navigation and user display buttons), and page navigation menu (left side) split panel, other side of the split is a frame for displaying the pages.
Following is a simplified version of the code (Note that nowhere in this code is a ScrollView):
<Page
x:Class="PowderTracks.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PowderTracks"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Width="1200"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<GridView Height="Auto">
<StackPanel
Width="Auto">
<StackPanel x:Name="headerMenu"
Orientation="Horizontal"
Background="#FF016B3B"
Width="Auto"
Padding="0,0,0,0" >
<Button x:Name ="HomeButton"
Foreground="#FFC0FFC0"
Margin="10,0,0,0"
Background="#33016B3B">
<Image Source="Assets\Home.png" Width="64" />
</Button>
<Button x:Name ="BackButton"
Foreground="#FFC0FFC0"
Padding="0,0,0,0"
Background="#33016B3B">
<Image Source="Assets\Back.png" Width="64" />
</Button>
<Button x:Name ="ForwardButton"
Foreground="#FFC0FFC0"
Padding="0,0,0,0"
Background="#33016B3B">
<Image Source="Assets\Forward.png" Width="64" />
</Button>
<Button x:Name="btnFace" Background="#33016B3B">
<Image x:Name="userPic" Width="32" Height="32"/>
<Button.Flyout>
<Flyout>
<StackPanel>
<Image x:Name="foPic" Width="96" Height="96"/>
<TextBlock Name="foDisplayName" />
<TextBlock Name="foEmail" />
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
<TextBlock Name="lblUsername"
x:FieldModifier="public"
Text=""
Margin="10,0,0,0"
Height="25"
FontSize="18"
VerticalAlignment="Center"
Foreground="#FFC0FFC0"
/>
<ToggleSwitch x:Name="btnDatabase"
Margin="50,0,0,0"
OffContent="TestDB"
OnContent="LiveDB"
HorizontalAlignment="Right"
Visibility="Visible"
/>
</StackPanel>
<SplitView x:Name="svFrame"
IsPaneOpen="True"
DisplayMode="Inline"
OpenPaneLength="80" Height="Auto" Width="1024">
<UIElement.RenderTransform>
<MatrixTransform/>
</UIElement.RenderTransform>
<SplitView.Pane>
<StackPanel>
<Button Name="btnTracker"
Width="80"
Height="65"
Padding="0,0,0,0">
<Image Source="Assets\trackers.png"
Width="64"/>
</Button>
<Button Name="btnTasks"
Width="80">
<Image Source="Assets\tasksIcon.png"
Width="64"/>
</Button>
<Button Name="btnRFP"
Width="80">
<Image Source="Assets\proposals.png"
Width="64"/>
</Button>
<Button Name="btnFM"
Width="80">
<Image Source="Assets\folderMachine.png" Width="64"/>
</Button>
<Button Name="btnClients"
Width="80" >
<Image Source="Assets\clients.png"
Width="64"/>
</Button>
<Button Name="btnMaint"
Width="80"
Padding="0,0,0,0">
<Image Source="Assets\maintenance.png"
Width="64"
Margin="0,0,0,0"/>
</Button>
</StackPanel>
</SplitView.Pane>
<Frame x:Name="content"
Padding="10,10,10,15"
HorizontalAlignment="Left"
Width="Auto"
Height="Auto"
VerticalAlignment="Top"/>
</SplitView>
</StackPanel>
</GridView>
</Page>
(Click events were removed to make it just copy/paste.)
Anyway, the first opening page is the Proposals page (because this is the one I've been working on), and it is a long page with many controls. I want the scroll view to move the Proposals (or whatever pages come after) page without moving the header menu or the left-side navigation menu. Right now if I scroll the entire app scrolls, so the header and navigation menus scroll up as the page scrolls.
What I have tried:
Placing the ScrollView on the <Frame x:Name...> panel - does not work.
Placing the ScrollView on the Proposals Page in the top level StackPanel
<StackPanel Margin="0,0,10,27"
VerticalAlignment="Top"
ScrollViewer.VerticalScrollBarVisibility="Visible">
Doesn't work.
I've tried to follow the example on these sites:
https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.scrollviewer?view=winrt-18362
https://learn.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/scroll-controls
Thank you in advance.

GridView is usually used together with ItemTemplate and ItemsSource. This control is to quickly generate a batch of items with the same layout (such as the Windows Settings home page) based on the data set, rather than being used as a layout container. Here is the related document
GridView is a combination of multiple controls. The reason why your application scrolls is because the GridView contains a ScrollViewer.
Based on the code you provided, you can try this layout:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<StackPanel>
<!-- Header Buttons -->
</StackPanel>
<SplitView Grid.Row="1">
<SplitView.Pane>
<!-- Pane List -->
</SplitView.Pane>
<SplitView.Content>
<ScrollViewer>
<Frame x:Name="content"/>
</ScrollViewer>
</SplitView.Content>
</SplitView>
</Grid>
This ensures that only the content inside the Frame will scroll.
Thanks.

My guess would be to do this:
<ScrollViewer Padding="10,10,10,15"
HorizontalAlignment="Stretch"
Width="Auto"
Height="Auto"
VerticalAlignment="Stretch">
<Frame x:Name="content" />
</ScrollViewer>
Important thing to remember is that ScrollViewer size needs to constrained - ScrollViewer itself cannot grow when content grows, because then it will not be able to properly generate the scroll bars

Changing the ContentControl.Content stacks the content on top of each other

I have a MainWindow with a couple of radio buttons, a ContentControl and a button to change the content of ContentControl.
I also have a UserControl1 with a label on it. When I click the button on MainWindow to change the ContentControl.Content to UserControl1, it shows the label on top of the radio buttons I have from MainWindow. How can I change this so it acts like a page and does not stack each control on top of each other?
MainWindow.xaml:
<Window x:Class="Test.MainWindow"
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:local="clr-namespace:Test"
mc:Ignorable="d"
Title="Test" WindowStartupLocation="CenterScreen" Width="968" Height="560" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="540" Margin="0,10,-6,-19" Width="968">
<StackPanel Height="74" Margin="731,446,0,0" VerticalAlignment="Top" Width="229" Orientation="Horizontal" HorizontalAlignment="Left">
<Button Content="Back" MinWidth="100" Margin="10,20,0,0"/>
<Button Content="Next" MinWidth="100" Margin="10,20,0,0" Click="NextBtnClick"/>
</StackPanel>
<RadioButton x:Name="RadioBtn1" Content="Radio1" HorizontalAlignment="Center" Margin="312,130,95,0" VerticalAlignment="Top" Height="76" Width="561" FontSize="48" FontWeight="Bold" GroupName="1"/>
<RadioButton x:Name="RadioBtn2" Content="Radio2" HorizontalAlignment="Center" Margin="312,232,95,0" VerticalAlignment="Top" Height="76" Width="561" FontSize="48" FontWeight="Bold" GroupName="1"/>
<ContentControl x:Name="contentControl" Grid.Row="1"/>
</Grid>
</Window>
MainWindow.xaml.cs:
private void NextBtnClick(object sender, RoutedEventArgs e)
{
if (RadioBtn2.IsChecked == true)
{
this.contentControl.Content = new UserControl1();
}
}
After clicking the next button, I get the controls from UserControl1 stacked on top of the radio buttons.
I'm quite new to WPF so any help would be greatly appreciated. Navigating through the docs is a nightmare because I'm not sure how to tackle this problem.

You can trying to use Grid panel without defining rows and column definitions. As per your code, you are trying define the panel layout by hardcoded Margin, Width and Height. That's why contorls are rendered on top of each other.
I've changed the Grid code to define the Row Definitions so that controls are stacked on row basis. So when you click on Button the ContentContrl is loaded to last Row so (which is defined as Height="*" via RowDefinition to take the remaining space)
You can read about WPF Panels and Grid layout at internet. This can be a good start.
<Window x:Class="Test.MainWindow"
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:local="clr-namespace:Test"
mc:Ignorable="d"
Title="Test" WindowStartupLocation="CenterScreen" Width="968" Height="560" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10 10 10 10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions?
<StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Left">
<Button Content="Back" MinWidth="100" />
<Button Content="Next" MinWidth="100" Click="NextBtnClick"/>
</StackPanel>
<RadioButton Grid.Row="1" x:Name="RadioBtn1" Content="Radio1" HorizontalAlignment="Center" VerticalAlignment="Top" FontWeight="Bold" GroupName="1"/>
<RadioButton Grid.Row="2" x:Name="RadioBtn2" Content="Radio2" HorizontalAlignment="Center" FontSize="48" FontWeight="Bold" GroupName="1"/>
<ContentControl x:Name="contentControl" Grid.Row="3"/>
</Grid>
</Window>

ScrollBar in WPF not displaying properly and getting over tabcontrol

So, when I create a new scrollbar the tab gets it. But when I scroll, it gets over the application menu too. I can't seem to find the solution and I tried everything.
My guess is that it's inside the dockpanel as well, but I don't know how to set it since if I added a new dockpanel it will say that "The property Content is set more than once."
Below you can see the code:
<Window
xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
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:local="clr-namespace:ContabilitateMainWPF.Forms.Main"
xmlns:WPF="clr-namespace:ContabilitateMain.Controls.WPF" x:Class="ContabilitateMainWPF.Forms.Main.FrmMainRibbon"
mc:Ignorable="d"
Title="Main" Closing="Window_Closing" Loaded="Window_Loaded" WindowState="Maximized" Icon="/ContabilitateMain;component/Imagini/new_window-512.png" WindowStyle="ToolWindow">
<DockPanel LastChildFill="True">
<ribbon:Ribbon DockPanel.Dock="Top " Margin="0,-22,0,0">
<ribbon:Ribbon.ApplicationMenu>
<ribbon:RibbonApplicationMenu SmallImageSource="D:\PlasticWork\ContabilitateNou\ContabilitateMainWPF\Imagini\menu.png">
<ribbon:RibbonApplicationMenu.AuxiliaryPaneContent >
<StackPanel Orientation="Vertical" >
<GroupBox>
<Label Content="Ceva in group box" />
</GroupBox>
<StackPanel Orientation="Horizontal"/>
</StackPanel>
</ribbon:RibbonApplicationMenu.AuxiliaryPaneContent>
<ribbon:RibbonApplicationMenuItem x:Name="Salveaza" Header="Salveaza" />
</ribbon:RibbonApplicationMenu>
</ribbon:Ribbon.ApplicationMenu>
<ribbon:RibbonTab x:Name="OptiuneaA" Header="Coloana A" MouseUp="OptiuneaA_MouseUp">
<ribbon:RibbonGroup x:Name="T1" Header="Optiunea 1">
<ribbon:RibbonButton x:Name="NouTab" Label="Tab PNG" LargeImageSource="D:\PlasticWork\ContabilitateNou\ContabilitateMainWPF\Imagini\new_window-512.png" Click="NouTab_Click"/>
<ribbon:RibbonButton x:Name="AltNouTab" Label="Tab JPG" LargeImageSource="D:\PlasticWork\ContabilitateNou\ContabilitateMainWPF\Imagini\new.jpg" Click="AltNouTab_Click"/>
</ribbon:RibbonGroup>
<ribbon:RibbonGroup x:Name="T2" Header="Optiunea 2">
<ribbon:RibbonButton x:Name="NouTab2" Label="Tab Nou" LargeImageSource="D:\PlasticWork\ContabilitateNou\ContabilitateMainWPF\Imagini\new_window-512.png"/>
<ribbon:RibbonButton x:Name="AltNouTab2" Label="Tab Secund" LargeImageSource="D:\PlasticWork\ContabilitateNou\ContabilitateMainWPF\Imagini\new.jpg"/>
</ribbon:RibbonGroup>
</ribbon:RibbonTab>
<ribbon:RibbonTab x:Name="NouTab1" Header="Coloana B">
<ribbon:RibbonGroup x:Name="T3" Header="Optiunea 1">
<ribbon:RibbonButton x:Name="NouTab3" Label="Tab Nou" LargeImageSource="D:\PlasticWork\ContabilitateNou\ContabilitateMainWPF\Imagini\new_window-512.png"/>
<ribbon:RibbonButton x:Name="AltNouTab3" Label="Tab Secund" LargeImageSource="D:\PlasticWork\ContabilitateNou\ContabilitateMainWPF\Imagini\new.jpg"/>
</ribbon:RibbonGroup>
</ribbon:RibbonTab>
</ribbon:Ribbon>
<TabControl x:Name="actionTabs" DockPanel.Dock="Right" Background="White" SelectionChanged="actionTabs_SelectionChanged" >
<TabControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="15" Width="100">
<TextBlock Width="80" Text="{Binding Header}"/>
<Image Source="D:\PlasticWork\ContabilitateNou\ContabilitateMainWPF\Imagini\close.png" Width="20" Height="20" MouseUp="Image_MouseUp"/>
</StackPanel>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate x:Name="TabItem1">
<ScrollViewer>
<UserControl Content="{Binding Content}" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</ScrollViewer>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</DockPanel>
I expected to show to scroll only the tab, but it scrolls all the screen.

So apparently, the bug was because I tried to add a scrollbar to a window form, which was called from <UserControl Content="{Binding Content}" which was inside the tabcontrol. For some reason they connected eachother. I fixed it by adding the Scrollviewer to the UserControl, which looked something like this:
`<UserControl x:Class="ContabilitateMainWPF.Controls.TestUserControl"
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:local="clr-namespace:ContabilitateMainWPF.Controls"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300" SizeChanged="UserControl_SizeChanged">
<ScrollViewer>
<Grid x:Name="Grid">
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="199,0,0,0"/>
<Button x:Name="button_Copy" Content="Button" HorizontalAlignment="Left" Margin="141,91,0,0" VerticalAlignment="Top" Width="75"/>
<Button x:Name="button_Copy1" Content="Button" HorizontalAlignment="Left" Margin="30,195,0,0" VerticalAlignment="Top" Width="75"/>
<Button x:Name="button_Copy2" Content="Button" HorizontalAlignment="Left" Margin="199,261,0,0" VerticalAlignment="Top" Width="75"/>
<Label x:Name="label1" Content="LabelTest" HorizontalAlignment="Left" Margin="62,127,0,0" VerticalAlignment="Top"/>
</Grid>
</ScrollViewer>
</UserControl>`
Hope this helps someone one day.

XAML window shows image blurred

I'm new in WPF and I'm trying to show an image in a WPF windows, and then show a button, and two links in a absulute coordinate. I have two problems:
The floating controls are moved from one computer to other
The image is blurred. I think that is being resized.
The form must be a fixed dialog, and the image size is 800x560.
Here is my code:
<Window
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" mc:Ignorable="d" x:Class="A.B.C.IntroGuideWindow"
Title="Intro guide" Icon="../Resources/app_icon.ico"
Background="{DynamicResource DialogBackgroundBrush}" ResizeMode="NoResize" WindowStartupLocation="CenterScreen"
WindowStyle="None"
Style="{DynamicResource WindowStyle}" SnapsToDevicePixels="True" TextOptions.TextFormattingMode="Display" Width="830" Height="660">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../ResourceDictionaries/Colors.xaml"/>
<ResourceDictionary Source="../ResourceDictionaries/BasicStyles/StandardWindowStyle.xaml"/>
<ResourceDictionary Source="../ResourceDictionaries/ButtonStyles/ActionFlatButtonStyle.xaml"/>
<ResourceDictionary Source="../ResourceDictionaries/ButtonStyles/CancelButtonStyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="22"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Margin="10,10,10,10" FontFamily="Segoe UI" FontSize="21"
FontWeight="SemiBold" Foreground="{DynamicResource FontBrush}" Grid.Row="0">
<Run Text="Intro guide" />
</TextBlock>
<Button x:Name="closeButton" Style="{DynamicResource CloseChromeButtonStyle}"
Click="CancelButton_Click" Grid.Row="0"
Content="r" HorizontalAlignment="Right" Margin="0,6,6,0" FontFamily="Webdings" IsTabStop="False" />
<Image x:Name="CurrentImage" Grid.Row="1" Width="800" Height="560" Stretch="None" Source="Images/sm-eval-guide-09.png" SnapsToDevicePixels="True"/>
<Button x:Name="OpenSamplesButton" Content="Click here to open the samples directory" IsDefault="False"
Style="{DynamicResource ActionFlatButtonStyle}"
Margin="256,115,265,434" Width="301" Height="23" Click="OpenSamplesButton_Click" Grid.Row="1"/>
<TextBlock x:Name="DocumentationLink" Margin="2,221,-2,333" Grid.Row="1" TextAlignment="Center" VerticalAlignment="Center" FontFamily="Arial" FontSize="14" FontWeight="Bold">
<Hyperlink Foreground="#00A586" NavigateUri="http://www.example.com/#documentation">http://www.example.com/#documentation</Hyperlink>
</TextBlock>
<TextBlock x:Name="TwitterLink" Margin="590,415,84,137" Grid.Row="1" VerticalAlignment="Center" FontFamily="Arial" FontSize="16" FontWeight="Bold">
<Hyperlink Foreground="#00A586" NavigateUri="https://twitter.com/xxx">#xxx</Hyperlink>
</TextBlock>
<Grid VerticalAlignment="Top" Grid.Row="2">
<Button x:Name="PreviousButton" Content="Previous" IsDefault="False"
Style="{DynamicResource ActionFlatButtonStyle}"
Margin="0,0,200,10" Width="90" HorizontalAlignment="Right" Click="PreviousButton_Click"/>
<Button x:Name="NextButton" Content="Next" IsDefault="True"
Style="{DynamicResource ActionFlatButtonStyle}"
Margin="0,0,105,10" Width="90" HorizontalAlignment="Right" Click="NextButton_Click"/>
<Button x:Name="CloseButton" Content="Close" IsDefault="False"
Style="{DynamicResource ActionFlatButtonStyle}"
Margin="0,0,10,10" Width="90"
VerticalAlignment="Bottom" HorizontalAlignment="Right" Click="CloseButton_Click"/>
<CheckBox x:Name="DontShowAgainCheckbox" Content="Don't show this window again." HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Checked="DontShowAgainCheckbox_Checked"/>
</Grid>
</Grid>
</Window>

WPF adjusts for pixel density of the monitor it is running on. Consider using Grid Columns or other layout controls such as StackPanel instead of Margin offsets. For example, your buttons could use the following layout:
<StackPanel Orientation="Horizontal" Margin="10,0" HorizontalAlignment="Right">
<Button x:Name="PreviousButton" Content="Previous" IsDefault="False"
Style="{DynamicResource ActionFlatButtonStyle}" Margin="4,0"
Width="90" Click="PreviousButton_Click"/>
<Button x:Name="NextButton" Content="Next" IsDefault="True"
Style="{DynamicResource ActionFlatButtonStyle}" Margin="4,0"
Width="90" Click="NextButton_Click"/>
<Button x:Name="CloseButton" Content="Close" IsDefault="False"
Style="{DynamicResource ActionFlatButtonStyle}" Margin="4,0"
Width="90" Click="CloseButton_Click"/>
</StackPanel>
For the blurred image, try using UseLayoutRounding="False" in your Image definition.

overflowing textblock in windows phone

I have the following XAML code for a stackpanel, which places an image to the left and a textblock in the right
<StackPanel Height="Auto" HorizontalAlignment="Stretch" Margin="12,0" Name="stackPanel1" VerticalAlignment="Top" Width="Auto" Grid.Row="1" Orientation="Horizontal" Background="White">
<Image Height="240" Name="image1" Stretch="Fill" Width="240" HorizontalAlignment="Left" />
<Grid Height="Auto" Name="grid1" Width="Auto">
<TextBlock Height="Auto" HorizontalAlignment="Left" Margin="6,6,0,0" Name="textBlock1" Text="CVC for strict action on tax evasions, black money" VerticalAlignment="Top" Width="Auto" Foreground="Black" FontSize="24" TextWrapping="Wrap" />
</Grid>
</StackPanel>
This produces an overflowing text in the textblock, that goes outside the boundaries. I want a stackpanel such that on changing the image size, the textblock resizes accordingly and the total stackpanel always remains stretched out.
EDITS:
The whole code of the entire xaml is:
<phone:PhoneApplicationPage
x:Class="PanelFullStretch30_9_19_02.MainPage"
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:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Pivot Control-->
<controls:Pivot Title="MY APPLICATION" Background="Gainsboro" Foreground="Black">
<!--Pivot item one-->
<controls:PivotItem Header="first">
<ListBox x:Name="ExampleBox">
</ListBox>
</controls:PivotItem>
<!--Pivot item two-->
<controls:PivotItem Header="second">
<!--Triple line list no text wrapping-->
<ListBox x:Name="SecondListBox">
<!-- Pic on left stackpanel design-->
<StackPanel Height="Auto" HorizontalAlignment="Stretch" Margin="12,0" Name="stackPanel1" VerticalAlignment="Top" Width="Auto" Grid.Row="1" Orientation="Horizontal" Background="White">
<Image Height="240" Name="image1" Stretch="Fill" Width="240" HorizontalAlignment="Left" />
<Grid Height="Auto" Name="grid1" Width="Auto">
<TextBlock Height="Auto" HorizontalAlignment="Left" Margin="6,6,0,0" Name="textBlock1" Text="CVC for strict action on tax evasions, black money" VerticalAlignment="Top" Width="Auto" Foreground="Black" FontSize="24" TextWrapping="Wrap" />
</Grid>
</StackPanel>
</ListBox>
</controls:PivotItem>
</controls:Pivot>
</Grid>
<!--Sample code showing usage of ApplicationBar-->
<!--<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1"/>
<shell:ApplicationBarMenuItem Text="MenuItem 2"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>-->
</phone:PhoneApplicationPage>

Whenever you want an adaptive layout, use Grid. For example, the following XAML will generate a Grid with two columns: the left is being automatically resized while the second one fills the remaining space:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
Put your image in the first column and the text in the second column. This will ensure your desired layout.