We Keep Coding

Setting VirtualizingStackPanel.IsVirtualizing in a Windows 8.1 Store App

I have a XAML page in a Windows 8.1 Store App. I set the data context for a ListView but I initially have it collapsed. What I am trying to do is toggle the visibility of some of the elements in the ListView before making it visible. But it doesn't load them unless it becomes visible. So, to forced it to load the items, I am trying to set "IsVirtualizing" to false so that I don't have to worry about it (and I don't mind the hit in performance since I won't have that many items). But for all the examples I look at, all I get is
The property "IsVirtualizing" does not have an accessible setter.
Not sure what is going on here.
Here is the relevant piece of code with the other contents stripped out.
<common:LayoutAwarePage
x:Class="FlashMe.DeckView"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:FlashMe"
xmlns:common="using:FlashMe.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
>
<ScrollViewer x:Name="deckScrollViewer" Grid.Row="1" VerticalScrollMode="Disabled" HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" Margin="0,15,0,0">
<StackPanel x:Name="deckStackPanel" Orientation="Horizontal">
<Grid Width="100" x:Name="MarginBuffer" />
<ListView x:Name="cardsListViewDisplay" Visibility="Collapsed" SelectionMode="None" Width="500" ItemsSource="{Binding Path=FlashCardsAsList}" VirtualizingStackPanel.IsVirtualizing="False">
<ListView.ItemTemplate>
<DataTemplate>
<Border>
<StackPanel Orientation="Vertical" Width="490" Height="400" RightTapped="FlashCardRightClicked">
<Grid Width="490" Height="200" Background="Gainsboro">
<TextBlock Text="{Binding Path=Front}"
Foreground="Black"
Style="{StaticResource GroupHeaderTextStyle}"
Margin="4,0,4,4"
FontWeight="SemiBold"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextWrapping="Wrap"
MaxWidth="410"/>
</Grid>
<Grid Width="500" Height="200" Background="{Binding ElementName=deckStackPanel, Path=DataContext.DeckColorBrush}">
<TextBlock Text="{Binding Path=Back}"
Foreground="White"
Style="{StaticResource GroupHeaderTextStyle}"
Margin="4,0,0,4"
FontWeight="SemiBold"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextWrapping="Wrap"
MaxWidth="410"/>
</Grid>
</StackPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</ScrollViewer>
</common:LayoutAwarePage>

In Windows Store Apps, the IsVirtualizing property is read-only.
From the Remarks section on the VirtualizingStackPanel.IsVirtualizingProperty page on MSDN:
VirtualizingStackPanel.IsVirtualizing is an atypical attached property
because it does not have a Set accessor, and thus is not really a XAML
attached property with a markup usage. Instead,
VirtualizingStackPanel.IsVirtualizing functions as a sentinel whereby
child elements can query the VirtualizingStackPanel parent, and
determine whether virtualization is being used. ...

DependencyProperty in Windows Runtime, XAML values appear empty

I have a simple UserControl in a XAML Windows RT app. The DependencyProperty appears to be set just fine, and breakpoints in the code show the target property of 'TwitterMessage' gets the correct object at runtime, after the 'IsLoaded' event. The problem is, the binding values inside the UserControl's child controls are empty when the XAML is rendered. It's like its ignoring the values of the TwitterMessage property. Any ideas? Intellisense seems to think I'm doing it right as it autocompletes the bindings in the markup.
The Usercontrol is given a simple invocation like so:
<local:TwitterMessageUserControl TwitterMessage="{Binding Message}" Grid.Column="2" />
UserControl Markup is as follows:
<UserControl
x:Class="TwitterMessageUserControl"
...
x:Name="root">
<Border Height="85" Width="400" BorderBrush="{ThemeResource ApplicationSecondaryForegroundThemeBrush}" BorderThickness="1" >
<StackPanel Background="{ThemeResource AppBarItemForegroundThemeBrush}" Orientation="Horizontal">
<Image HorizontalAlignment="Left" Height="73" x:Name="Avatar" VerticalAlignment="Top" Width="73" Margin="10,5,0,0" Source="{Binding ElementName=root, Path=TwitterMessage.Tweet.AuthorAvatarUrl}"/>
<StackPanel Margin="15,0,0,0">
<TextBlock HorizontalAlignment="Left" x:Name="TweetText" TextWrapping="Wrap" Text="{Binding ElementName=root, Path=TwitterMessage.Tweet.Message, Mode=OneWay}" VerticalAlignment="Top" Foreground="Black" Width="300" Margin="0,10,0,0" FontSize="12"/>
<TextBlock TextWrapping="Wrap" Text="— #someone via Twitter" x:Name="TweetFromText" Foreground="Black" Margin="0,5,0,0"/>
</StackPanel>
</StackPanel>
</Border>
And codebehind is as follows:
public sealed partial class TwitterMessageUserControl : UserControl
{
public static readonly DependencyProperty TwitterMessageProperty =
DependencyProperty.Register("TwitterMessage", typeof(TweetMessage), typeof(TwitterMessageUserControl), new PropertyMetadata(null));
public TweetMessage TwitterMessage
{
get { return (TweetMessage)GetValue(TwitterMessageProperty); }
set { SetValue(TwitterMessageProperty, value); }
}
public TwitterMessageUserControl()
{
this.InitializeComponent();
this.Loaded += TwitterMessageUserControl_Loaded;
}
void TwitterMessageUserControl_Loaded(object sender, RoutedEventArgs e)
{
DataContext = this;
}
}

I recreated the app quickly. When running the app I noticed this error in the debug output:
Error: BindingExpression path error: 'Message' property not found on
'App4.TwitterMessageUserControl'. BindingExpression: Path='Message'
DataItem='App4.TwitterMessageUserControl'; target element is
'App4.TwitterMessageUserControl' (Name='root'); target property is
'TwitterMessage' (type 'TweetMessage')
The problem is that when you do DataContext = this; in the TwitterMessageUserControl_Loaded it will look for a Message property on itself instead of the DataContext set in your view. Comment out this line and it should work fine:
Additionally if you want to simplify the bindings further in the UserControl XAML you can bind to the root in the Border, and then just bind without specifying the ElementName for every binding inside that, like this:
<Border DataContext="{Binding ElementName=root}" Height="85" Width="400" BorderBrush="{ThemeResource ApplicationSecondaryForegroundThemeBrush}" BorderThickness="1" >
<StackPanel Background="{ThemeResource AppBarItemForegroundThemeBrush}" Orientation="Horizontal">
<Image HorizontalAlignment="Left" Height="73" x:Name="Avatar" VerticalAlignment="Top" Width="73" Margin="10,5,0,0" Source="{Binding TwitterMessage.Tweet.AuthorAvatarUrl}"/>
<StackPanel Margin="15,0,0,0">
<TextBlock HorizontalAlignment="Left" x:Name="TweetText" TextWrapping="Wrap" Text="{Binding TwitterMessage.Tweet.Message}" VerticalAlignment="Top" Foreground="Black" Width="300" Margin="0,10,0,0" FontSize="12"/>
<TextBlock TextWrapping="Wrap" Text="— #someone via Twitter" x:Name="TweetFromText" Foreground="Black" Margin="0,5,0,0"/>
</StackPanel>
</StackPanel>
</Border>

Conditional rendering in DataTemplate

I'm following the Absolute Beginners Series on Channel9 and we've been told to implement some features that are not presented in the series, just as a challenge to learn something else.
What we have is a DataTemplate used to build some "tiles"-like controls and we use them in a LongListSelector.
What I need to do is to add a context menu to those tiles to perform some extra operations on them.
Now, one of those operations must be performed only on a certain type of tile, depending on which was the collection bound to the LongListSelector.
Here's the page code:
<phone:PhoneApplicationPage
x:Class="SoundBoard.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"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
mc:Ignorable="d"
d:DataContext="{d:DesignData SampleData/SampleData.xaml}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="SoundTileDataTemplate">
<Grid Name="TileGrid" Background="{StaticResource PhoneAccentBrush}" Margin="0,0,12,12">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="{Binding Path=LocalizedResources.PinToStartMessage, Source={StaticResource LocalizedStrings}}"/>
<toolkit:MenuItem IsEnabled="False" Header="{Binding Path=LocalizedResources.DeleteSoundMessage, Source={StaticResource LocalizedStrings}}"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<Grid VerticalAlignment="Top" HorizontalAlignment="Right" Width="40" Height="40" Margin="0,6,6,0">
<Ellipse Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3"/>
<Image Source="/Assets/AppBar/Play.png"></Image>
</Grid>
<StackPanel VerticalAlignment="Bottom">
<TextBlock Text="{Binding Title}" Margin="6,0,0,6"/>
</StackPanel>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot" Background="Transparent">
<MediaElement Name="AudioPlayer" Volume="1"/>
<phone:Pivot Title="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}">
<phone:PivotItem Header="{Binding Animals.Title}">
<phone:LongListSelector Margin="0,0,-12,0" ItemsSource="{Binding Animals.Items}" LayoutMode="Grid" GridCellSize="150,150" ItemTemplate="{StaticResource SoundTileDataTemplate}" SelectionChanged="LongListSelector_SelectionChanged">
</phone:LongListSelector>
</phone:PivotItem>
<phone:PivotItem Header="{Binding Cartoons.Title}">
<phone:LongListSelector Margin="0,0,-12,0" ItemsSource="{Binding Cartoons.Items}" LayoutMode="Grid" GridCellSize="150,150" ItemTemplate="{StaticResource SoundTileDataTemplate}" SelectionChanged="LongListSelector_SelectionChanged">
</phone:LongListSelector>
</phone:PivotItem>
<phone:PivotItem Header="{Binding Taunts.Title}">
<phone:LongListSelector Margin="0,0,-12,0" ItemsSource="{Binding Taunts.Items}" LayoutMode="Grid" GridCellSize="150,150" ItemTemplate="{StaticResource SoundTileDataTemplate}" SelectionChanged="LongListSelector_SelectionChanged">
</phone:LongListSelector>
</phone:PivotItem>
<phone:PivotItem Header="{Binding Warnings.Title}">
<phone:LongListSelector Margin="0,0,-12,0" ItemsSource="{Binding Warnings.Items}" LayoutMode="Grid" GridCellSize="150,150" ItemTemplate="{StaticResource SoundTileDataTemplate}" SelectionChanged="LongListSelector_SelectionChanged">
</phone:LongListSelector>
</phone:PivotItem>
<phone:PivotItem Header="{Binding CustomSounds.Title}">
<phone:LongListSelector Margin="0,0,-12,0" ItemsSource="{Binding CustomSounds.Items}" LayoutMode="Grid" GridCellSize="150,150" ItemTemplate="{StaticResource SoundTileDataTemplate}" SelectionChanged="LongListSelector_SelectionChanged">
</phone:LongListSelector>
</phone:PivotItem>
</phone:Pivot>
</Grid>
</phone:PhoneApplicationPage>
Now, what I need to do is to enable the second Toolkit:MenuItem only when the control is loaded in the last LongListSelector.
Is it possible to write a boolean expression in the item's IsEnabled that returns true if the items of the DataTemplate have the CustomSounds type or do I need to write two different DataTemplate to handle this situation?
EDIT:
I've changed some code
<phone:PhoneApplicationPage
x:Name="SBMainPage"
...
<toolkit:MenuItem IsEnabled="{Binding Path=IsDeleteEnabled, ElementName=SBMainPage}" Header="{Binding Path=LocalizedResources.DeleteSoundMessage, Source={StaticResource LocalizedStrings}}" Tap="DeleteSoundHandler"/>
but now the boolean value returned by IsDeleteEnabled property is never updated, so it takes the false that is given when the property is read the first time and it never changes it!

A converter will do what you want:
class TypeToBoolConverter :IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return value.GetType() == typeof(CustomSounds);
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
and that you can use:
<toolkit:MenuItem IsEnabled="{Binding ,Converter={StaticResource myTypeConverter}}" ...

Verify that IsDeleteEnabled adheres to INotifyPropertyChanged. Frankly that is what I do/have done by simply adding a status flag boolean on the Model View and hooking up page logic by binding.

ItemRealized event does not fire

I wanna create a infinite longlistselector, but my event ItemRealized does not fire. i have create view model so i can generate an observable collection, and everything sees to be working fine when i monitoring the main class, i'm sure that it is not empty, but my problem is that i can not populate the longlistselector
<phone:PhoneApplicationPage.Resources>
<vm:GoogleView x:Key="viewModel"/>
</phone:PhoneApplicationPage.Resources>
longlistselector
<phone:LongListSelector ItemRealized="m_ListBoxGoogle_ItemRealized" Name="m_ListGoogle" HorizontalAlignment="Center" Height="410" Margin="0,120,0,0"
ItemsSource="{Binding GoogleCollection}"
DataContext="{StaticResource viewModel}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Button Tag="{Binding GoogleID}" Style="{StaticResource NoVisualTextButton }" toolkit:TiltEffect.IsTiltEnabled="True" Click="OnListBoxItemClick" Margin="-10,0,0,0">
<StackPanel Orientation="Horizontal" Margin="0,3,0,0" Height="auto" Width="450">
<Border BorderThickness="1" Width="62" Height="62" BorderBrush="#00aef0" Background="#00aef0">
<Image Height="60" Width="60" Source="{Binding GoogleImagePath}"/>
</Border>
<StackPanel Width="350" HorizontalAlignment="Center" Margin="12,0,0,0" >
<TextBlock Text="{Binding GoogleDisplayName}" TextWrapping="NoWrap" Style="{StaticResource PanoramaItemTextStyle }" FontSize="24" />
<TextBlock Text="{Binding GoogleObjectType}" TextWrapping="NoWrap" Style="{StaticResource PanoramaItemTextStyle }" FontSize="20" />
</StackPanel>
</StackPanel>
</Button>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
i'm really stuck guys, please help me

Try these things for I believe its a binding issue:
Debug and put a breakpoint in the GoogleView constructor and verify
it is being instantiated.
If it is being instantiated verify the data you are binding to exists within the class.
If everything instantiated, try binding to the collection as TwoWay binding mode.
If that doesn't work try binding to the data in another control to verify things are working properly.

How to change the properties of a contextmenu in a datatemplate in WP7?

What I want
change the properties(e.g. background) of a context menu in a datatemplate in the runtime from the code behind.
What is the XAML
<DataTemplate x:Key="ListsDataTemplate">
<StackPanel x:Name="stackPanel" Margin="0,0,0,10">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="myMenu" IsFadeEnabled="False" IsZoomEnabled="False">
<toolkit:MenuItem x:Name="edit" Header="{Binding LocalStrings.bt_menu_Edit, Source={StaticResource LocalizedResources}}" Click="menuItemEdit_Click" />
<toolkit:MenuItem x:Name="postpone" Header="{Binding LocalStrings.bt_menu_Postpone, Source={StaticResource LocalizedResources}}" Click="menuItemPostpone_Click" />
<toolkit:MenuItem x:Name="email" Header="{Binding LocalStrings.bt_menu_Email, Source={StaticResource LocalizedResources}}" Click="menuItemEmail_Click" />
<toolkit:MenuItem x:Name="sms" Header="{Binding LocalStrings.bt_menu_Sms, Source={StaticResource LocalizedResources}}" Click="menuItemSMS_Click" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<ListBox
HorizontalAlignment="Left"
DataContext="{Binding}"
ItemTemplate="{StaticResource ListsDataTemplate}"
VerticalAlignment="Top"
Width="432"
Margin="0,81,0,0"
x:Name="myListBox">
</ListBox>

Add a Loaded="myMenu_Loaded" handler to myMenu, and in that handler declare var myMenu = (ContextMenu)sender;.
Since myMenu is in a DataTemplate and is a template for creating objects rather than the instance that will actually be used on the page, no field is auto-generated for it.