Animate LongListSelectorItem Foreground on Hold in Windows Phone - c#

I've been working my head a lot in the few past days on trying to acquire a nice foreground animation effect for the case of holding an item.
The Item template looks like this :
<DataTemplate>
<StackPanel toolkit:TiltEffect.IsTiltEnabled="True" Hold="OnLongListSelectorItemHold">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="edit" />
<toolkit:MenuItem Header="delete" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<TextBlock x:Name="SubjectTextBlock" Text="{Binding Subject}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Last modified :" Margin="15, 0, 5, 0" Foreground="LightGray" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock Text="{Binding LastModified}" Foreground="#989696" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
I have tried multiple approaches, but I haven't managed to get a result from any of them.
I came across this nice MSDN post which shows multiple examples, but none of them could be really match my case because, the TextBlock Foregrounds I want to animate, refer to TextBlocks, inside a DataTemplate so I have problems with accessing a specific control inside the template.
For example, I tried this approach :
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="ItemHoldAnimation">
<ColorAnimation Storyboard.TargetName="SubjectTextBlock"
Storyboard.TargetProperty="Foreground"
From="White" To="{StaticResource PhoneAccentColor}" Duration="0:00:04"/>
</Storyboard>
</phone:PhoneApplicationPage.Resources>
And then to fire it from the Hold event handler :
var storyboard = Resources["ItemHoldAnimation"] as Storyboard;
storyboard.Begin();
But it fails because TargetName="SubjectTextBlock" is not accessible because it is inside the DataTemplate...
I have also tried an approach I found for WPF with EventTriggers, like this :
<StackPanel toolkit:TiltEffect.IsTiltEnabled="True" Hold="OnLongListSelectorItemHold">
<StackPanel.Triggers>
<EventTrigger RoutedEvent="StackPanel.Hold">
<BeginStoryboard Storyboard="{StaticResource ItemHoldAnimation}"/>
</EventTrigger>
</StackPanel.Triggers>
...
</StackPanel>
but it gives COM exception...
MS.Internal.WrappedException: Error HRESULT E_FAIL has been returned from a call to a COM component. ---> System.Exception: Error HRESULT E_FAIL has been returned from a call to a COM component.
A lot just to animate font when the LongListSelector item is hold...
What is the approach on solving this issue?


You should define the storyboard inside the DataTemplate, also the target proeprty need to be modified because ColorAnimation work on a Color property not a brush. Finally IsZoomEnabled="False" need also to be set because otherwise the ContextMenu implementation take a snapshot of the element and show this static image while the context menu is open so the animation will not be visible (the alternative is to modify the source code of ContextMenu to delay the opening of the context menu after your animation is done)
Something like this should work:
<DataTemplate x:Key="dataTemplate">
<StackPanel toolkit:TiltEffect.IsTiltEnabled="True" Hold="OnLongListSelectorItemHold">
<StackPanel.Resources>
<Storyboard x:Name="ItemHoldAnimation">
<ColorAnimation Storyboard.TargetName="SubjectTextBlock"
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
From="White" To="{StaticResource PhoneAccentColor}" Duration="0:00:04"/>
</Storyboard>
<Storyboard x:Name="MenuClosedAnimation">
<ColorAnimation Storyboard.TargetName="SubjectTextBlock"
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
From="{StaticResource PhoneAccentColor}" To="White" Duration="0:00:04"/>
</Storyboard>
</StackPanel.Resources>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu IsZoomEnabled="False" Closed="ContextMenu_OnClosed">
<toolkit:MenuItem Header="edit" />
<toolkit:MenuItem Header="delete" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<TextBlock x:Name="SubjectTextBlock" Text="Test" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Last modified :" Margin="15, 0, 5, 0" Foreground="LightGray" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock Text="{Binding LastModified}" Foreground="#989696" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
and here is the hold method:
private void OnLongListSelectorItemHold(object sender, GestureEventArgs e)
{
FrameworkElement fe = sender as FrameworkElement;
var storyboard = fe.Resources["ItemHoldAnimation"] as Storyboard;
storyboard.Begin();
}
private void ContextMenu_OnClosed(object sender, RoutedEventArgs e)
{
ContextMenu eleme=sender as ContextMenu;
FrameworkElement fe = eleme.Owner as FrameworkElement;
var storyboard = fe.Resources["MenuClosedAnimation"] as Storyboard;
storyboard.Begin();
}

Related

How to bind a Button to a Slider and a TextBox in XAML

I have a ListView and one column of that ListView includes a Slider, a TextBox, and a Button. The Slider is binded to a Property (of type double) in my ViewModel. When I move the slider, the value in the TextBox is updated automatically. However, my Button does not work, yet. It is supposed to increment the value every time it is clicked. Does anyone have an idea how to add this functionality in XAML.
<GridViewColumn Width="345">
<GridViewColumnHeader Content="Wert" Command="{Binding SortCommand}" CommandParameter="Value" />
<GridViewColumn.CellTemplate>
<DataTemplate>
<DockPanel VerticalAlignment="Center" Margin="10">
<Slider Name="slValue" Value="{Binding Value, Mode=TwoWay}" Minimum="{Binding MinValue}" Maximum="{Binding MaxValue}" TickPlacement="BottomRight" TickFrequency="{Binding StepSize}" Width="205" />
<TextBox Text="{Binding ElementName=slValue, Path=Value, UpdateSourceTrigger=PropertyChanged}" DockPanel.Dock="Right" TextAlignment="Right" Width="40" />
<Button Name="IncrementValue" Width="40" Height="40" />
</DockPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
EDIT: Actually, I need to use a normal Button, not a ToggleButton. I just changed ToggleButton to Button.

You can use the buttons' EventTrigger to change the slider's value and the text box will be updated automatically.
<ToggleButton Name="Toggle" Width="40" Height="40" >
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Click" >
<BeginStoryboard>
<Storyboard>
<DoubleAnimation By="1" Duration="00:00:00" Storyboard.TargetName="slValue" Storyboard.TargetProperty="Value"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
You may handle the button's click event and amend the value of the button's sibling slider:
private void IncrementValue_Click(object sender, RoutedEventArgs e)
{
((((Button)sender).Parent as DockPanel).Children[0] as Slider).Value++;
}
Here I assume that the slider is the first element of the dock panel, if you change its position you should use another index at Children[0]

Name cannot be found in the name scope of 'Xceed.Wpf.Toolkit.BusyIndicator'

I am trying to achieve Text scrolling in BusyIndicator, using the bellow XAML. I am getting exception related to accessing TargetName. Can someone assist?
Code behind
// Locate Storyboard resource
Storyboard s = (Storyboard)TryFindResource("animation");
s.Begin(bsi_Indicator);
XAML code:
<xctk:BusyIndicator IsBusy="True" x:Name="bsi_Indicator">
<xctk:BusyIndicator.BusyContentTemplate>
<DataTemplate>
<StackPanel Margin="4">
<Canvas Name="canvas1" Height="32" ClipToBounds="True" VerticalAlignment="Top">
<TextBlock Name="ScrollText" FontFamily="Verdana" FontSize="12" Text="{Binding Path=DataContext.WaitText, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}" >
<TextBlock.Resources>
<Storyboard x:Key="animation" Storyboard.TargetProperty="(Canvas.Left)" RepeatBehavior="Forever" >
<DoubleAnimation Storyboard.TargetName="ScrollText" From="0" To="-50" Duration="0:0:10" />
</Storyboard>
</TextBlock.Resources>
</TextBlock>
</Canvas>
<ProgressBar Value="100" Height="20"/>
</StackPanel>
</DataTemplate>
</xctk:BusyIndicator.BusyContentTemplate>
<xctk:BusyIndicator.ProgressBarStyle>
<Style TargetType="ProgressBar">
<Setter Property="Visibility" Value="Collapsed"/>
</Style>
</xctk:BusyIndicator.ProgressBarStyle>
<ContentControl />
</xctk:BusyIndicator>
Error:
Additional information: 'ScrollText' name cannot be found in the name scope of 'Xceed.Wpf.Toolkit.BusyIndicator'.

I assume that your Storyboard is defined in the Window resources for example if that's your main control.
It can't find ScrollText because it's not in the scope of the Parent control which again might be Window it can be anything. It is also loaded in a BusyContentTemplate which might be different on how DataTemplate works with Xceed it might be lazy loaded so a possibility is that it is not there.
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
var dp = bsi_Indicator.BusyContentTemplate.LoadContent() as StackPanel;
var canvas = dp.Children[0] as Canvas;
var textBlock = canvas.Children[0] as TextBlock;
var sb = textBlock.Resources["animation"] as Storyboard;
sb.Begin(textBlock); // you can just call sb.Begin() too
}

Access DataTemplate controls in code behind

I have problem with this code:
<ListBox x:Name="lbInvoice" ItemsSource="{Binding ocItemsinInvoice}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<ToggleButton x:Name="btnInvoiceItem">
<StackPanel Orientation="Horizontal">
<ToggleButton x:Name="btnInvoiceQuantity" Content="{Binding Quantity}"/>
<TextBlock Text="{Binding Item.ItemName}" Width="175" Padding="7,5,0,0"/>
</StackPanel>
</ToggleButton>
<Popup x:Name="popQuantity" Closed="popQuantity_Closed" PlacementTarget="{Binding ElementName=btnInvoiceQuantity}" IsOpen="{Binding IsChecked,ElementName=btnInvoiceQuantity}">
<Grid>
<TextBlock x:Name="tbUnitPrice" Text="Unit Price"/>
<Button x:Name="btnClosePopup" Click="btnClosePopup_Click">
</Grid>
</Popup>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
In code behind in btnClosePopup click event I can't access to popup to close it and do some other changes on it.
I have tried to use FindName() method but it doesn't work for me
var template = lbInvoice.Template;
var myControl = (Popup)template.FindName("popQuantity", lbInvoice);
Please can you help and tell me how do I access to controls that inside DataTemplate in code behind?

You don't have to do it in code behind and if you change Popup.IsOpen in code it won't appear again as you'll lose you binding. You need to set IsChecked on ToggleButton to false and you can do it with EventTrigger
<Button Content="Close" x:Name="btnClosePopup">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetName=" btnInvoiceQuantity" Storyboard.TargetProperty="IsChecked">
<DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:0"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>

You have already to Open/Close this Popup in this line:
IsOpen="{Binding IsChecked, ElementName=btnInvoiceQuantity}"
As an alternative answer from #dkozl, you can close the Popup in such a way:
<Popup x:Name="popQuantity"
IsOpen="{Binding Path=IsChecked, ElementName=btnInvoiceQuantity}">
<Grid Width="200" Height="200" Background="Gainsboro">
<TextBlock Text="Unit Price" />
<ToggleButton x:Name="btnClosePopup"
IsChecked="{Binding Path=IsChecked, ElementName=btnInvoiceQuantity}"
Content="Close"
Width="100"
Height="30" />
</Grid>
</Popup>
Or you can directly specify a property IsOpen of Popup:
<ToggleButton x:Name="btnClosePopup"
IsChecked="{Binding Path=IsOpen, ElementName=popQuantity}" ... />
But in this case at the background color of Button will be in state of IsChecked="True". To avoid this, without creating a new Template for your Control, you can use a system style of flat button:
<ToggleButton x:Name="btnClosePopup"
Style="{StaticResource {x:Static ToolBar.ToggleButtonStyleKey}}" ... />

Can Someone Explain How the Grid Project works in Windows 8

I am looking at the windows 8 grid project that comes with VS2012 and trying to understand it. I don't know too much about XAML so I getting quite easily lost of where binding code is happening and such.
<Page.Resources>
<!--
Collection of grouped items displayed by this page, bound to a subset
of the complete item list because items in groups cannot be virtualized
-->
<CollectionViewSource
x:Name="groupedItemsViewSource"
Source="{Binding Groups}"
IsSourceGrouped="true"
ItemsPath="TopItems"
d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>
</Page.Resources>
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Horizontal scrolling grid used in most view states -->
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,0,0,6">
<Button
AutomationProperties.Name="Group Title"
Click="Header_Click"
Style="{StaticResource TextPrimaryButtonStyle}" >
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
<!-- Vertical scrolling list only used when snapped -->
<ListView
x:Name="itemListView"
AutomationProperties.AutomationId="ItemListView"
AutomationProperties.Name="Grouped Items"
Grid.Row="1"
Visibility="Collapsed"
Margin="0,-10,0,0"
Padding="10,0,0,60"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
ItemTemplate="{StaticResource Standard80ItemTemplate}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="7,7,0,0">
<Button
AutomationProperties.Name="Group Title"
Click="Header_Click"
Style="{StaticResource TextPrimaryButtonStyle}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>
<VisualStateManager.VisualStateGroups>
<!-- Visual states reflect the application's view state -->
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreenLandscape"/>
<VisualState x:Name="Filled"/>
<!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
<VisualState x:Name="FullScreenPortrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding">
<DiscreteObjectKeyFrame KeyTime="0" Value="96,137,10,56"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<!--
The back button and title have different styles when snapped, and the list representation is substituted
for the grid displayed in all other view states
-->
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
The first area I don't understand is this
<CollectionViewSource
x:Name="groupedItemsViewSource"
Source="{Binding Groups}"
IsSourceGrouped="true"
ItemsPath="TopItems"
d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>
I don't get where this Source="{Binding Groups}" is actually coming from (I am not even sure how to find the code F12 does not work).
Same with the d:Source not sure 100% what is going on there as well.
The next part is in the gridview and again with the binding.
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">
I see that Items Source is using that groupItemsViewSource but not sure how it is parsing the data into the grid look but not sure how.
The next part I don't get is how does it figure out what layout to use. I see this in the comments
<!-- Horizontal scrolling grid used in most view states -->
<!-- Vertical scrolling list only used when snapped -->
I am sure if I look even deeper into it I will find more I don't understand but maybe when I understand this stuff I will understand more(especially once I understand this binding stuff)

I don't get where this Source="{Binding Groups}" is actually coming
from (I am not even sure how to find the code F12 does not work).
Note at the top of the page:
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
which sets the context for the binding on that page to the DefaultViewModel property of the page. In the code behind for the page you'll see
this.DefaultViewModel["Groups"] = sampleDataGroups;
where sampleDataGroups is a list (IEnumerable) of groups (type SampleDataGroup) returned from a method call. Now you also have,
<CollectionViewSource
x:Name="groupedItemsViewSource"
Source="{Binding Groups}"
IsSourceGrouped="true"
ItemsPath="TopItems"
d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>
and here "Groups" refers to the key that indexes the DefaultViewModel, so it's going to use that subset of the DefaultViewModel. Furthermore, each item in the CollectionViewSource itself contains a collection, and those collections are surfaced to the binding engine at whatever property ItemsPath specifies, namely, TopItems.
Now from the GridView binding:
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
you noted that the data is coming from that specific instance of a CollectionViewSource named groupedItemsViewSource (which in this case is equivalent to this.DefaultViewModel["Groups"]). If you look at the header template a bit later, you'll see:
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
...
The Title binding refers to the property of an element in the ItemsSource collection, so this.DefaultViewModel["Groups"][i].Title
ItemTemplate="{StaticResource Standard250x250ItemTemplate}" in the GridView binding governs how the inner collection items are displayed. You'll have to crack that style open (in Common/StandardStyles.xaml) to see that it references properties of a SampleDataItem, essentially leading to this.DefaultViewModel["Groups"][i].TopItems[j].
The d: prefix refers to design time data (well, a namespace that includes classes that manage it); it's what allows you do see the data in the designer without running your application. So at design time the data you are seeing actually comes from SampleDataSource.AllGroups.
As for the comments about scrolling, that gets into the VisualStateManager, each state essentially being a different take on the UI; states transition via a bit of code you can find inside of LayoutAwarePage.cs look for GotoState.

I don't get where this Source="{Binding Groups}" is actually coming from
Bindings target the DataContext of the element -- to find it, you typically scan up the XAML to find where DataContext was last set. So in this case, it must either set on the Page element somehow. (The DataContext can also be set from code-behind, although I'd be surprised if that were the case in the VS sample project.)
Same with the d:Source not sure 100% what is going on there as well.
The d prefix is referring to design-time data. Check for the SampleDataSource, that's where you'll find the design-time instance of AllGroups.
not sure how it is parsing the data into the grid
The Grid auto-generates its columns based on the properties of its row data type.

want a silverlight listbox with vertical marquee like effect

i want a silverlight listbox whose items are automatic scrollable (like a vertical marquee)

You might try using an ItemsControl setting the ItemsControl.ItemPanel to a StackPanel with a TranslateTransform applied on it. Then you can have a running Storyboard that adjusts the position of the Y coordinate of the Translate Transform.
EDIT: Example
<Border BorderBrush="Black" BorderThickness="2"
Height="100" Width="100"
HorizontalAlignment="Left" VerticalAlignment="Top" >
<Border.Clip>
<RectangleGeometry Rect="0,0,100,100" />
</Border.Clip>
<ItemsControl ItemsSource="{StaticResource Collection}">
<ItemsControl.RenderTransform>
<TranslateTransform x:Name="Transform" />
</ItemsControl.RenderTransform>
<i:Interaction.Triggers>
<i:EventTrigger>
<ei:ControlStoryboardAction
Storyboard="{StaticResource TransformMove}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ItemsControl>
</Border>
Then include this Storyboard in your control resources:
<Storyboard x:Key="TransformMove" Storyboard.TargetName="Transform" Storyboard.TargetProperty="Y">
<DoubleAnimation From="-100" To="100" Duration="0:0:10"
RepeatBehavior="Forever"/>
</Storyboard>

Categories