The Responsive UI,I know the VisualStateManager can do this work.Bu I don't know
how to do
In wide mode, It have two columns.The First column show a list and the second show the content in the same page
And in narrow mode, it only show one thing one time in a page and whit the navigation. Just like the Win10 Mail app.
Thanks so much
Here's a XAML code for that :
<Grid Background="White">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="VisualStateNarrow">
<VisualState.Setters>
<Setter Target="emailDetails.(UIElement.Visibility)" Value="Collapsed"/>
<Setter Target="emailsList.(Grid.ColumnSpan)" Value="2"/>
</VisualState.Setters>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1"/>
</VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="VisualStateExtended">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="700"/>
</VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="340" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- Emails List -->
<Grid x:Name="emailsList" Background="LightBlue" >
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Nothing to show!" />
</Grid>
<!-- Email Details -->
<Grid Grid.Column="1" x:Name="emailDetails" Background="Blue" >
<TextBlock HorizontalAlignment="Center" Foreground="White" VerticalAlignment="Center" Text="Select email to show!" />
</Grid>
</Grid>
I've set '700 px' as a min width for the Extended state, you can change it by : <AdaptiveTrigger MinWindowWidth="700"/>
Related
I want to display the default message when list box is empty and for same I used following code but this code is not working :
<HubSection x:Name="PivotFromAccount" Style="{StaticResource HubSectionStyle2}" >
<DataTemplate>
<Border Style="{StaticResource brdhubsectionstyle}">
<Grid Grid.Row="1" Style="{StaticResource GridMainStyleHubSession}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Style="{StaticResource brdheaderstyle}">
<TextBlock Text="From Account" Style="{StaticResource lblheaderstyle}" />
</Border>
<ListBox x:Name="lstAccountDetailsfrom" Grid.Row="1" ItemsSource="{Binding }"
Style="{StaticResource LstBoxStyleBranches}"
Tapped="lstAccountDetailsfrom_Tapped"
ItemContainerStyle="{StaticResource lstAccountliststyle}"
ItemTemplate="{StaticResource lstAccountlistDataTemplate}" >
</ListBox>
<TextBlock Margin="4" FontStyle="Italic" FontSize="12" Text="List is empty" x:Name="txtmessage" Grid.Row="1" Foreground="Black" />
<i:Interaction.Behaviors>
<ic:DataTriggerBehavior Binding="{Binding ElementName=lstAccountDetailsfrom, Path=Items.Count,Converter={StaticResource DataTriggerBehavior},Mode=TwoWay}" Value="0" ComparisonCondition="GreaterThan">
<ic:ChangePropertyAction TargetObject="{Binding ElementName=txtmessage}" PropertyName="Visibility" Value="Collapsed"/>
</ic:DataTriggerBehavior>
</i:Interaction.Behaviors>
</Grid>
</Border>
</DataTemplate>
</HubSection>
I tried with the Ivalue converter also like below but it is also not much more helpful. It is always sending 0 count to ValueConverter
<TextBlock Margin="4" FontStyle="Italic" FontSize="12" Text="List is empty" x:Name="txtmessage" Grid.Row="1" Foreground="Black" Visibility="{Binding ElementName=lstAccountDetailsfrom,Converter={StaticResource DataTriggerBehavior},Mode=TwoWay}" />
If your data source is an ObservableCollection you can bind to its Count property with a custom IValueConverter than converts 0 to Visible and 1 to Collapsed and use it on the TextBlock. No behavior needed.
I'm working on a Windows 8.1 Universal app (using VS2013) and I would like to create tabs inside the GridView. After searching, I found tabs cannot be created so I need some solution where I can create something that at least looks like tabs.
Here s what I need:
I have images as tab headers. When I click on each image (like Appbar icon) different StackPanel should appear on the same grid.
This is how I need my app to look like:
On phone, consider using the Pivot control. On desktop, there is no such control until you upgrade to Windows 10 UWP apps - where Pivot is present.
Otherwise, try this:
<Grid x:Name="grid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Loaded">
<Core:GoToStateAction StateName="Tab1State"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="TabVisualStateGroup">
<VisualState x:Name="Tab1State">
<VisualState.Setters>
<Setter Target="Tab1Button.(ToggleButton.IsChecked)" Value="True"/>
<Setter Target="TabContent.SelectedItem" Value="{Binding ElementName=Tab1Content}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Tab2State">
<VisualState.Setters>
<Setter Target="Tab2Button.(ToggleButton.IsChecked)" Value="True"/>
<Setter Target="TabContent.SelectedItem" Value="{Binding ElementName=Tab2Content}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Tab3State">
<VisualState.Setters>
<Setter Target="Tab3Button.(ToggleButton.IsChecked)" Value="True"/>
<Setter Target="TabContent.SelectedItem" Value="{Binding ElementName=Tab3Content}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<!-- re-template radiobuttons as togglebuttons -->
<StackPanel.Resources>
<Style TargetType="RadioButton">
<Setter Property="MinWidth" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<ToggleButton IsChecked="{Binding IsChecked,
RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=TwoWay}">
<ContentPresenter />
</ToggleButton>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<RadioButton GroupName="TabButtons" x:Name="Tab1Button">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Checked">
<Core:GoToStateAction StateName="{Binding Name, ElementName=Tab1State}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<StackPanel Orientation="Horizontal">
<Rectangle Width="16" Height="16" Fill="Red" />
<TextBlock Margin="4,0" Text="Tab 1" />
</StackPanel>
</RadioButton>
<RadioButton GroupName="TabButtons" x:Name="Tab2Button">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Checked">
<Core:GoToStateAction StateName="{Binding Name, ElementName=Tab2State}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<StackPanel Orientation="Horizontal">
<Rectangle Width="16" Height="16" Fill="Green" />
<TextBlock Margin="4,0" Text="Tab2" />
</StackPanel>
</RadioButton>
<RadioButton GroupName="TabButtons" x:Name="Tab3Button">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Checked">
<Core:GoToStateAction StateName="{Binding Name, ElementName=Tab3State}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<StackPanel Orientation="Horizontal">
<Rectangle Width="16" Height="16" Fill="Blue" />
<TextBlock Margin="4,0" Text="Tab3" />
</StackPanel>
</RadioButton>
</StackPanel>
<FlipView x:Name="TabContent" Grid.Row="1">
<!-- if the user changes the item through the flipview -->
<Interactivity:Interaction.Behaviors>
<Core:DataTriggerBehavior Binding="{Binding SelectedItem.Name, ElementName=TabContent}" Value="{Binding Name, ElementName=Tab1Content}">
<Core:GoToStateAction StateName="{Binding Name, ElementName=Tab1State}"/>
</Core:DataTriggerBehavior>
<Core:DataTriggerBehavior Binding="{Binding SelectedItem.Name, ElementName=TabContent}" Value="{Binding Name, ElementName=Tab2Content}">
<Core:GoToStateAction StateName="{Binding Name, ElementName=Tab2State}"/>
</Core:DataTriggerBehavior>
<Core:DataTriggerBehavior Binding="{Binding SelectedItem.Name, ElementName=TabContent}" Value="{Binding Name, ElementName=Tab3Content}">
<Core:GoToStateAction StateName="{Binding Name, ElementName=Tab3State}"/>
</Core:DataTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<Grid Background="Red" x:Name="Tab1Content">
<!-- content -->
</Grid>
<Grid Background="Green" x:Name="Tab2Content">
<!-- content -->
</Grid>
<Grid Background="Blue" x:Name="Tab3Content">
<!-- content -->
</Grid>
</FlipView>
</Grid>
Be sure you reference the XAML Behaviors SDK.
Review the code. The trick is in the Visual States. You can update those to do anything you want, including updating multiple controls. Whatever you need.
Looks like this:
Best of luck!
I have a scrollviewer with an item template on it. the user sends a control number and I need to scroll to that item. How can I find the offset for the scrollviewer?
here is the scrollviewer that I am using
<ScrollViewer Grid.Row="0" x:Name="ScrollPanel" Padding="0">
<Grid x:Name="TestPanel" >
<ItemsControl x:Name="MainItemsControl" ItemsSource="{Binding PostList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="PostPanel" Margin="0,5,0,5">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image x:Name="IconUrl" Source="{Binding IconUrl}" Grid.Row="0" Grid.Column="0" Margin="12,0,12,0" VerticalAlignment="Center" HorizontalAlignment="Center" Width="50"/>
<StackPanel Grid.Row="0" Grid.Column="1">
<TextBlock x:Name="PostAuthorName" Text="{Binding PostAuthorName}" TextWrapping="NoWrap" Margin="12,0,12,0" Foreground="Black" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PostTime" Text="{Binding PostTime}" TextWrapping="NoWrap" Margin="12,0,12,0" Foreground="Black" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
<TextBlock x:Name="ReplyNumber" Text="{Binding ReplyNumber}" Grid.Row="0" Grid.Column="2" TextWrapping="NoWrap" Foreground="Black" Margin="12,0,12,0" Style="{StaticResource PhoneTextNormalStyle}" VerticalAlignment="Center"/>
</Grid>
<RichTextBox x:Name="PostContent" localcontrols:Properties.BBCode="{Binding PostContent}" />
<Rectangle Grid.Row="1" Fill="Gray" Height="1" HorizontalAlignment="Stretch" Margin="0,10,0,10"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</ScrollViewer>
The offset can be calculated in this way. The code is adopted from this answer.
void ScrollToIndex(int index)
{
var itemContainer = MainItemsControl.ItemContainerGenerator.ContainerFromIndex(index) as UIElement;
GeneralTransform transform = itemContainer.TransformToVisual(ScrollPanel);
Point position = transform.Transform(new Point(0, 0));
ScrollPanel.ScrollToVerticalOffset(position.Y);
}
The ItemsControl does not implement logic that allows scrolling to a particular item. You can use the ListBox control instead. This control has a ScrollIntoView method that accepts the object you would like to scroll to as an argument. You can still use the RadWrapPanel by setting the ItemsPanel property of the ListBox control.
You don't have properties, but you have two methods for this: ScrollToVerticalOffset (to scroll vertically) and ScrollToHorizontalOffset (to scroll horizontally).
this.scrollViewer2.ScrollToVerticalOffset(0);
I have got a strange problem with the styling of my pivot control.
I edited a copy of the default template in Expression Blend because I want to remove the entire header.
The adapted style:
<Style x:Key="PivotWithoutHeader" TargetType="phone:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="{TemplateBinding Background}" Grid.RowSpan="3"/>
<!--<ContentControl ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" HorizontalAlignment="Left" Margin="24,17,0,-7" Style="{StaticResource PivotTitleStyle}"/>-->
<Primitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1"/>
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And the usage of my style:
<phone:Pivot Grid.Row="1" x:Name="Objects" ItemsSource="{Binding Profiles}"
Style="{StaticResource PivotWithoutHeader}">
<phone:Pivot.ItemContainerStyle>
<Style TargetType="phone:PivotItem">
<Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>
</phone:Pivot.ItemContainerStyle>
<phone:Pivot.ItemTemplate>
<DataTemplate>
<Grid>
<Image Source="Resources/homer.png"/>
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="#Sample" />
<Button Margin="347,0,0,0" Command="{Binding DataContext.SettingsCommand, ElementName=Objects}" CommandParameter="{Binding .}" />
</Grid>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
My thought was just to remove or set the visibility of <Primitives:PivotHeadersControl> to collapsed but then my app crashes without any exception and the following message in my output window: "The program '[2332] TaskHost.exe' has exited with code -1073741819 (0xc0000005) 'Access violation'" appears.
I read some posts to move up the pivot so that the header is out of the screen but I need my customized pivot at the bottom of my page with some other controls above it.
Does anybody have an idea how to remove the header?
EDIT: For clarity I want to remove title and header.
You can remove the PivotItem header on the Pivot Control by replacing the Pivot.HeaderTemplate property with a blank DataTemplate. If you're trying to remove the Title rather than the Header, then I would like to know the solution too. ^^
<phone:Pivot ItemsSource="{Binding Data}" ItemTemplate="{StaticResource CustomPivotItemTemplate}">
<phone:Pivot.HeaderTemplate>
<DataTemplate/>
</phone:Pivot.HeaderTemplate>
</phone:Pivot>
Try this one:
<UserControl.Resources>
<ResourceDictionary>
<Thickness x:Key="PivotPortraitThemePadding">0,0,0,0</Thickness>
<Thickness x:Key="PivotLandscapeThemePadding">0,0,0,0</Thickness>
<Style x:Key="PivotWithoutHeaderStyle" TargetType="Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Pivot">
<Grid x:Name="RootElement" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Orientation">
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Landscape">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Style="{StaticResource PivotTitleContentControlStyle}" Height="0"/>
<ScrollViewer x:Name="ScrollViewer" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="0" Grid.Row="1" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" VerticalSnapPointsType="None" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalContentAlignment="Stretch" ZoomMode="Disabled">
<PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
<PivotHeaderPanel x:Name="Header" Background="{TemplateBinding BorderBrush}" Height="0" Margin="0" Visibility="Collapsed">
<PivotHeaderPanel.RenderTransform>
<CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0"/>
</PivotHeaderPanel.RenderTransform>
</PivotHeaderPanel>
<ItemsPresenter x:Name="PivotItemPresenter">
<ItemsPresenter.RenderTransform>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0"/>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</PivotPanel>
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</UserControl.Resources>
...
<Pivot Style="{StaticResource PivotWithoutHeaderStyle}">
...
The template of the Pivot control was changed in WP8 and it now requires that the PivotHeadersControl be present in the template. (You could remove it in WP7.x)
Just have a zero height or other "empty" content in your header instead.
I'm not aware of this having been publically documented as most people who've upgraded to WP8 are using the shim to the old version of the control. However, I Noted this at the end of a blog article at http://blog.mrlacey.co.uk/2013/01/pivot-and-panorama-have-moved-and.html
So removing the header AND the title doesn't work anymore on Windows Phone 8.
So I ported an existing control from: http://www.codeproject.com/Articles/136786/Creating-an-Animated-ContentControl to Windows Phone 8.
dBlisse's solution worked for me to hide the header template but for title I played with margins and the below trick worked for me, not sure if this is a good idea, but checked on different resolutions and looks fine.
Notice the Margin="0,-39,0,0" for stack panel below:
<phone:Pivot Background="Transparent" Margin="-12,0">
<phone:Pivot.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,-39,0,0">
YOUR CONTROLS HERE
</StackPanel>
</DataTemplate>
</phone:Pivot.ItemTemplate>
<phone:Pivot.HeaderTemplate>
<DataTemplate/>
</phone:Pivot.HeaderTemplate>
</phone:Pivot>
I finally figured it out! (I'm building a Universal Windows 10 App and had the same question.)
Add a blank HeaderTemplate to your Pivot controls as dBlisse suggested:
<Pivot ItemsPanel="{StaticResource ItemsPanelTemplate1}">
<Pivot.HeaderTemplate>
<DataTemplate/>
</Pivot.HeaderTemplate>
</Pivot>
And add this template in App.xaml:
<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
<Grid Margin="0,-48,0,0"/>
</ItemsPanelTemplate>
<StackPanel x:Name="LayoutRoot" Background="Transparent" >
<TextBlock Margin="20,20,0,0" Text="Type Text Here" HorizontalAlignment="Left"/>
<TextBox x:Name="SearchTextBox" IsReadOnly="False" HorizontalAlignment="Left" Margin="20,5,0,0" Height="70" Width="400" dp:TextBoxOnTextChangedDependency.UpdateSourceOnChange="True" Text="{Binding SearchBoxText, Mode=TwoWay}" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<cmd:EventToCommand PassEventArgsToCommand="True"
Command="{Binding ElementName=SearchTextBox, Path=DataContext.SearchTextBox_TextChangedCommand}"
/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
<Grid x:Name="LayoutList" Background="{StaticResource PhoneChromeBrush}">
<toolkit:LongListMultiSelector x:Name="treksLocationItems" Background="Transparent"
ItemsSource="{Binding Path=TreksLocationItems}">
<toolkit:LongListMultiSelector.ItemTemplate>
<DataTemplate>
<Grid Margin="0,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Width="110" Height="150" Source="{Binding PictureFilename}" VerticalAlignment="Top"/>
<StackPanel Grid.Column="1" VerticalAlignment="Top">
<TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextLargeStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Margin="12,-12,12,6"/>
<TextBlock Text="{Binding ShortDescription}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Address:" Style="{StaticResource PhoneTextSmallStyle}"/>
<TextBlock Text="{Binding Path=StreetName}" Style="{StaticResource PhoneTextSmallStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Site:" Style="{StaticResource PhoneTextSmallStyle}"/>
<TextBlock Text="{Binding Path=Website}" Style="{StaticResource PhoneTextSmallStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
</StackPanel>
</StackPanel>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<cmd:EventToCommand Command="{Binding Path=DataContext.TapCommand, ElementName=searchItems}" CommandParameter="{Binding Path=Id}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Grid>
</DataTemplate>
</toolkit:LongListMultiSelector.ItemTemplate>
</toolkit:LongListMultiSelector>
</Grid>
</StackPanel>
I have this code in XAML, a textbox for search and a multi line select list. The problem is that the multiLineList is not scrollable even if there are many items. If I remove the stackpanel and the textblock and textbox, the list works ok with scroll enabled. Any suggestion?
Try adding a ScrollViewer above your grid.
<ScrollViewer>
<Grid x:Name="LayoutList" ....>
...
</Grid>
</ScrollViewer>
Or you could probably replace your Grid with a ScrollViewer if you're not using it to position your elements.
Wraping LLMS in a ScrollViewer will destroy the item virtualization and throw an OutOfMemoryException if the collection is too long.
Expose the LLMS' inner LongListSelector, then use the ScrollTo() method to scroll to the item u want.
LongListMultiSelector llms = LongListMultiSelector as LongListMultiSelector;
if (llms != null && llms.ItemsSource.Count > 0)
{
llms.InnerLongListSelector.ScrollTo(llms.ItemsSource[llms.ItemsSource.Count - 1]);
}
I've encountered this weird issue and found an easy solution.
It happens for both Longlistselector and LonglistMultiselector.
When you have several controls in one page, you need to set the height of selector's row to "*" instead of "Auto" in order to make the scrolling function to work correctly.
For example :
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/> //Row def for another row
<RowDefinition Height="*"/> //Row def for your selector
</Grid.RowDefinitions>
If the RowDefinition Height not set to "*" but "Auto", scrolling for Longlistselector will not response to user's action.