WP7 TextBlock inside a ListBox not wrapping text - windows-phone-7

I have a ListBox which has StackPanels holding a TextBlock and an Image horizontally, followed by a ContentPresenter. This is what the XAML looks like:
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0">
<ListBox x:Name="MainListBox"
Margin="12,0,12,0"
SelectionChanged="MainListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="ContextMenu"
Opened="ContextMenu_Opened">
<toolkit:MenuItem Header="edit"
Tag="edit"
Click="MenuItem_Click" />
<toolkit:MenuItem Header="delete"
Tag="delete"
Click="MenuItem_Click" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Left">
<!-- **** This text won't wrap **** -->
<TextBlock Text="{Binding Header}"
TextWrapping="Wrap"
Style="{StaticResource PhoneTextNormalStyle}"
Foreground="{StaticResource PhoneAccentBrush}" />
<Image Source="/image.png"
Visibility="{Binding ImageVisibility}" />
</StackPanel>
<ContentPresenter Content="{Binding Content}"
HorizontalAlignment="Stretch" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</Grid>
I'm setting the ItemsSource of the ListBox to an ObservableCollection within the page constructor. Everything works fine until the Header text becomes too long, in which case it is not wrapping as I've specified it to. How can I force the TextBlock to wrap the text?
Thanks for your help!

This is likely a result of not restricting the width of the TextBlock, so it is growing horizontaly off screen where you can't see it.

Related

How to Bind data in context menu WP7

I have a list in which there are schedule name, date and time that are visible, but i want that on the long press of a particular item in a listbox there opens a context menu in which only description and schedule name of particular item is visible.
So my code in xaml is: first in the grid there is a listbox in which i have bound the whole list that is scheduleList ansd in the listbox.itemtemplate and inside the data templatei have binded the particular item to the textblock
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox x:Name="scheduleListbox" ItemsSource="{Binding scheduleList}" Hold="scheduleListbox_Hold" Tap="scheduleListbox_Tap" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Height="150" Width="460">
<TextBlock x:Name="textBlock1" Text="{Binding ScheduleName}" Foreground="WhiteSmoke" FontSize="32"/>
<TextBlock x:Name="textBlock2" Text="{Binding ScheduleDate}" Foreground="Red" Margin="0,10,0,0"/>
<StackPanel Orientation="Horizontal" Height="70" Width="460" Hold="StackPanel_Hold">
<TextBlock x:Name="textBlock3" Text="{Binding StartTime}" Margin="0,5,0,0"/>
<TextBlock x:Name="textBlock4" Text="{Binding EndTime}" Margin="50,5,0,0"/>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="menuItem" VerticalOffset="100.0" IsZoomEnabled="True" >
<toolkit:MenuItem Header="Add to calender" ItemsSource="{Binding ScheduleName }"/>
<!--<toolkit:MenuItem Header="Description" ItemsSource="{Binding Description}"/>-->
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Please tell me that how to bind description and schedule name in context menu, either by code or by xaml.
How to bind data in context menu either through code or through xaml?
I create a breadcrumb context menu with binding using the code below. The code you should be interested in is the toolkit:ContextMenu.ItemTemplate section where you specify the bindings. Notice that you can also bind to a command parameter like I do with the index value.
The toolkit:ContextMenu.Template section is not needed. I added this to allow scrolling the items if there are more than will fit on the screen and also to move the menu to the bottom of the screen.
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="breadCrumbContextMenu" ItemsSource="{Binding CloudViewModel.BreadCrumbMenuItems}" Opened="ContextMenu_Opened" Closed="Breadcrumb_ContextMenu_Closed">
<toolkit:ContextMenu.Template>
<ControlTemplate TargetType="toolkit:ContextMenu">
<Border Margin="0,700,0,0" BorderThickness="1" >
<ScrollViewer MaxHeight="700">
<ItemsPresenter/>
</ScrollViewer>
</Border>
</ControlTemplate>
</toolkit:ContextMenu.Template>
<toolkit:ContextMenu.ItemTemplate>
<DataTemplate>
<toolkit:MenuItem Click="breadcrumbMenuItem_Click" CommandParameter="{Binding Index}" Padding="0">
<toolkit:MenuItem.Header>
<StackPanel Orientation="Horizontal" Height="40">
<Image Source="{Binding Image}" Width="40" Height="40" />
<TextBlock Text="{Binding Text}" Margin="24,0,0,0" />
</StackPanel>
</toolkit:MenuItem.Header>
</toolkit:MenuItem>
</DataTemplate>
</toolkit:ContextMenu.ItemTemplate>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>

How to place images inside image in grid?

I need to place images side by side and need to place one small image icon below the each image.please help me how to design ?any samples please let me know..
How to place userimage inside one small image dynamically based on condition..please help me..
I made simple prototype for you. I can't make whole screen for you. Here are the basic things as I got from your comments and screenshot. Please see XAML and screenshot below:
<ListBox Name="lstImages" VerticalAlignment="Top">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="0,0,0,-15" />
<Setter Property="Margin" Value="2"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel>
</toolkit:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Height="100" Width="110" Source="{Binding BigImageSource}" VerticalAlignment="Top"/>
<Image Height="10" Width="10" Source="{Binding SmallImageSource}" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,-35,10,0"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Use this
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image Source="Your image" Grid.Row="0"/>
<Image Source="Your small icon" Grid.Row="1"/>
</Grid>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image Source="Your image" Grid.Row="0"/>
<Image Source="Your small icon" Grid.Row="1"/>
</Grid>
</Grid>
<StackPanel>
<StackPanel Orientation="Horizontal">
<Image Source="Firstimage" />
<Image Source="Secondimage" />
</Stackpanel>
<StackPanel Orientation="Horizontal">
<Image Source="Firsticon" />
<Image Source="Secondicon" />
</Stackpanel>
</StackPanel>
But here you have to make some changes to the icon stackpanel like setting some margin, inorder to make it aligned to the actual images.
This is just an alternative, you can also use Grid's as answered by nucleons
If you want to show your images in listbox then wrap this way in wrap panel and you can set direction of wrappanel as well. Wrappanel is found in silverlight toolkit of windows phone 7.
<ListBox Name="lstImages">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="-15" />
<Setter Property="Margin" Value="0"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel>
</toolkit:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<stackpanel>
<Image Source="Your image" />
<Image Source="Small image" />
</stackpanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and bind this listbox with your collection of data.

Content in Hyperlink Button doesnt show

Im currently trying to add some Style to my Hyperlinkbutton, but cannot get it to work.
After some searching, I found this Tutorial, but even after copying the whole code (and only changing the picture) it doesnt work for me. My SDK-Target is 7.5.
Here my Code:
<ScrollViewer>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<HyperlinkButton NavigateUri="/Views/PanoramaPage.xaml" Content="Panorama" Foreground="{StaticResource PhoneAccentBrush}"/>
<HyperlinkButton NavigateUri="/Views/PanoramaPage.xaml" Content="Pivot" Foreground="{StaticResource PhoneAccentBrush}"/>
<HyperlinkButton Name="hyperlinkButton1" NavigateUri="/Views/PanoramaPage.xaml" >
<Border BorderBrush="White" BorderThickness="5" Padding="10">
<StackPanel Orientation="Horizontal">
<Image Width="60" Source="/Presentation;component/Images/refresh.png" />
<TextBlock VerticalAlignment="Center" Text="Go to View.xaml"/>
</StackPanel>
</Border>
</HyperlinkButton>
</StackPanel>
</ScrollViewer>
Tutorial-Url:
http://www.imaginativeuniversal.com/blog/post/2010/07/05/Navigating-around-windows-phone-7.aspx
The default control template for the HyperlinkButton is a TextBlock, so all it can handle is text!
One way to go around this is to change the control template, like this:
<HyperlinkButton Name="hyperlinkButton1" NavigateUri="/Views/PanoramaPage.xaml">
<HyperlinkButton.Template>
<ControlTemplate TargetType="HyperlinkButton">
<Border BorderBrush="White" BorderThickness="5" Padding="10">
<StackPanel Orientation="Horizontal">
<Image Width="60" Source="/Presentation;component/Images/refresh.png" />
<TextBlock VerticalAlignment="Center" Text="Go to View.xaml"/>
</StackPanel>
</Border>
</ControlTemplate>
</HyperlinkButton.Template>
</HyperlinkButton>

Scroll PanoramaItem Header in 'wide' PanoramaItem

I'm interested in creating my own 'Hub' Panorama. I've gotten the 'wide' PanoramaItem working, but I'm trying now to mimic the behavior seen in the Marketplace hub, where the PanoramaItem Header scrolls as you move across the hub.
I'm looking for a way for it to smoothly animate to the end of the hub. Has anyone tried this before, or have any suggestions?
I'd imagine it would be something like this:
//OnPanoramaViewChanged
//get X location of viewport
//animate title to X location
However it doesn't appear that the Panorama has a ScrollViewer attached property.
In case you're curious, here's how I made a wide panorama item.
<controls:PanoramaItem ScrollViewer.HorizontalScrollBarVisibility="Visible" Header="movies" Orientation="Horizontal" Width="900">
<controls:PanoramaItem.HeaderTemplate >
<DataTemplate >
<StackPanel>
<TextBlock Foreground="{StaticResource PanoramaHeaderBrush}" Text="{Binding}">
</TextBlock>
</StackPanel>
</DataTemplate>
</controls:PanoramaItem.HeaderTemplate>
<StackPanel>
<!-- line list with image placeholder and text wrapping -->
<ListBox ItemsSource="{Binding Items}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10">
<Grid Background="{StaticResource ControlTitlesInactivePivotBrush}" Width="173" Height="173" >
<TextBlock FontSize="24" Text="Movie Title (2010)" TextWrapping="Wrap" Style="{StaticResource PhoneTextGroupHeaderStyle}"/>
<Rectangle Fill="White" Height="48" Width="48" HorizontalAlignment="Right" VerticalAlignment="Bottom">
<Rectangle.OpacityMask>
<ImageBrush ImageSource="/Test;component/movie_icn.png" />
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
<TextBlock Text="Movie Title:" Margin="12,0,12,0" Foreground="Black" />
<TextBlock Text="The Title" Margin="12,-6,12,0" Foreground="Gray"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</controls:PanoramaItem>
The Silverlight Panorama control doens't support the behaviour you're after or provide the ability to customize it in a way that will let you do it.
If you really want this then you'll need to build your own control from scratch. I would expect this to be more effort than is justified. Just avoid creating a very wide PanoramaItem instead.

WP7 ListBox ItemPanel SelectChanged selects lastItem

I have a list box that uses a canvas in the ItemsPanel to lay out the items using binding on the Margin, this all works great. However clicking on the list box only fires once and always returns the last item in the listbox.
The Code:
<Grid>
<ListBox Name="lstItems" ItemsSource="{Binding Itemss}" Width="Auto" Height="497" Margin="0,40,0,10" SelectionChanged="ListBox_SelectionChanged">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Name="cnvItems">
</Canvas>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="{Binding XYMargin}">
<Border BorderBrush="Silver" BorderThickness="5" Height="{Binding XYWidth}" Width="{Binding XYWidth}" HorizontalAlignment="Left" Margin="0,0,0,0" Name="border5" VerticalAlignment="Top" Background="#81FFFFFF" CornerRadius="10" />
<StackPanel Margin="5,5,0,0" HorizontalAlignment="Center" Orientation="Horizontal">
<TextBlock Margin="0,0,0,0" Width="{Binding XYWidth}" Text="{Binding Label1}" TextAlignment="Left" FontSize="30" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Any ideas why I only get the last item in the list?
If you're using the Canvas to do layout, it is laying out the items in an ItemContainerStyle one on top of another, so the last item to be put in the canvas will be the only one visible. Think of laying a set of glass panes on top of one another and your items are simply drawing lower and lower on each new glass. You can still only touch the top glass, even though the item is drawn at the bottom.
Solution:
Try moving the
Margin="{Binding XYMargin}"
out of your data template and putting into your ItemContainerStyle.
Example: (simplified for clarity):
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot"
Margin="{Binding XYMargin}">
<ContentControl
x:Name="ContentContainer"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>

Resources