Storyboard inside datatemplate Windows 8.1 - xaml

Is it possible to Begin a storyboard from code behind(.cs file) which is inside a datatemplate. The Below code is not working please advice me.
<HubSection Width="800" x:Name="Section2" Header="Section 2" Foreground="Black">
<DataTemplate x:Name="DataTemplateNotificaiton" >
<Grid Background="White" Width="700" Height="500" Margin="-20" >
<Canvas x:Name="canvas" Margin="0,302,0,-302" Canvas.ZIndex="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" RenderTransformOrigin="0.5,0.5" >
<Canvas.Resources>
<Storyboard x:Name="TileAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="canvas">
<EasingDoubleKeyFrame KeyTime="0" Value="-1.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-252"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Canvas.Resources>
<Canvas.RenderTransform>
<CompositeTransform/>
</Canvas.RenderTransform>
<TextBlock x:Name="panel1" Margin="30,30,0,0" Text="sdasdasdasd" FontFamily="Segoe WP Light" FontSize="32" >
<TextBlock.RenderTransform>
<TranslateTransform/>
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock x:Name="panel2" Margin="30,7,0,0" TextWrapping="Wrap" Text="adasdasdasdasd" FontFamily="Segoe WP Light" FontSize="22" Canvas.Top="98">
<TextBlock.RenderTransform>
<TranslateTransform/>
</TextBlock.RenderTransform>
</TextBlock>
</Canvas>
</Grid>
</DataTemplate>
</HubSection>
c# code behind:
Storyboard anim = (Storyboard)FindName("TileAnimation");
anim.Begin();

Yes, but complicated and not recommended, when you want to keep your code readable.
What I recommend is, develop a userControl which contains everything what is currently in your Template, and then design your animations in that control.
You can easily add this new control in the datatemplate instead of the code above. That makes it also easier to test the control.
HTH-Oliver

Related

storyboard target not clear

Why the storyboard is fading my TextBox x:Name="WelcomeText" inside RelativePanel x:Name="WelcomeRelativePanelUserControl".
In my comprehension the storyboard target is
the FlipView x:Name="fvWelcome" inside the RelativePanel x:Name="fvWelcomeRelativePanel"
<RelativePanel x:Name="WelcomeRelativePanelUserControl" Background="#FF1F4E79" >
<TextBox x:Name="WelcomeText"
RelativePanel.AlignLeftWithPanel="True"
Margin="145,0,0,0"
Foreground="White"
FontFamily="Segoe UI"
IsReadOnly="True"
BorderBrush="#FF1F4E79"
BorderThickness="0"
HorizontalAlignment="Center"
FontSize="84"
TextWrapping="Wrap"
AcceptsReturn="True"
Background="#FF1F4E79"
Text="Welcome"/>
</RelativePanel>
The other control:
<RelativePanel x:Name="fvWelcomeRelativePanel">
<FlipView x:Name="fvWelcome"
RelativePanel.AlignBottomWithPanel="True">
<FlipView.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard x:Name="FlpVOpacity">
<DoubleAnimation
Storyboard.TargetName="fvWelcome"
Storyboard.TargetProperty="(FlipView.Opacity)"
AutoReverse="True"
From="0"
To="1"
Duration="0:0:4"
RepeatBehavior="1x"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</FlipView.Triggers>
<FlipView.ItemTemplate >
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition x:Name="Welcome" Height="0.3*"/>
<RowDefinition x:Name="GuestName" />
</Grid.RowDefinitions>
<TextBox x:Name="GuestNameTextBox"
Grid.Row="1"
IsReadOnly="True"
Foreground="White"
Margin="145,0,0,0"
FontFamily="Segoe UI"
BorderBrush="#FF1F4E79"
BorderThickness="0"
Text="{Binding}"
FontSize="84"
TextWrapping="Wrap"
AcceptsReturn="True"
Background="#FF1F4E79">
</TextBox>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</RelativePanel>
My fade effect is working well but why does the text of my TextBox x:Name="WelcomeText" also fade? It shouldn't. I don't understand why? And how can I forbid this effect on this textbox and make it run on the TextBox x:Name="GuestNameTextBox" in the second control fvWelcome
<RelativePanel x:Name="GeneralPanelGuest">
I resolved it just by putting this general relativePanel with 2 others RelativePanel for each of the 2 differents items that I didn't want to have the same behavior and by removing the grid inside the fliepView that I used to put the welcome above which was making inheritance
<RelativePanel x:Name="WelcomeRelativePanelUserControl" Background="#FF1F4E79" >
<TextBox x:Name="WelcomeText"
RelativePanel.AlignLeftWithPanel="True"
Margin="145,0,0,0"
Foreground="White"
FontFamily="Segoe UI"
IsReadOnly="True"
BorderBrush="#FF1F4E79"
BorderThickness="0"
HorizontalAlignment="Center" FontSize="84"
TextWrapping="Wrap" AcceptsReturn="True"
Background="#FF1F4E79"
Text="Welcome"
/>
<TextBlock x:Name="WelcomeTextException2"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.Below="WelcomeText"
Margin="215,0,0,0"
Foreground="White"
FontFamily="Segoe UI"
HorizontalAlignment="Center" FontSize="34"
/>
</RelativePanel>
<RelativePanel x:Name="relFvWelcome" RelativePanel.Below="WelcomeRelativePanelUserControl">
<FlipView x:Name="fvWelcome"
VerticalAlignment="Center"
Background="#FF1F4E79"
RelativePanel.AlignBottomWithPanel="True"
>
<FlipView.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard x:Name="FlpVOpacity">
<DoubleAnimation
Storyboard.TargetName="fvWelcome"
Storyboard.TargetProperty="(FlipView.Opacity)"
AutoReverse="True"
From="0" To="1" Duration="0:0:4"
RepeatBehavior="1x"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</FlipView.Triggers>
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
<FlipView.ItemTemplate >
<DataTemplate>
<TextBox x:Name="GuestNameTextBox"
Grid.Row="1"
IsReadOnly="True"
Foreground="White"
Margin="145,0,0,0"
FontFamily="Segoe UI"
BorderBrush="#FF1F4E79"
BorderThickness="0" Text="{Binding}"
FontSize="84"
TextWrapping="Wrap" AcceptsReturn="True"
Background="#FF1F4E79"
>
</TextBox>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</RelativePanel>
</RelativePanel>

Windows Store App - XAML - Why is the Textblock is bigger the StackPanel?

I have the below XAML and it does not do what I expect it to do.
<StackPanel Background="{Binding EwsColour}" Visibility="{Binding EwsVisibility}" HorizontalAlignment="Center" VerticalAlignment="Center" >
<TextBlock Text="EWS" Style="{StaticResource SubheaderTextBlockStyle}" VerticalAlignment="Top" FontWeight="SemiBold" HorizontalAlignment="Center" />
<TextBlock Text="18" Style="{StaticResource SubheaderTextBlockStyle}" FontWeight="SemiBold" FontSize="100" />
</StackPanel>
I end up with this
I don't understand why the TextBlock that has 18 in, is growing bigger then then StackPanel. Can anyone tell me why?
After seeing Chris W''s comment I checked the Style in generic.xaml.
<Style x:Key="SubheaderTextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
<Setter Property="FontSize" Value="26.667"/>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="LineHeight" Value="30"/>
</Style>
I had no idea that there was a LineHeight property. Overriding it so that its the same as the font size (or bigger actually creates a better UX) stops this from happening.
<StackPanel Background="{Binding EwsColour}" Visibility="{Binding EwsVisibility}" HorizontalAlignment="Center" VerticalAlignment="Center" >
<TextBlock Text="EWS" Style="{StaticResource SubheaderTextBlockStyle}" VerticalAlignment="Top" FontWeight="SemiBold" HorizontalAlignment="Center" />
<TextBlock Text="18" Style="{StaticResource SubheaderTextBlockStyle}" FontWeight="SemiBold" FontSize="100" LineHeight="110" />
</StackPanel>

hit is not Visible on a button in windows phone 8

I am making a button with a item template but when I click on Button its does not show that whether it is hit or not.
I want that it should look clicked like normal button.
I tried to set the ishitvisible property of the button but its not working.
Can anyone help ??
<Button Name="BtnSignUp" Grid.Row="3" VerticalAlignment="Top" Click="BtnSignUp_Click" >
<Button.Template>
<ControlTemplate>
<Border Margin="5,15,0,0" BorderThickness="2" BorderBrush="#866DA9">
<StackPanel Orientation="Horizontal" Background="#491776" IsHitTestVisible="True" >
<TextBlock Text="Sign Up Now -" Margin="35,5,0,0" FontSize="23" FontWeight="Medium"/>
<TextBlock Text=" it's free" Margin="0,5,35,10" FontSize="23" FontStyle="Italic" FontWeight="Normal" />
</StackPanel>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
As you said, you are not using Item Template. You override Control Template. So you cannot get the default pressed effects of button. But still you can add that using Visual State Managers or through triggers.
I have posted an example of how to adjust opacity on mouse over and pressed.
<Button Name="BtnSignUp" Grid.Row="3" VerticalAlignment="Top" Click="BtnSignUp_Click" >
<Button.Template>
<ControlTemplate>
<Border Margin="5,15,0,0" BorderThickness="2" BorderBrush="#866DA9">
<StackPanel x:Name="bor" Orientation="Horizontal" Background="#491776" IsHitTestVisible="True" >
<TextBlock Text="Sign Up Now -" Margin="35,5,0,0" FontSize="23" FontWeight="Medium"/>
<TextBlock Text=" it's free" Margin="0,5,35,10" FontSize="23" FontStyle="Italic" FontWeight="Normal" />
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="bor" Property="Opacity" Value="0.7"/>
</Trigger>
<Trigger Property="Button.IsPressed" Value="True">
<Setter Property="Opacity" TargetName="bor" Value="0.6"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>

How to change the item template of list box depending upon the Current Orientation in metro app?

Hi I am developing an metro app , my app works perfectly fine in landscape mode but now i want to make it compatible to Portrait mode also.
This is how i have defined students listbox :-
<ListBox x:Name="lstbxbStudents" Background="Transparent" Height="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" SelectionChanged="lstbxbStudents_SelectionChanged_1" HorizontalAlignment="Left" Width="Auto" Margin="4,50,0,122" Style="{StaticResource ListBoxStyle1}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel Width="100" Orientation="Horizontal">
<TextBlock Text="{Binding stunum}" VerticalAlignment="Center" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Width="450">
<TextBlock Text="{Binding studsc}" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Orientation="Horizontal" Width="180">
<StackPanel>
<TextBlock Width="50" Text="{Binding stu_cod}" x:Name="txtblkstucode" HorizontalAlignment="Right" />
</StackPanel>
</StackPanel>
<StackPanel Width="150">
<TextBlock Text="{Binding stuby_prc}" VerticalAlignment="Center" TextAlignment="Right" HorizontalAlignment="Center" />
</StackPanel>
<StackPanel Width="100">
<TextBlock Text="{Binding stuqty, Mode=TwoWay}" TextAlignment="Center" x:Name="txtbxbqty" Tag="{Binding stunum}" VerticalAlignment="Center" HorizontalAlignment="Right" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Now my doubt is when i rotate it to Portrait mode from landscape mode , since the width of the textblocks present inside the itemtemplate of listbox is already defined , when i rotate the it to Portrait, i am not able to see all the data present (it cuts off) since the width of the Portrait mode is less when compared to landscape mode.
1)Can i have two item templates for same listbox and switch between those two templates depending upon current orientation ??
2)How can i decrease/increase the width of the textblock present inside a item template of a listbox in runtime codebehind when the orentation changed event is fired.??
3)will visual states be useful at this point , if so then how ??
4)is there any other way of which i can solve the problem , am i missing any alternatives ??
Please help me out , Thanks in advance.
You can change the ItemTemplate using visual states. First put both of your item templates in resources:
<Page.Resources>
<DataTemplate x.Key="Landscape">
<!-- your landscape template -->
</DataTemplate>
<DataTemplate x.Key="Portrait">
<!-- your portrait template -->
</DataTemplate>
</Page.Resources>
Initially assign the landscape template to ListBox:
<ListBox x:Name="listbox" ItemTemplate="{StaticResource Landscape}" />
In VisualStateManager change the template for FullScreenPortrait visual state:
<VisualStateManager.VisualStateGroups>
<VisualState x:Name="FullScreenPortrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="listbox" Storyboard.TargetProperty="ItemTemplate">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Portrait}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateManager.VisualStateGroups>
Make sure you are using LayoutAwarePage as the base class for your page to make this work.

XAML ListView - Change Image Source for selected item

I'm using a ListView with a Custom Template, something like this:
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center" Width="220" Height="220">
<Image x:Name="image" Stretch="UniformToFill"
Source="{Binding Brand.Image,
ConverterParameter=transparent,
Converter={StaticResource LogoToUriConverter}}"/>
<StackPanel VerticalAlignment="Bottom">
<TextBlock Text="{Binding Name}"
Foreground="{StaticResource ApplicationColor}"
Style="{StaticResource TitleTextStyle}"
Height="30" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Name}"
Foreground="{StaticResource ApplicationColor}"
Style="{StaticResource CaptionTextStyle}"
TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
Now when an Item is selected I would like to have the image source for selected item changed to a new one.
Brand.Image is not a DependencyProperty because it comes from an external DataObject.
So, I think that in WPF I could use a Trigger to change it manually.
But since in winRT it does not work anymore, I've looked into VSM, but I'm not figuring out how can I accomplish that.
Can someone provide me a real example how could it be done?
Thank you
I was able to solve this, in a tricky way, but I got it to work:
Using an ExtendedVisualStateManager, (it was available for .NET through ExpressionBlend dlls, but not for WinRT, so I got it from here: http://nroute.codeplex.com/SourceControl/changeset/69480#nRoute5/nRoute.Framework.Metro/Components/ExtendedVisualStateManager.cs)
Having that I just catch an OnSelected Event and use the new VisualStateManager to do that:
ExtendedVisualStateManager.GoToElementState(sender as Grid, "Selected2", true);
Here's the full XAML for the ItemTemplate:
<DataTemplate>
<Grid x:Name="ItemGrid" HorizontalAlignment="Center" Width="220" Height="220" PointerPressed="GridItemTapped">
<Image x:Name="image" Stretch="UniformToFill" Source="{Binding Brand.Name, ConverterParameter=white, Converter={StaticResource LogoToUriConverter}}"/>
<Image x:Name="image_colored" Stretch="UniformToFill" Visibility="Collapsed" Source="{Binding Brand.Name, ConverterParameter=colored, Converter={StaticResource LogoToUriConverter}}"/>
<StackPanel VerticalAlignment="Bottom">
<TextBlock Text="{Binding Name}" Foreground="White" Style="{StaticResource TitleTextStyle}" Height="30" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Name}" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
<VisualStateManager.CustomVisualStateManager>
<vsm:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Selected2">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="00:00:00.0000000">
<DiscreteObjectKeyFrame.Value>
Collapsed
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image_colored" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="00:00:00.0000000">
<DiscreteObjectKeyFrame.Value>
Visible
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
Hope this can help anybody with the same issue.
If you have a better and easier way to achieve the same result in WinRT, please present your solution.
Thank you
You can create a style for your ListViewItem, with a controltemplate for the triggers and a datatemplate for your data binding, like this:
<Style x:Key="FocusedContainer" TargetType="{x:Type ListViewItem}">
<EventSetter Event="GotKeyboardFocus" Handler="OnListBoxItemContainerFocused" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="backgroundBorder">
<ContentPresenter Content="{TemplateBinding Content}">
<ContentPresenter.ContentTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center" Width="220" Height="220">
<Image x:Name="image" Stretch="UniformToFill" Source="{Binding Brand.Image, ConverterParameter=transparent, Converter={StaticResource LogoToUriConverter}}"/>
<StackPanel VerticalAlignment="Bottom">
<TextBlock Text="{Binding Name}" Foreground="{StaticResource ApplicationColor}" Style="{StaticResource TitleTextStyle}" Height="30" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Name}" Foreground="{StaticResource ApplicationColor}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="image" Property="Source" Value="{**Insert your alternate binding here**}"
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then configure your ListView like this:
<ListView ItemContainerStyle="{StaticResource FocusedContainer}"/>
You'll see that the style has an EventSetter: its purpose is to get the correct item selected even if you click inside some control (not directly on the background). You need to create the handler in code behind, just a couple of lines:
private void OnListBoxItemContainerFocused(object sender, System.Windows.RoutedEventArgs e)
{ (sender as ListViewItem).IsSelected = true; }
Hope this is helpful, regards!