Scrolling in Usercontrol - windows-phone-7

I have developed one user control, which has ListBox. when we scrolling it is not happen for me can u tell me what would goes wrong in it?
I have following items,
1.Panorama Page
In side controls:PanoramaItem I have created the instance of usecontrol
<controls:PanoramaItem Header ="Header">
<Grid>
<views:MyUserControlView DataContext="{Binding MyViewModel}" />
</Grid>
</controls:PanoramaItem>
2.MyUserControlView
<UserControl x:Class="UI.Views.RecentFileView"
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:utility="clr-namespace:UI.CommandBehaviours"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="364" d:DesignWidth="245">
<Grid x:Name="LayoutRoot" Height="360">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ListBox x:Name="RecentFilesListBox" Grid.Row="0" ItemsSource="{Binding RecentFiles}"
utility:CommandService.Command="{Binding ToFileViewCommand}" utility:CommandService.CommandParameter="{Binding SelectedItem, ElementName=RecentFilesListBox}" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="DataTemplateStackPanel" Orientation="Horizontal">
<Image x:Name="ThumbnailImage" Source="{Binding Path=Thumbnail}" Height="43" Width="43" VerticalAlignment="Top" Margin="10,0,20,0"/>
<StackPanel>
<TextBlock x:Name="FileNameTextBlock" Text="{Binding Path=FileName, Mode=OneWay}" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock x:Name="FileserverNameTextBlock" Text="{Binding Path=FileServerName}" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
When I am Scrolling Its not working for me..

Assuming you mean vertical scrolling, then the structure you've shown should work OK - although I'm a little bit concerned about where the <ListBox> is in your <UserControl>
Here are two things that should work:
Option 1:
<Panorama>
<PanoramaItem>
<MyUserControl>
</PanoramaItem>
</Panorama>
where MyUserControl is:
<UserControl>
<ScrollViewer>
<StackPanel>
... lots of <TextBlock>s
</StackPanel>
</ScrollViewer>
</UserControl>
or...
Option 2.
<Panorama>
<PanoramaItem>
<MyUserControl>
</PanoramaItem>
</Panorama>
where MyUserControl is:
<UserControl>
<ListBox>
... lots of "items" possibly created inside a <DataTemplate>
<ListBox>
</UserControl>
If you want to put a list of items inside a ScrollViewer, then you might be better off using an ItemsControl instead.

The XAML you posted for your usercontrol isn't valid (it contains an extra </StackPanel>) and has lots more grids than you should need.
Try this:
<ListBox x:Name="MyListBox" ItemsSource="{Binding MyProperty}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image x:Name="MyImage" Source="{Binding MyImageSource}" VerticalAlignment="Center" HorizontalAlignment="Center" />
<StackPanel>
<TextBlock x:Name="Label" Text="{Binding MyLabel}" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="ReadOnlyTextBlock" Text="{Binding MyStatus}" Style="{StaticResource PhoneTextSubtleStyle}" />
<TextBlock x:Name="PaidTextBlock" Text="{Binding MyPurchase}" Style="{StaticResource PhoneTextSubtleStyle}" Foreground="Blue"/>
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Related

How to wrap ListPicker SelectedItem in windows phone 8

I am using ListPicker from windows phone toolkit. My options are pretty lengthy so my ItemTemplate is,
<DataTemplate>
<TextBlock TextWrapping="Wrap"/>
</DataTemplate>
Now, when I select a lengthy option(say three lines) in Expansion Mode (less then 5 options) it is working good as expected, but when I Use FullMode(more than 5 items) it is not wrapped in the ListPicker.
To be more clear, It is wrapped as expected in the FullModePage but it is not within the control.
<toolkit:ListPicker Margin="0" MinHeight="70" toolkit:TiltEffect.SuppressTilt="True" Template="{StaticResource ListPickerControlCustomTemplate}" HorizontalAlignment="Stretch" VerticalAlignment="Top" FontFamily="{StaticResource RegularFont}"
SelectionChanged="SharedAppsCategoryListPicker_OnSelectionChanged" Name="SharedAppsCategoryListPicker"
LayoutUpdated="SharedAppsCategoryListPicker_OnLayoutUpdated" >
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,20,0">
<TextBlock TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="20,15,120,15" FontSize="20" Text="{Binding groupname}" Foreground="{StaticResource ListPickerForegroundColor}"></TextBlock>
<Rectangle Margin="20,10,0,-11" Height="0.5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Stroke="{StaticResource ListPickerDividerColor}" StrokeThickness="0.5" />
</Grid>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<Grid Margin="0,0,20,0">
<TextBlock MaxWidth="250" Width="250" TextWrapping="Wrap" FontSize="20" Margin="0,0,120,0" VerticalAlignment="Center" Text="{Binding groupname}" Foreground="{StaticResource ListPickerForegroundColor}" FontFamily="{StaticResource RegularFont}"></TextBlock>
</Grid>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
you would be needed to give width for the Textblock after then Text Would be Wrapped if content is larger than the width of the Textblock.
try this :
<DataTemplate>
<TextBlock TextWrapping="Wrap" width=200/>
</DataTemplate>
Edit:
I have Implemeted it this way
XAML:
<toolkit:ListPicker Margin="0" MinHeight="70" toolkit:TiltEffect.SuppressTilt="True" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="SharedAppsCategoryListPicker" >
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,20,0">
<TextBlock Width="300" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="20,15,120,15" FontSize="20" Text="{Binding}" ></TextBlock>
</Grid>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<Grid Margin="0,0,20,0">
<TextBlock Width="400" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" VerticalAlignment="Center" Text="{Binding}" ></TextBlock>
</Grid>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
Images of O/P:

Overlap controls with listbox

I'm trying to create a autocompletebox but it keeps moving items in my grid/stackpanel down while I want the listbox to overlap the controls, how can I prevent this from happening? I also want to say that a control may appear above the textbox. Thanks in advance.
XAML:
<Page
x:Class="test.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:test"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:mmppf="using:Microsoft.PlayerFramework"
xmlns:ab="using:AutoCompleteBox"
mc:Ignorable="d">
<Grid Name="rootGrid">
<ScrollViewer Grid.Row="2" Grid.Column="0" x:Name="panelScrollViewer" Height="Auto" VerticalScrollBarVisibility="Auto" HorizontalScrollMode="Disabled" HorizontalAlignment="Stretch" VerticalAlignment="Top" ZoomMode="Disabled" MaxZoomFactor="1" MinZoomFactor="1">
<StackPanel Name="contentPanel" Orientation="Vertical" Margin="20,0" HorizontalAlignment="Stretch">
<mmppf:MediaPlayer Name="player" Background="Black" Margin="0,0,0,40" Height="Auto" Width="Auto" VerticalAlignment="Top" Visibility="Collapsed"/>
<TextBox Name="autocomplete" Grid.Row="1" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
<ListBox Name="autoCompleteListbox" Grid.Row="0"
ScrollViewer.VerticalScrollBarVisibility="Auto"/>
<StackPanel Name="menuPanel" Orientation="Vertical" HorizontalAlignment="Center">
<!--Contains Rows of stack panels with buttons-->
</StackPanel>
<ProgressRing Name="prLoading" Width="100" Height="100" Margin="50" Foreground="White" Visibility="Collapsed"/>
<Grid Name="cv">
<!--more controls-->
</Grid>
</StackPanel>
</ScrollViewer>
</Grid>
</Page>
NOTE: The autocomplete textbox is a object that will show a listbox under it. Also have I found a workaround but if there is a better way to do it, please suggest.
SOLUTION:
<Page
x:Class="test.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:test"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:mmppf="using:Microsoft.PlayerFramework"
xmlns:ab="using:AutoCompleteBox"
mc:Ignorable="d">
<Grid Name="rootGrid">
<ScrollViewer Grid.Row="1" Grid.Column="0" x:Name="panelScrollViewer" Height="Auto" VerticalScrollBarVisibility="Auto" HorizontalScrollMode="Disabled" HorizontalAlignment="Stretch" VerticalAlignment="Top" ZoomMode="Disabled" MaxZoomFactor="1" MinZoomFactor="1">
<StackPanel Name="contentPanel" Margin="20,0" HorizontalAlignment="Stretch">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<mmppf:MediaPlayer x:Name="player" Background="Black" Margin="0,0,0,40" Height="Auto" Width="Auto" VerticalAlignment="Top" Visibility="Collapsed"/>
<TextBox x:Name="autocomplete" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
</StackPanel>
<Grid>
<StackPanel Margin="0" Orientation="Vertical" Grid.Row="1">
<StackPanel Name="menuPanel" Orientation="Vertical" HorizontalAlignment="Center">
<!--Contains Rows of stack panels with buttons-->
</StackPanel>
<ProgressRing Name="prLoading" Width="100" Height="100" Margin="50" Foreground="White" Visibility="Collapsed"/>
<Grid Name="cv">
<!--more controls-->
</Grid>
</StackPanel>
<ListBox Name="autoCompleteListbox" Grid.Row="0"
VerticalAlignment="Top"
ScrollViewer.VerticalScrollBarVisibility="Auto"/>
</Grid>
</StackPanel>
</ScrollViewer>
</Grid>
</Page>

How to set selected LIstbox item border color highlight in windows phone?

Hi i want selected listbox item highlight border color.am using code given below.please help me any one.
<ListBox x:Name="NotchsList11" Width="Auto" Grid.RowSpan="5" Margin="0,59,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Grid.ColumnSpan="3" x:Name="ControlsPanel"
Height="234"
VerticalAlignment="Top">
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" >
<TextBlock Grid.Row="1" FontFamily="Calibri" FontSize="34" FontWeight="Bold" FontStyle="Normal" Padding="10,0,0,0"
Text="{Binding name}" VerticalAlignment="Bottom"
/>
</StackPanel>
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<StackPanel Width="Auto">
<StackPanel VerticalAlignment="Top" Width="Auto">
<ListBox ItemsSource="{Binding Articles}" Margin="5,5,5,0" Width="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" SelectionChanged="NotchsList11_SelectionChanged">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
</StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="#302c2d" Background="#302c2d" BorderThickness="5,5,5,0" Name="image" Margin="3,0,3,0">
<Image Source="{Binding Image}" Width="141" Height="120" Name="value" Stretch="Fill" VerticalAlignment="Top"></Image>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Width="Auto">
<ListBox x:Name="NotchsList11" ItemsSource="{Binding Articles}" Margin="5,0,5,0" ScrollViewer.VerticalScrollBarVisibility="Disabled" SelectionChanged="NotchsList11_SelectionChanged">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal">
</StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate >
<Border BorderBrush="#302c2d" Background="#302c2d" BorderThickness="5,5,5,0" Margin="3,0,3,0">
<TextBlock Text="{Binding Titles}" Width="141" Height="85" Padding="3,0,0,30" TextWrapping="Wrap"></TextBlock>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</StackPanel>
</ScrollViewer>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This is am using code,i dont know how to set selected item border.so please help me how to resolve in this issue.Avance Thanks
I need output like given below image selected item border red.
Modify according your requirement:
customize-the-wp7-listbox-selected-item-visual-states

Gridview with grid inside with ItemClick

My ItemView_ItemClick is not executed when I click on a tile (except if I click on the rectangle selector).
Why ? How can I do that ? Thanks.
<GridView Grid.Row="1" Grid.Column="1" ItemsSource="{Binding Products}" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick">
<GridView.ItemTemplate>
<DataTemplate>
<GridViewItem>
<Grid Width="300" Height="200">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding SmallPic, Converter={StaticResource imageConverter }}" Stretch="UniformToFill"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Opacity="1" Background="#7F000000" >
<TextBlock Text="{Binding Name}" Style="{StaticResource ItemContentStyle}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Price, Converter={StaticResource priceConverter }}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</GridViewItem>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
Moving my comment to an answer....
The <GridViewItem> inclusion is unnecessary and seems to be causing the unwanted behavior.

display a long text inside a textblock on two lines

I have a listbox which contains a textblock and an image. I want if the text is too long it goes to a second line. At the moment only have of the text is visible. Here is my XAML
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding imgurl}" MaxHeight="120" MaxWidth="120" Margin="0,10,0,0" />
<TextBlock Text="{Binding title}" Margin="50,0,12,0" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
Could anybody help me?
Screenshot
Ah ya, so I guess it is as simple as it looked. You just need to restrict the width of where your text is and invoke TextWrapping, which you have multiple options to accomplish that. Here's a couple possibilities...
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding imgurl}" MaxHeight="120" MaxWidth="120" Margin="0,10,0,0" />
<TextBlock Text="{Binding title}" Margin="50,0,12,0" TextWrapping="Wrap" MaxWidth="{Binding ActualWidth, ElementName=Self}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
Or you could have a panel do it which should get restricted by its parent...
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding imgurl}" MaxHeight="120" MaxWidth="120" />
<TextBlock Grid.Column="1" Text="{Binding title}" TextWrapping="Wrap" Margin="50,0,2,0" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
Or depending on how this ListBox is layed out as a child, it could possibly even be as easy as just adding TextWrapping="Wrap" to the TextBlock and then setting the MaxWidth on the ListBox itself. Either way, hope this helps... :)

Resources