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.
Related
I am trying to create an Application Bar for my Windows Phone Silverlight app. I've checked this code several times. I see no error. Even I checked on MSDN's website. But when I'm running this on Emulator, the Application Bar is not showing.
What's wrong with my code?
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar Mode="Default" Opacity="1.0" IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Assets/ApplicationBar/next.png" Text="Next" Click="appBar_next"/>
<shell:ApplicationBar.MenuItems>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
Here's the full XAML Code:
<phone:PhoneApplicationPage
x:Class="Share_Bills.getPersonNum"
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">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="SHARE BILLS" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock Text="step 1" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="How many persons are you?" VerticalAlignment="Top" Margin="10,0,0,0" Height="53" Width="436"/>
<TextBox x:Name="personNum" HorizontalAlignment="Left" Height="72" TextWrapping="Wrap" VerticalAlignment="Top" Width="456" Margin="0,25,0,0" InputScope="Number"/>
<Button x:Name="btnNext1" Content="Next" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="326,97,0,0" Width="130" Click="btnNext1_Click"/>
<TextBlock x:Name="txtError" HorizontalAlignment="Left" Margin="10,102,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="311" Height="134"/>
</Grid>
</Grid>
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar Mode="Default" Opacity="1.0" IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Assets/ApplicationBar/next.png" Text="Next" Click="appBar_next"/>
<shell:ApplicationBar.MenuItems>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar></phone:PhoneApplicationPage>
I Compiled your project it is working fine with ApplicationBar. Initially you set your Project Entry Point to MainPage.xaml, But you mentioned your problem with getPersonNum.xaml page in Code. I ran the getPersonNum.xaml.
Here is the screenshot of my Emulator :
Hope this helps.
This question already has an answer here:
WPF Grid horizontalalignment doesn't work. Sizes don't changes
(1 answer)
Closed 8 years ago.
In this window I have many different controls and I want to stretch which is possible
but there are some controls by 'stackGroup', 'listBox1', 'listBox2' that don't stretching.. Why ??
Also is this way i right to do this kind of pages
<Window x:Class="TwoColumnGridSample.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Window_Loaded"
Title="Window1" Height="759" Width="800">
<Grid Margin="0,0,0,95">
<Grid.RowDefinitions>
<RowDefinition Height="509"></RowDefinition>
<RowDefinition Height="111"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Height="472" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="165" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" VerticalAlignment="Stretch" Margin="0,0,0,163">
<ListBox Name="listBox1" SelectedItem="{Binding SelectedItem}" Width="165" ItemsSource="{Binding Buttons}" SelectionChanged="ListBox_SelectionChanged" HorizontalContentAlignment="Left" VerticalAlignment="Stretch" >
<ListBox.ItemTemplate>
<DataTemplate>
<Button Content="{Binding .}" Click="Button_Click" Style="{StaticResource listboxbuttons}"></Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
<StackPanel Name="stackGroup" HorizontalAlignment="Stretch" Grid.Column="1" Height="457" VerticalAlignment="Top" >
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="460" Margin="0,0,10,0" >
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="24" />
<RowDefinition Height="316"/>
<RowDefinition Height="60" />
</Grid.RowDefinitions>
<Image x:Name="imageMap" Source="Resources/images.jpg" HorizontalAlignment="Stretch" Grid.Row="0" Stretch="Fill" Margin="2,0,0,0" />
<Border BorderBrush="Green" BorderThickness="3" CornerRadius="1,1,1,1" Margin="2,4,0,17" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.RowSpan="2">
<Grid Grid.Row="1" Margin="3,3,3,3">
<GroupBox Header="Club Badge" HorizontalAlignment="Left" VerticalAlignment="Top" Height="123" Width="134"/>
<GroupBox Header="Goalie" HorizontalAlignment="Left" VerticalAlignment="Top" Height="179" Width="134" Margin="0,128,0,0"/>
<GroupBox Header="Defender" HorizontalAlignment="Left" Margin="139,0,0,0" VerticalAlignment="Top" Height="307" Width="134"/>
<GroupBox Header="MidFielder" HorizontalAlignment="Left" Margin="278,0,0,0" VerticalAlignment="Top" Height="307" Width="134"/>
<GroupBox Header="GroupBox" HorizontalAlignment="Left" Margin="417,0,0,0" VerticalAlignment="Top" Height="307" Width="155"/>
</Grid>
</Border>
<ProgressBar BorderBrush="#FF6081B0" HorizontalAlignment="Stretch" Margin="2,303,0,43" Value="45" Grid.Row="2" Foreground="#FF6081B0" Grid.RowSpan="2" />
</Grid>
</StackPanel>
</Grid>
<ListBox Height="96" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Bottom" Name="listBox2" Width="782" Grid.RowSpan="2">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="30 0 30 0" />
</Style>
</ListBox.ItemContainerStyle>
<ListBoxItem Content="Vertical Item 1" />
<ListBoxItem Content="Vertical Item 2" />
<ListBoxItem Content="Vertical Item 3" />
<ListBoxItem Content="Vertical Item 4" />
<ListBoxItem Content="Vertical Item 5" />
</ListBox>
</Grid>
</Window>
Same answer as in this question. StackPanel will not respect stretch alignments in the same direction as its orientation. So a StackPanel whose orientation is vertical will not respect a VerticalAlignment of stretch for a child.
listBox1 doesn't stretch because it's VerticalAlignment is stretch and it's container StackPanel has an orientation of Vertical (that's its default). You could change that StackPanel to be horizontal, replace it with another container (such as a DockPanel), or remove it entirely since it only contains one element.
Similar reasoning can be applied to your other issues
How do I make the entire text visible or increase the visible area while using RichTextBox in WP8 SDK to develop an app?
Xaml code:
<RichTextBox x:Name="richText" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0" TextWrapping="Wrap">
<Paragraph Name="contentPara">
</Paragraph>
</RichTextBox>
</ScrollViewer>
c#:
Run myRun = new Run();
myRun.Text = App.ViewModel.Items[index].LineThree;
contentPara.Inlines.Add(myRun);
edit:
Entire Xaml:
<phone:PhoneApplicationPage
x:Class="horoscope.hdetail"
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">
<Grid.Background>
<ImageBrush ImageSource="/Assets/background.png" Opacity="0.8" />
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,0">
<TextBlock Text="Bhagawad Gita" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Height="auto">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Row="0">
<!--<Image x:Name="t2" Width="100" Height="100" Margin="20,0,50,0" />-->
<TextBlock x:Name="t1" Text="Aries" FontSize="60" HorizontalAlignment="Left" Margin="12,0,20,0" />
</StackPanel>
<ScrollViewer Name="scrlvw" Grid.Row="1" Height="auto" Visibility="Visible">
<RichTextBox x:Name="richText" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0" TextWrapping="Wrap">
<Paragraph Name="contentPara">
</Paragraph>
</RichTextBox>
</ScrollViewer>
</Grid>
</Grid>
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Minimized">
<shell:ApplicationBarIconButton IconUri="/Assets/questionmark.png" Text="about" Click="ApplicationBarIconButton_Click"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
Please help. I am stuck at this for hours and I cant seem to figure out what is the problem.
Here the problem screenshot:
Remove the ScrollViewer.
The Default RichTextBox Template already has one.
Simply set the VerticalScrollBarVisibility property to the RichTextBox, like so:
<RichTextBox VerticalScrollBarVisibility="Auto">
<!-- ... -->
</RichTextBox>
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.
I am developing window phone 7 application in C#. I am new to the window phone 7 application. I am also new to the silverlight. I have taken the ListBox control in my xaml file & adding the many button controls to this listbox control dynamically. My xaml code is as follows
<phone:PhoneApplicationPage
x:Class="ExpenseMgrMobAppl.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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
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">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="Expnse Manager" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Entry Details" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<toolkit:DatePicker Name="EntryDate" ValueChanged="DatePicker_ValueChanged" Margin="267,0,0,552" />
<ListBox x:Name="lstButtons" Margin="358,61,10,31" SelectionChanged="lstButtons_SelectionChanged" Width="80" Height="500">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Button Content="{Binding ElementName}" Width="50" HorizontalAlignment="Center"></Button>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Content="Add" Height="72" HorizontalAlignment="Left" Margin="107,504,0,0" Name="Addbutton" VerticalAlignment="Top" Width="160" Click="Addbutton_Click" />
</Grid>
</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>
In the above code everything is working file. Only the problem is that I am not able fire the method SelectionChanged="lstButtons_SelectionChanged" . I am able to fire this method by clicking on the edge of area of the listbox control. When I click on the middle of the square of the button, the method does not fire. But when I click outside the area of the square of the button (the area which is in the right direction of the button & that area is near the edge of the area of listbox control) the method gets fired. This is I think because I am not clicking on the right area. I think I am not able to specify the right are for button click in my code & thats why the event is not firing.
I have another example of similar type where everything is working fine & event is also firing properly. The xaml for this example is as follows
<phone:PhoneApplicationPage
x:Class="WindowsPhoneNavigation.Views.Pictures.Default"
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" d:DesignHeight="768" d:DesignWidth="480"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="{StaticResource AppName}" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock Text="Images" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal" Margin="5">
<Button x:Name="btnRemoveSelection" Content="Remove Image" Click="btnRemoveSelection_Click" IsEnabled="False"/>
</StackPanel>
<ListBox x:Name="lstPictures" Width="450" Height="520" Margin="10" SelectionChanged="lstPictures_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Image}" Width="100" Stretch="Uniform" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding Filename}" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
</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>
Can you please tell me where I am going wrong in the first case described above ? Can you please provide me any code or link through which I can resolve the above issue. What modifcation should I done in my code for the first case described above so that when I click on exactly in the square of the button area the event SelectionChanged="lstButtons_SelectionChanged" gets fired ?
What is probably happening is that the Button is handling the click event by default and thus not allowing it to propagate to the ListBox. I'm assuming your intent is to access the data object associated with the row containing the button that you clicked on. In that case you can add a button click handler and use the following:
void Button_Click(object sender, RoutedEventArgs e)
{
Button b = sender as Button; // sender is the button user clicked
MyDataObject data = b.DataContext as MyDataObject; // data is the MyDataObject for that row
// ...
}
Your second example works because neither TextBlock nor Image are intercepting the click event before it gets to the ListBox SelectionChanged handler.