I made a popup control that can accept any view of type FrameworkElement. In addition, you can provide a view model, which will be bound to the DataContext of the child view being provided. Everything works, but it takes a couple of seconds to render the data. The view model has an ObservableCollection that contains about 300 items. So in all honesty, 300 items shouldn't cause any issues.
There is no lag what so ever, If I extract the xaml from the popup to a regular page.
So, is there something inside a Popup control that happens when it's Child content property is being set, that would cause such a delay? Because this is blowing my mind at the moment.
Thanks in advance!
[Update]
As requested, the XAML that forms the child content of the tool window:
<UserControl
x:Class="App.Controls.ContactSelector"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
mc:Ignorable="d" x:Name="contactSelector"
DataContext="{Binding ContactSelectorViewModel,Source={StaticResource Locator}}">
<Grid HorizontalAlignment="Stretch" Style="{StaticResource BaseGridStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListView Grid.Row="0" ItemsSource="{Binding ContactCollection}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="12">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<!--<Image Margin="0,0,10,0" Grid.Row="0" Grid.Column="0"
Source="{Binding Thumbnail}" MaxHeight="35"
Visibility="{Binding Thumbnail, Converter={StaticResource ObjectNullToVisibilityConverter}}" />-->
<!--<Image Margin="0,5,5,5" Grid.Row="0" Grid.Column="0" MaxHeight="35"
Source="ms-appx:///Assets/Images/Contact.png"
Visibility="{Binding Thumbnail, Converter={StaticResource InverseObjectNullToVisibilityConverter}}" />-->
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding FullName}"
VerticalAlignment="Center"
Style="{StaticResource TextBlockMedium}" />
<!--<Grid Grid.Row="1" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ItemsControl Grid.Row="0" ItemsSource="{Binding MobileNumbers}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="10,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="0"
Text="{Binding Number}"
HorizontalAlignment="Stretch"
Style="{StaticResource TextBlockMedium}">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction
Command="{Binding DataContext.SelectContact, ElementName=contactSelector}"
CommandParameter="{Binding}" />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</TextBlock>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>-->
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<!--<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Border>
<TextBlock Text="{Binding Key}"
VerticalAlignment="Center" HorizontalAlignment="Center"
Style="{StaticResource TextBlockMedium}"
Padding="5" Margin="5" FontWeight="SemiBold" />
</Border>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>-->
</ListView>
</Grid>
</UserControl>
So I have commented out the entire section of the ItemsControl, but this did not solve the problem. When the Popup opens, it still takes quite a while to show the containing items.
It isn't slow when it's scrolling, it's slow in rendering the initial items.
The problem is in the ItemsControl which displays the MobileNumbers collection. You should not have an ItemsControl as an ItemTemplate for another ItemsControl (in your case, the ListView). You can do that only when you display small amount of items.
Because of this your MobileNumbers items are not virtualized and this is where the performance problem comes from, as all the items need to be displayed to render the item template.
You can try creating a flat list of objects, and then use ItemTemplateSelector to display different item templates for different types. For example you could have the following ObservableCollection as the ItemsSource:
Header
Contact info
Mobile number1
Mobile number2
Header
Contact info
Mobile number
etc.
Related
I have a WPF application that I try to code using MVVM.The goal is to make something like a notification center, that lists different types of data.
To do this, I want to fill a ListView on the main page with different ViewModels. One ViewModel for each type of data.
The problem is:
When I put a (not a list) ViewModel in my ListView, it works fine. But if I put a list in my ListView, the program crashes on startup. I need the ListView to take a list (ObservableCollection perhaps) of mixed ViewModels.
I receive the error “Items collection must be empty before using ItemsSource.” at a seemingly random location in my code. Completely removing the code where the exception appears just causes it to show somewhere else.
I have the following:
C#:
public class MainViewModel : ObservableObject
{
private List<IPageViewModel> _items;
public MainViewModel()
{
_items = new List<IPageViewModel>
{
new StatusViewModel(),
new SettingsViewModel(),
new OverviewViewModel()
};
}
public List<IPageViewModel> Items => _items ?? (_items = newList<IPageViewModel>());
}
XAML:
<Window x:Class="InfoCenter.Views.Main.MainView"
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:test="clr-namespace:InfoCenter.Views.Test"
xmlns:main="clr-namespace:InfoCenter.Views.Main"
xmlns:views="clr-namespace:InfoCenter.Views"
xmlns:settings="clr-namespace:InfoCenter.Views.Settings"
xmlns:status="clr-namespace:InfoCenter.Views.Status"
xmlns:overview="clr-namespace:InfoCenter.Views.Overview"
mc:Ignorable="d"
Title="MainView" Height="450" Width="500"
MaxWidth="1920"
WindowStyle="None" Loaded="MainViewLoaded"
SizeChanged="MainViewSizeChanged"
PreviewKeyDown="OnPreviewKeyDown"
GotFocus="OnGotFocus"
Closing="OnClosing"
ResizeMode="NoResize"
d:DataContext="{d:DesignInstance main:MainViewModel}">
<Window.Resources>
<DataTemplate DataType="{x:Type overview:OverviewViewModel}">
<overview:OverviewView />
</DataTemplate>
<DataTemplate DataType="{x:Type status:StatusViewModel}">
<status:StatusView />
</DataTemplate>
<DataTemplate DataType="{x:Type settings:SettingsViewModel}">
<settings:SettingsView />
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="24" />
<RowDefinition Height="*" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="24" />
</Grid.ColumnDefinitions>
<Button Command="{Binding ButtonClickCommand}" CommandParameter="Minimize" Grid.Row="0" Grid.Column="1">
<Image Source="/Resources/arrow-down-1.png"></Image>
</Button>
<ListView ItemsSource="{Binding Items}" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" ScrollViewer.HorizontalScrollBarVisibility="Hidden" PreviewMouseWheel="OnPreviewMouseWheel" ScrollViewer.VerticalScrollBarVisibility="Hidden">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="{Binding Path=Items.Header}" />
<ContentControl Grid.Row="1" Grid.Column="0" Content="{Binding}" />
</Grid>
</ListView>
<StatusBar FlowDirection="RightToLeft" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
<Image Width="24" Height="24" Source="{Binding ConnectionIcon}" />
</StatusBar>
</Grid>
</Window>
I really hope that you can help. I have been trying to fix it the whole day!
You have put one thing in the ListView contents here: A Grid control. Don't do that. There are two ways to populate a ListView in XAML: Bind ItemsSource or put items inside the content of the ListView element. You can't do both, and you did both, so it threw an exception.
Here's the ItemsSource version.
<ListView
ItemsSource="{Binding Items}"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
PreviewMouseWheel="OnPreviewMouseWheel"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
/>
I'm not certain what that Grid is for; you may have to find somewhere else to put it.
But my guess is that want it to be used to display the items. We can do that by making it into an ItemTemplate. I'm a little confused by it, though: What is Items.Header? Items is a List, which has no Header property. Does IPageViewModel have a Header property? For the moment I'll assume that's the case; let me know if I'm mistaken.
<ListView
ItemsSource="{Binding Items}"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
PreviewMouseWheel="OnPreviewMouseWheel"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
>
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label
Grid.Row="0"
Grid.Column="0"
Content="{Binding Header}"
/>
<ContentControl
Grid.Row="1"
Grid.Column="0"
Content="{Binding}"
/>
</Grid>
<DataTemplate>
</ListView.ItemTemplate>
</ListView>
Based on the error I would recommend to change your XAML as was mentioned earlier in "Items collection must be empty before using ItemsSource."
Try this XAML:
<ListView ItemsSource="{Binding Items}" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" ScrollViewer.HorizontalScrollBarVisibility="Hidden" PreviewMouseWheel="OnPreviewMouseWheel" ScrollViewer.VerticalScrollBarVisibility="Hidden">
<ListView.View>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="{Binding Path=Items.Header}" />
<ContentControl Grid.Row="1" Grid.Column="0" Content="{Binding}" />
</Grid>
</ListView.View>
</ListView>
Hope it will be helpful!
I am currently in the process of making a 'Preferences' window in my C# WPF program.
The aim of this window is to have a ListView on the left, and a list of tweakable controls on the right.
Each item in the ListView directly corresponds to a Grid that contains all of the controls under the selected item's content.
Once the item in the ListView is changed, the current grid's visibility must be collapsed, and the grid that corresponds to the item selected's visibility must be changed to visible.
I thought that DataBinding might work for this, however I have no idea how to use it. Could someone please inform me how to implement this feature?
I have only one grid at the moment. The whole window looks like this:
<Window x:Class="DarkOrbit_Skill_Price_Calculator.DarkOrbit_Skill_Price_Calculator___Preferences"
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:DarkOrbit_Skill_Price_Calculator"
mc:Ignorable="d"
Title="DarkOrbit Skill Price Calculator - Preferences" Height="360" Width="640" WindowStartupLocation="CenterScreen" WindowStyle="ToolWindow">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ListView Name="ListView_PreferenceOption" Width="150" Margin="5" SelectionChanged="SelectionChanged_ListView_PreferenceOption">
<ListViewItem IsSelected="True">
<StackPanel Orientation="Horizontal">
<Image Source="Images\Installing Updates.png" Height="35"/>
<TextBlock Text="Update" FontSize="14" FontFamily="Segoe UI" VerticalAlignment="Center" Margin="5"/>
</StackPanel>
</ListViewItem>
</ListView>
<Grid Margin="5" Name="Grid_Update" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Label Content="Update Version Architecture" VerticalAlignment="Center"/>
<ComboBox IsReadOnly="True" Width="100" Margin="5">
<ComboBoxItem Content="64-Bit"/>
<ComboBoxItem Content="32-Bit" IsSelected="True"/>
</ComboBox>
</StackPanel>
</Grid>
</Grid>
</Window>
I have absolutely no clue as to how to swap the grid depending on the index selected.
You can bind the visibility of each grid to the selected state of its corresponding list item by referencing the ListViewItem element. Something like this:
<Grid>
<Grid.Resources>
<BooleanToVisibilityConverter x:Key="Converter" />
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ListView Width="150" Margin="5">
<ListViewItem IsSelected="True" x:Name="One">
<TextBlock Text="Update" FontSize="14" FontFamily="Segoe UI"
VerticalAlignment="Center" Margin="5"/>
</ListViewItem>
<ListViewItem IsSelected="False" x:Name="Two">
<TextBlock Text="Foo" FontSize="14" FontFamily="Segoe UI"
VerticalAlignment="Center" Margin="5"/>
</ListViewItem>
</ListView>
<Grid Margin="5" Grid.Column="1"
Visibility="{Binding IsSelected, ElementName=One, Converter={StaticResource Converter}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Label Content="Update Version Architecture" VerticalAlignment="Center"/>
<ComboBox IsReadOnly="True" Width="100" Margin="5">
<ComboBoxItem Content="64-Bit"/>
<ComboBoxItem Content="32-Bit" IsSelected="True"/>
</ComboBox>
</StackPanel>
</Grid>
<Grid Margin="5" Grid.Column="1"
Visibility="{Binding IsSelected, ElementName=Two, Converter={StaticResource Converter}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Label Content="Update Something Else" VerticalAlignment="Center"/>
<ComboBox IsReadOnly="True" Width="100" Margin="5">
<ComboBoxItem Content="64-Bit"/>
<ComboBoxItem Content="32-Bit" IsSelected="True"/>
</ComboBox>
</StackPanel>
</Grid>
</Grid>
For those who are having the same predicament and want to use C# code to make this work, I eventually thought of the following code:
StackPanel[] allGrids = { Grid_1, Grid_2, Grid_3, Grid_4, ... }; //Replace StackPanel with the
//type of control you are using, e.g. Grid or WrapPanel.
foreach (StackPanel grid in allGrids)
{
grid.Visibility = Visibility.Collapsed; //collapse all grids
}
allGrids[(your listview/other control).SelectedIndex].Visibility = Visibility.Visible;
//make the grid you need visible
I've got a XAML page which is broken down with a grid as follows:
<Grid Background="Green">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
</Grid>
The first and third row contain a TextBlock each and are set to auto-resize to their height and the ListView is contained in the middle row and it is suppose to stretch within the area.
The ListView appears to be resized based on the number of items rather than the available visible area that should be allocated to the middle row.
This has 2 side effects:
I can't scroll to view the other items
It pushes the TextBlock in the third row out of the screen.
If I set a specific height on the ListView, it works as expected but I want my ListView to use the entire area of the screen between the top and bottom rows.
It displays as expected in the IDE, but no data is loaded but I can clearly see my top and bottom row (in green) and I can see the ListView is stretched between these 2 rows.
I've used this numerous times in the past but with a universal app for Windows 10, so I'm wondering if this is a new behaviour I'm not aware of or is this a bug?
This is full code without the DataTemplate for clarity sake. Just to be clear, my DataTemplate is displaying correctly, but I just can't scroll as there is no scrollbar since the listview is stretched based on the items, rather than being restricted to the available area of the middle row.
<Grid Background="Green">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Top Row" />
<ListView ItemsSource="{Binding Items}"
Grid.Row="1"
Background="Red">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
....
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<TextBlock Text="bottom row" Grid.Row="2"/>
</Grid>
You need to wrap your ListView in a ScrollView. This will fill the empty area and add a scroll bar as the list overflows the empty area.
I figured out the problem. It isn't a change in behaviour or a bug!
As someone mentioned that they tried to reproduce the problem and couldn't, I decided to do the same.
When I put my grid and ListView directly on the MainPage, I couldn't reproduce it.
When I put my grid and ListView on a sub-page (i.e. GridPage) and loaded it into the frame contained on the MainPage, I couldn't reproduce it
and that's when the penny dropped!!
In my code, I used (for the first time) a SplitView and this SplitView was contained in a grid with 2 rows and stupidly, both rows were set to "Auto" when I should have set the first one to Auto for my hamburger menu, logo and title and the second one should have been set to '*'.
The second I changed my second row to '*', the problem got sorted. It had nothing to do with the Grid Page which contained the grid I originally posted problem with.
<Grid Background="{ThemeResource FocusVisualWhiteStrokeThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
Here is the full code:
<Grid Background="{ThemeResource FocusVisualWhiteStrokeThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Background="White"
Grid.Row="0"
Grid.Column="0"
Margin="0,10,0,10">
<ToggleButton Style="{StaticResource SymbolButton}"
Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
FontSize="{ThemeResource ControlContentThemeFontSize}"
Command="{Binding HamburgerCommand}" >
<FontIcon x:Name="Hamburger"
FontFamily="Segoe MDL2 Assets"
Glyph=""
Foreground="#ff6600" />
</ToggleButton>
</Border>
<Border Background="White" Grid.Row="0"
Grid.Column="1" Margin="10,0,0,0">
<Image Stretch="Fill" Source="{Binding SelectedSection,
Converter={StaticResource SectionImageConverter}}"
Height="20" Width="20" />
</Border>
<Border Background="White"
Grid.Row="0"
Grid.Column="2"
Margin="10,0,0,0">
<TextBlock x:Name="Header" Text="{Binding SelectedSection,
Converter={StaticResource
SectionTitleConverter}}"
Style="{StaticResource TagLineTextStyle}"
Foreground="#ff6600"
VerticalAlignment="Center"
Margin="10,0,0,0"/>
</Border>
</Grid>
<SplitView x:Name="Splitter"
IsPaneOpen="{Binding IsPageOpen}"
DisplayMode="Inline"
Grid.Row="1">
<SplitView.Pane>
<ListBox x:Name="SectionControl" SelectionMode="Single"
ItemsSource="{Binding Sections}"
HorizontalAlignment="Left"
Background="White"
BorderThickness="0"
VerticalAlignment="Top"
SelectedItem="{Binding
SelectedSection, Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Converter={StaticResource
SectionImageConverter}}"
Height="17" Width="17"/>
<TextBlock Text="{Binding
Converter={StaticResource
SectionTitleConverter}}"
Margin="20,0,0,0"
Foreground="#ff6600" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="SelectionChanged">
<Core:InvokeCommandAction Command="{Binding
ItemClickCommand}"
CommandParameter="{Binding SelectedSection}" />
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</ListBox>
</SplitView.Pane>
<SplitView.Content>
<Frame x:Name="SectionFrame"/>
</SplitView.Content>
</SplitView>
</Grid>
Thanks again for the feedback/help. Much appreciated!
I have a .NET 4.0 WPF application using the MVVM pattern and I've been unable to achieve the desired outcome on one of the screens (UserControl as View). I have stripped down most of the page to show the core of the problem. The page consists of a grid with three rows and one column. The first row contains header text and the last row contains a Save button. The middle row contains a grid with one row and column and displays an ObservableCollection in an ItemsControl with a data template of a custom user control. There are ten items in the collection and I want them to display in two columns and five rows so I have a WrapPanel as an ItemsPanelTemplate.
I want the ItemsControl to scroll within the available space but it is expanding to the size of content and most of it is being cropped off the bottom of the page.
I am listing the XAML for user control the ObservableCollection uses as a data template and the XAML for the main page below that. Any help is greatly appreciated.
<UserControl x:Class="OIL.UserControls.ShopNotes.ShopNoteComponent"
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"
mc:Ignorable="d"
d:DesignHeight="120" d:DesignWidth="150">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" Width="140" Margin="5,5,5,5" HorizontalAlignment="Center" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1" CornerRadius="5">
<StackPanel Width="120" Margin="0,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Top" Orientation="Vertical">
<Image Height="25" Width="30" HorizontalAlignment="Left" Source="/OIL;component/Images/BlueCam.png">
<Image.ToolTip>
<Image Source="{Binding Path=ToolTipImagePath}" />
</Image.ToolTip>
</Image>
<Label Style="{DynamicResource LargeText}" Content="{Binding Path=ComponentTitle}" />
<CheckBox Width="80" Margin="0,5,0,5" HorizontalAlignment="Left" Style="{DynamicResource NormalText}" Content=" Mandatory?"
IsChecked="{Binding Path=ComponentMandatory, Mode=TwoWay}"
IsEnabled="{Binding Path=ComponentSelected}" />
<CheckBox Width="15" Margin="0,5,0,5" HorizontalAlignment="Center"
IsChecked="{Binding Path=ComponentSelected, Mode=TwoWay}" />
</StackPanel>
</Border>
</Grid>
And here is the main XAML page:
<UserControl x:Class="OIL.View.ConfiguratorViews.Configurator_ShopNotes_Tab"
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:igWPF="http://infragistics.com/Editors"
xmlns:uc="clr-namespace:OIL.UserControls.ShopNotes"
mc:Ignorable="d"
d:DesignHeight="570" d:DesignWidth="866">
<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<DataTemplate x:Key="ShopNotesComponentsTemplate">
<uc:ShopNoteComponent />
</DataTemplate>
</UserControl.Resources>
<Border Margin="10" CornerRadius="13" BorderThickness="3" BorderBrush="#FF666666">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
<Button Height="30" Width="75" Margin="10,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Background="{x:Null}"
Command="{Binding Path=AddNewTemplateCommand}"
Content="Add" />
<Button Height="30" Width="75" Margin="10,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Background="{x:Null}"
Command="{Binding Path=EditTemplateCommand}"
Content="Edit" />
<Grid Margin="10,5,0,5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Visibility="{Binding Path=IsNewTemplate, Converter={StaticResource BooleanToVisibilityConverter}}">
<TextBox Height="30" Width="250" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{DynamicResource NormalText}" Text="{Binding Path=TemplateDescription}" />
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Visibility="{Binding Path=IsEditedTemplate, Converter={StaticResource BooleanToVisibilityConverter}}">
<igWPF:XamComboEditor Name="cmbShopNotesTemplate" Height="30" HorizontalAlignment="Left" VerticalAlignment="Center"
ItemsSource="{Binding Path=ShopNoteTemplates, Mode=TwoWay}"
DisplayMemberPath="CONFIGURATION_DESC"
SelectedItem="{Binding Path=SelectedShopNoteTemplate, ValidatesOnDataErrors=True}"
Value="Select Shop Notes Template"
NullText="Select Shop Notes Template"
IsEditable="True">
</igWPF:XamComboEditor>
</StackPanel>
</Grid>
</StackPanel>
<Grid Grid.Row="1" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Height="30" Margin="0,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{DynamicResource NormalText}" Content="* Hover over camera icon to view Shop Note component" />
<ItemsControl Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left"
ItemsSource="{Binding Path=ShopNoteComponents, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
ItemTemplate="{StaticResource ShopNotesComponentsTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Width="300" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
<Button Grid.Row="2" Grid.Column="0" Height="30" Width="150" Margin="10,10,0,10" HorizontalAlignment="Left" VerticalAlignment="Center"
Background="{x:Null}"
Command="{Binding Path=SaveTemplateCommand}"
Content="Save" />
</Grid>
</Border>
EDIT: Changed question title as I have removed the ScrollViewer between starting the question and actually posting it. Also, noticed the Save button was in the inner grid rather than outer grid so I have corrected that (no change in rendering).
An ItemsControl does not have its own ScrollViewer like a ListBox. You can either replace you ItemsControl with a ListBox, or simply wrap it in a ScrollViwer, being careful to move the Grid.Row and Grid.Column settings like this:
<ScrollViewer Grid.Row="1" Grid.Column="0">
<ItemsControl HorizontalAlignment="Left" ItemsSource="{Binding Path=Items,
UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
ItemTemplate="{StaticResource ShopNotesComponentsTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Width="300" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
I have a problem scrolling vertically within a data bound pivot page (WP 7.1).
I have tried the different solutions posted here and on MSDN, but none of them seem to work for me..
I have a list
of News objects in an ObservableCollection that I am displaying in a pivot page. So far so good...
I want to be able to scroll the main text of the news item, but have the menu and headline stationary on the page.
I have tried making a grid and surrounding the scrollable content by a Listbox and now a ScrollViewer, but I am not able to scroll on the page.. When I try scrolling, I can scroll a couple of lines of text, and then the text reverts to the original position. Very frustrating!!!
The code I have tried is this:
<!--Pivot Control-->
<controls:Pivot x:Name="PivotNews"
Grid.Row="2"
ItemsSource="{Binding NewsCollection}" >
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<!--<TextBlock Text="Seneste nyheder" />-->
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:Pivot.ItemTemplate>
<DataTemplate>
<StackPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<!--<RowDefinition Height="*" />-->
</Grid.RowDefinitions>
<Grid x:Name="HeaderLine"
Grid.Row ="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding ImageUri}"
Grid.Column="0"
Height="150"/>
<TextBlock Text="{Binding Header}"
FontWeight="ExtraBold"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
TextWrapping="Wrap"
Grid.Column="1"
Margin="10,0,0,10"/>
</Grid>
<ScrollViewer x:Name="ScrollViewerNews" Grid.Row="1">
<StackPanel>
<TextBlock Text="{Binding SubHeader}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontWeight="Bold"
TextWrapping="Wrap" />
<TextBlock Text="{Binding MainText}"
TextWrapping="Wrap" />
</StackPanel>
</ScrollViewer>
</Grid>
</StackPanel>
</DataTemplate>
</controls:Pivot.ItemTemplate>
</controls:Pivot>
Just remove first StackPanel in your ItemTemplate.
When you use StackPanel, it has it's own height, that does not depend on Page height, and row height value "*" tries to fit in the available space, that is in this case bigger, than the pages height.