I have started working With the Hubtile. I'm trying to add a hubtile to a list, with the Hubtile filling the device screen width. I am adding it to a ContentPanel, however i think this is wrong - i need to show the tiles as a list, inside the app with wide tile(max screen width) property, how can i achieve this? Have a look at my code so far:
//Project 1
HubTile project1 = new HubTile();
project1.GroupTag = "projects";
project1.Title = "RLE Kunnskap til andre prøve";
project1.Message = "Kunnskap til den andre prøven i RLE";
project1.Width = Convert.ToDouble(Application.Current.Host.Content.ActualWidth.ToString());
//Add to mainContentPanel for a sample view
mainContentPanel.Children.Add(project1);
I managed to create the size rectangular using the Tilesize property, I was trying all the time figuring out how, but this answer saved me.
//Tile 2
TileSize tilesize = new TileSize();
tilesize = TileSize.Large;
HubTile Tile2= new HubTile();
Tile2.Size = tilesize;
The issue is not that you are adding it to a content panel. If you want to use a list I think that a ListBox would be suited better. Also you can use a ListBox really easy for a MVVM design pattern. The main issue in your setting is, that the HubTile has four preset sizes. The sizes are compliant with the tiles on the start screen, ensuring a coherent experience throughout the system. If you still need a wider tile than Size="Large",you need a custom template.
To do this, right click a HubTile in the designer view and select Template->Edit Template->Edit copy. Create a new style either on the page where you want to use the tile. You can then edit the newly created style and reset all the "width" properties to "auto". This way, the tile width can be easily adjusted. The finished style will then look something like this:
<Style x:Key="HubTileFullWidthStyle" TargetType="toolkit:HubTile">
<Setter Property="Height" Value="173"/>
<Setter Property="Width" Value="Auto"/>
<Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="Foreground" Value="#FFFFFFFF"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:HubTile">
<Border x:Name="Container">
<Border.Resources>
<CubicEase x:Key="HubTileEaseOut" EasingMode="EaseOut"/>
</Border.Resources>
<Border.Height>
<Binding Converter="{StaticResource HeightConverter}" Path="Size" RelativeSource="{RelativeSource TemplatedParent}"/>
</Border.Height>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ImageStates">
<VisualStateGroup.Transitions>
<VisualTransition x:Name="ExpandedToSemiexpanded" From="Expanded" GeneratedDuration="0:0:0.85" To="Semiexpanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.85" Value="{Binding Size, ConverterParameter=-0.4566, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX" Storyboard.TargetName="ViewportProjection">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="0.0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="SemiexpandedToExpanded" From="Semiexpanded" GeneratedDuration="0:0:0.85" To="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="{Binding Size, ConverterParameter=-0.4566, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.85" Value="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="SemiexpandedToCollapsed" From="Semiexpanded" GeneratedDuration="0:0:0.85" To="Collapsed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="{Binding Size, ConverterParameter=-0.4566, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.85" Value="0.0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="CollapsedToExpanded" From="Collapsed" GeneratedDuration="0:0:0.85" To="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="0.0"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.85" Value="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="ExpandedToFlipped" From="Expanded" GeneratedDuration="0:0:0.85" To="Flipped">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Image">
<DiscreteObjectKeyFrame KeyTime="0:0:0.185" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BackPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0.185" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX" Storyboard.TargetName="ViewportProjection">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="0.0"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.85" Value="180.0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="FlippedToExpanded" From="Flipped" GeneratedDuration="0:0:0.85" To="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Image">
<DiscreteObjectKeyFrame KeyTime="0:0:0.185" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BackPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0.185" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX" Storyboard.TargetName="ViewportProjection">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="180.0"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.85" Value="360.0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Duration="0" To="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel"/>
<DoubleAnimation Duration="0" To="0.0" Storyboard.TargetProperty="RotationX" Storyboard.TargetName="ViewportProjection"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Image">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Semiexpanded">
<Storyboard>
<DoubleAnimation Duration="0" To="{Binding Size, ConverterParameter=-0.4566, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed"/>
<VisualState x:Name="Flipped">
<Storyboard>
<DoubleAnimation Duration="0" To="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel"/>
<DoubleAnimation Duration="0" To="180.0" Storyboard.TargetProperty="RotationX" Storyboard.TargetName="ViewportProjection"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Image">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BackPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel x:Name="Viewport" Height="{Binding Size, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}">
<StackPanel.Projection>
<PlaneProjection x:Name="ViewportProjection" CenterOfRotationY="0.25"/>
</StackPanel.Projection>
<Grid x:Name="TitlePanel" Height="{Binding Size, ConverterParameter=2, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" RenderTransformOrigin="0.5,0.5">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<Border Background="{TemplateBinding Background}" Grid.Row="0">
<TextBlock Foreground="{TemplateBinding Foreground}" FontSize="41" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="39" Margin="10,0,0,6" TextWrapping="NoWrap" Text="{TemplateBinding Title}" VerticalAlignment="Bottom"/>
</Border>
<Grid x:Name="BackPanel" Background="{TemplateBinding Background}" Height="{Binding Size, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" Grid.Row="1" Visibility="Collapsed">
<Grid.Projection>
<PlaneProjection CenterOfRotationY="0.5" RotationX="180"/>
</Grid.Projection>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="NotificationBlock" Foreground="{TemplateBinding Foreground}" FontSize="{StaticResource PhoneFontSizeLarge}" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="32" Margin="8,8,0,6" Grid.Row="0" TextWrapping="NoWrap" Text="{TemplateBinding Notification}"/>
<TextBlock x:Name="MessageBlock" Foreground="{TemplateBinding Foreground}" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="23.333" Margin="10,10,10,6" Grid.Row="0" TextWrapping="Wrap" Text="{TemplateBinding Message}"/>
<TextBlock x:Name="BackTitleBlock" Foreground="{TemplateBinding Foreground}" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Margin="10,0,0,6" Grid.Row="1" TextWrapping="NoWrap" VerticalAlignment="Bottom"/>
</Grid>
<Border x:Name="Image" Background="{TemplateBinding Background}" Grid.Row="1">
<Image Height="{Binding Size, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" Source="{TemplateBinding Source}" Stretch="UniformToFill" Width="{Binding Size, Converter={StaticResource WidthConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
</Border>
</Grid>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I have the following button with the label inside whose foreground color I wish to bind to the button's:
<Button x:Name="login_button" Grid.Row="1" Grid.Column="1" Template="{DynamicResource TileTemplate}"
Margin="5,10,5,10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<Image Source="pack://application:,,,/textures/logos/lock.png"
VerticalAlignment="Stretch" HorizontalAlignment="Left" Grid.Row="0"
Margin="10,10,10,10">
</Image>
<Label Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Bottom"
HorizontalContentAlignment="Left" VerticalContentAlignment="Bottom"
Content="LOG IN" FontSize="40" FontFamily="CenturyGothicRegual"
Margin="10,10,10,10">
<Label.Foreground>
<SolidColorBrush Color="{Binding ElementName=login_button, Path=BorderBrush.Color,UpdateSourceTrigger=PropertyChanged}"
Opacity="{Binding ElementName=login_button, Path=BorderBrush.Opacity,UpdateSourceTrigger=PropertyChanged}"/>
</Label.Foreground>
</Label>
</Grid>
</Button>
The button gets coloured using a template:
<ControlTemplate x:Key="TileTemplate" TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="#99C3C3C3" BorderThickness="2">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#28B6B6B6" Offset="0"/>
<GradientStop Color="#424D4D4D" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="#42B2B2B2"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="#28FFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="#7F5B5B5B"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="#42B2B2B2"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="#28FFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="#FFD1A139"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="border">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="border">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border">
<EasingDoubleKeyFrame KeyTime="0" Value="0.8"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="#FFF0A300"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="#5991774A"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="#28FFFFFF"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="border">
<EasingDoubleKeyFrame KeyTime="0" Value="0.004"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border">
<EasingDoubleKeyFrame KeyTime="0" Value="0.8"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<ContentPresenter/>
</Grid>
</Border>
</ControlTemplate>
I do not know if the template is important, I just enclosed it in case it is. The problem is that while the label does receive the button's colour at start, but when the button's state changes, like MouseOver or Clicked, the label's colour remains the same even if I added the UpdateSourceTrigger=PropertyChanged in the binding. Any ideas?
The VisualStates that you define in the ControlTemplate doesn't apply to the Button's Content.
You could define the brushes or colour as stand-alone resources and apply them both in your ControlTemplate and in a Style for the Label:
<Color x:Key="moColor">#FFD1A139</Color>
...
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource moColor}"/>
</ColorAnimationUsingKeyFrames>
<Button x:Name="login_button" Grid.Row="1" Grid.Column="1" Template="{DynamicResource TileTemplate}" Margin="5,10,5,10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<Image Source="pack://application:,,,/textures/logos/lock.png"
VerticalAlignment="Stretch" HorizontalAlignment="Left" Grid.Row="0"
Margin="10,10,10,10">
</Image>
<Label Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Bottom"
HorizontalContentAlignment="Left" VerticalContentAlignment="Bottom"
Content="LOG IN" FontSize="40" FontFamily="CenturyGothicRegual"
Margin="10,10,10,10">
<Label.Style>
<Style TargetType="Label">
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Button}}" Value="True">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="{StaticResource moColor}" />
</Setter.Value>
</Setter>
<Setter Property="Opacity" Value="0.8" />
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
</Grid>
</Button>
I have prepared a custom hubtile which has a image and textbloxk for displaying the image and text needed.I have hardcoded the background color of tiles as white,Now can anyone suggest how to change the background of tiles with multiple colors and also can any one suggest to change the color of image(i.e change pixel of image coming from server which is used as HubTile source). I have been using below code
xaml file code
<Style x:Key="HomePageTabStyle"
TargetType="toolkit:HubTile">
<Setter Property="Height"
Value="173" />
<Setter Property="Width"
Value="173" />
<Setter Property="Background"
Value="White" />
<!--<Setter Property="Background"
Value="{StaticResource PhoneAccentBrush}" />-->
<Setter Property="Foreground"
Value="#FFFFFFFF" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:HubTile">
<Border x:Name="Container">
<Border.Resources>
<CubicEase x:Key="HubTileEaseOut"
EasingMode="EaseOut" />
</Border.Resources>
<Border.Height>
<Binding Converter="{StaticResource HeightConverter}"
Path="Size"
RelativeSource="{RelativeSource TemplatedParent}" />
</Border.Height>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ImageStates">
<VisualStateGroup.Transitions>
<VisualTransition x:Name="ExpandedToSemiexpanded"
From="Expanded"
GeneratedDuration="0:0:0.85"
To="Semiexpanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.0"
Value="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.85"
Value="{Binding Size, ConverterParameter=-0.4566, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX"
Storyboard.TargetName="ViewportProjection">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.0"
Value="0.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="SemiexpandedToExpanded"
From="Semiexpanded"
GeneratedDuration="0:0:0.85"
To="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.0"
Value="{Binding Size, ConverterParameter=-0.4566, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.85"
Value="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="SemiexpandedToCollapsed"
From="Semiexpanded"
GeneratedDuration="0:0:0.85"
To="Collapsed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.0"
Value="{Binding Size, ConverterParameter=-0.4566, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.85"
Value="0.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="CollapsedToExpanded"
From="Collapsed"
GeneratedDuration="0:0:0.85"
To="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.0"
Value="0.0" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.85"
Value="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="ExpandedToFlipped"
From="Expanded"
GeneratedDuration="0:0:0.85"
To="Flipped">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.0"
Value="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="Image">
<DiscreteObjectKeyFrame KeyTime="0:0:0.185"
Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="BackPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0.185"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX"
Storyboard.TargetName="ViewportProjection">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.0"
Value="0.0" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.85"
Value="180.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="FlippedToExpanded"
From="Flipped"
GeneratedDuration="0:0:0.85"
To="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.0"
Value="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="Image">
<DiscreteObjectKeyFrame KeyTime="0:0:0.185"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="BackPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0.185"
Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX"
Storyboard.TargetName="ViewportProjection">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.0"
Value="180.0" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}"
KeyTime="0:0:0.85"
Value="360.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Duration="0"
To="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="TitlePanel" />
<DoubleAnimation Duration="0"
To="0.0"
Storyboard.TargetProperty="RotationX"
Storyboard.TargetName="ViewportProjection" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="Image">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Semiexpanded">
<Storyboard>
<DoubleAnimation Duration="0"
To="{Binding Size, ConverterParameter=-0.4566, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="TitlePanel" />
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed" />
<VisualState x:Name="Flipped">
<Storyboard>
<DoubleAnimation Duration="0"
To="{Binding Size, ConverterParameter=-1, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="TitlePanel" />
<DoubleAnimation Duration="0"
To="180.0"
Storyboard.TargetProperty="RotationX"
Storyboard.TargetName="ViewportProjection" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="Image">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="BackPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border.Width>
<Binding Converter="{StaticResource WidthConverter}"
Path="Size"
RelativeSource="{RelativeSource TemplatedParent}" />
</Border.Width>
<StackPanel x:Name="Viewport"
Height="{Binding Size, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"
Width="{Binding Size, Converter={StaticResource WidthConverter}, RelativeSource={RelativeSource TemplatedParent}}">
<StackPanel.Projection>
<PlaneProjection x:Name="ViewportProjection"
CenterOfRotationY="0.25" />
</StackPanel.Projection>
<Grid x:Name="TitlePanel"
Height="{Binding Size, ConverterParameter=2, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"
RenderTransformOrigin="0.5,0.5"
Width="{Binding Size, Converter={StaticResource WidthConverter}, RelativeSource={RelativeSource TemplatedParent}}">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.RenderTransform>
<CompositeTransform />
</Grid.RenderTransform>
<Grid x:Name="BackPanel"
Background="{TemplateBinding Background}"
Height="{Binding Size, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"
Grid.Row="1"
Visibility="Collapsed"
Width="{Binding Size, Converter={StaticResource WidthConverter}, RelativeSource={RelativeSource TemplatedParent}}">
<Grid.Projection>
<PlaneProjection CenterOfRotationY="0.5"
RotationX="180" />
</Grid.Projection>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!--Foreground="{TemplateBinding Foreground}"-->
<!--<TextBlock x:Name="NotificationBlock"
Foreground="Gray"
FontSize="{StaticResource PhoneFontSizeMediumLarge}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
LineStackingStrategy="BlockLineHeight"
LineHeight="32"
Margin="8,8,0,6"
Grid.Row="0"
TextWrapping="Wrap"
Text="{TemplateBinding Notification}" />-->
<!--Foreground="{TemplateBinding Foreground}"-->
<!--<TextBlock x:Name="MessageBlock"
Foreground="{StaticResource AppFontColor}"
FontSize="{StaticResource PhoneFontSizeMediumLarge}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
LineStackingStrategy="BlockLineHeight"
LineHeight="23.333"
Margin="10,10,10,6"
Grid.Row="0"
TextWrapping="Wrap"
Text="{TemplateBinding Message}" />-->
<!--Foreground="{TemplateBinding Foreground}"-->
<!--<TextBlock x:Name="BackTitleBlock"
Foreground="Gray"
FontSize="{StaticResource PhoneFontSizeMediumLarge}"
FontFamily="{StaticResource PhoneFontFamilySemiBold}"
Margin="10,0,0,6"
Grid.Row="1"
TextWrapping="Wrap"
VerticalAlignment="Bottom" />-->
</Grid>
<Border x:Name="Image"
Background="{TemplateBinding Background}"
Grid.Row="1">
<Image Height="80"
Width="90"
Margin="0,0,0,35"
Source="{TemplateBinding Source}"
Stretch="Uniform"/>
<!--<Image Height="{Binding Size, Converter={StaticResource HeightConverter}, RelativeSource={RelativeSource TemplatedParent}}"
Source="{TemplateBinding Source}"
Stretch="Uniform"
Width="{Binding Size, Converter={StaticResource WidthConverter}, RelativeSource={RelativeSource TemplatedParent}}" />-->
</Border>
<!--Foreground="{TemplateBinding Foreground}"-->
<TextBlock Foreground="Black"
Grid.Row="2"
FontSize="{StaticResource PhoneFontSizeNormal}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
LineStackingStrategy="BlockLineHeight"
LineHeight="27"
MaxHeight="54"
TextTrimming="WordEllipsis"
Margin="10,0,0,6"
TextWrapping="Wrap"
Text="{TemplateBinding Title}"
VerticalAlignment="Bottom" />
</Grid>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And C# file for it is
tile = new HubTile()
{
Name = currentTab.TAB_ID,
Title = currentTab.TAB_NAME,
Message = currentTab.TAB_NAME,
Notification = currentTab.DESCRIPTION,
Source = new BitmapImage(new Uri(currentTab.ICON_URL, UriKind.RelativeOrAbsolute)),
IsFrozen = true,
//Foreground = tabForegroundBrush,
//Background = tabBackgroungBrush,
DataContext = currentTab,
Margin = new Thickness(4),
Style = App.Current.Resources["HomePageTabStyle"] as Style,
Size = TileSize.Medium
};
Here currentTab is object of class.
Please any one do suggest a working solution for it.
Thanks.
Using Array of Colors,I achieved point one.
Color[] colors=new Color{Colors.Red,Colors.Blue,Colors.White}
and in hubtile code added below line
Background=new SolidColorBrush(index % colors.Length),
Thanks.
Hope it helps someone.
I'd like to create an animated split-flap display using c# / wpf. I want it to look similar to the one, that can be seen in this video, but without the 3D effect. As I don't have a lot experience with wpf, I'd like to know how I can implement a UserControl for a single animated letter.
Without 3d, you could do this with multiple images.
Idea #1 Think animated gif. Only, you would have a one set of images to flip from 1 to 2. Another set of images to flip from 2 to 3, etc...
See Option 2 at this site:
http://www.wpfsharp.com/2011/05/11/wpf-replacement-options-for-an-animated-gif
Then you would have the click start the storyboard, then end at a new image instead of the same image. The more images you have, the less choppy it will be.
Idea #2
My other idea would use a top and bottom image for each number. Bend the images with RenderTransform changes.
Give this a look. I got it halfway there for you:
<Window.Resources>
<Storyboard x:Key="FlipNumberStoryBoard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)" Storyboard.TargetName="Img1Top">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="10"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="20"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="35"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="60"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="75"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="88"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Img1Top">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="-2.01"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-3.45"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-5.55"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-7"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-8.75"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-9.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="-8.25"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Img1Top">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.90"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.80"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.60"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0.40"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.20"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.10"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.01"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Img1Top">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="2.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="10.1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="15"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="20"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="22.6"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="24.9"/>
</DoubleAnimationUsingKeyFrames>
<Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.ZIndex)" Storyboard.TargetName="Img2Bottom">
<EasingInt32KeyFrame KeyTime="0:0:0.8" Value="1"/>
</Int32AnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Img1Top">
<DiscreteObjectKeyFrame KeyTime="0:0:0.8" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)" Storyboard.TargetName="Img2Bottom">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="-88"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="-75"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-60"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="-35"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="-20"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="-10"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="-5"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Img2Bottom">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0.01"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0.10"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.20"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="0.40"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="0.60"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="0.80"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="0.90"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Img2Bottom">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="-9.121"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="-8.87"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-8.564"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="-7"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="-5.438"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="-3.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="-2.001"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Img2Bottom">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="-24.75"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="-22.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-20.062"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="-15.062"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="-10"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="-5.062"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="-2.562"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Img2Bottom">
<DiscreteObjectKeyFrame KeyTime="0:0:0.8" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image x:Name="Img2Top" Source="Images/02top.png" Grid.Row="1" Width="70" Height="50" RenderTransformOrigin="0.5,0.5" Margin="0,-1,0,0"/>
<Image x:Name="Img1Top" Source="Images/01top.png" Grid.Row="1" Width="70" Height="50" RenderTransformOrigin="0.5,0.5" Margin="0,-1,0,0">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Image x:Name="Img2Bottom" Source="Images/02.png" Grid.Row="2" Width="70" Height="50" Visibility="Collapsed" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Image x:Name="Img1Bottom" Source="Images/01.png" Grid.Row="2" Width="70" Height="50" RenderTransformOrigin="0.5,0.5"/>
<Button Content="Next" HorizontalAlignment="Left" Margin="223.5,5,0,0" Grid.Row="3" VerticalAlignment="Top" Width="70" Click="Button_Click" />
</Grid>
And then on click of the button, you can see the flip.
using System.Windows;
using System.Windows.Media.Animation;
namespace RenderTransformExample
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
var storyboard = (Storyboard)this.Resources["FlipNumberStoryBoard"];
storyboard.Begin();
}
}
}
Now hooking that up so it just loops through images is up to you.
You can use ScaleTransform to achieve the animation, and some dependency properties to make the UserControl easy to use.
First, you have to display your letter in two halves, which can be done using these styles :
<Style x:Key="UpperHalf" TargetType="ContentControl">
<Style.Setters>
<Setter Property="FontFamily" Value="Courier New" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="RenderTransformOrigin" Value="0.5,1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Border Height="{Binding ElementName=SizeRef,
Path=ActualHeight,
Converter={StaticResource HalfConverter}}"
VerticalAlignment="Top"
Background="{TemplateBinding Background}"
CornerRadius="10,10,0,0"
Padding="10,0">
<ContentPresenter Content="{TemplateBinding Content}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
<Style x:Key="LowerHalf" TargetType="ContentControl">
<Style.Setters>
<Setter Property="FontFamily" Value="Courier New" />
<Setter Property="VerticalAlignment" Value="Bottom" />
<Setter Property="RenderTransformOrigin" Value="0.5,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Border Height="{Binding ElementName=SizeRef,
Path=ActualHeight,
Converter={StaticResource HalfConverter}}"
VerticalAlignment="Bottom"
Background="{TemplateBinding Background}"
CornerRadius="0,0,10,10"
Padding="10,0">
<ContentPresenter Content="{TemplateBinding Content}">
<ContentPresenter.ContentTemplate>
<DataTemplate>
<TextBlock VerticalAlignment="Bottom" Text="{Binding}" />
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
Then to display two overlapping letters (the old one and the new one) :
<Grid>
<!-- Hidden textblock, only used for measurement purpose -->
<!-- The border is here to set the total height of the display so that we can have a small space between the two halves -->
<Border Margin="0,1" Visibility="Hidden">
<TextBlock Name="SizeRef"
Margin="10,0"
FontFamily="Courier New"
Text="{Binding ElementName=Root,
Path=Letter}" />
</Border>
<ContentControl Name="Letter1Top"
Background="Gray"
Content="{Binding ElementName=Root,
Path=Letter1}"
Style="{StaticResource UpperHalf}">
<ContentControl.RenderTransform>
<ScaleTransform />
</ContentControl.RenderTransform>
</ContentControl>
<ContentControl Name="Letter2Top"
Background="Gray"
Content="{Binding ElementName=Root,
Path=Letter2}"
Style="{StaticResource UpperHalf}">
<ContentControl.RenderTransform>
<ScaleTransform />
</ContentControl.RenderTransform>
</ContentControl>
<ContentControl Name="Letter1Bottom"
Background="Gray"
Content="{Binding ElementName=Root,
Path=Letter1}"
Style="{StaticResource LowerHalf}">
<ContentControl.RenderTransform>
<ScaleTransform />
</ContentControl.RenderTransform>
</ContentControl>
<ContentControl Name="Letter2Bottom"
Background="Gray"
Content="{Binding ElementName=Root,
Path=Letter2}"
Style="{StaticResource LowerHalf}">
<ContentControl.RenderTransform>
<ScaleTransform />
</ContentControl.RenderTransform>
</ContentControl>
</Grid>
The properties used above are created in code behind :
public partial class SplitFlapLetter
{
public SplitFlapLetter()
{
InitializeComponent();
}
public char Letter
{
get { return (char)GetValue(LetterProperty); }
set { SetValue(LetterProperty, value); }
}
public static readonly DependencyProperty LetterProperty =
DependencyProperty.Register("Letter", typeof(char), typeof(SplitFlapLetter), new UIPropertyMetadata(OnLetterChanged));
private char Letter1
{
get { return (char)GetValue(Letter1Property); }
set { SetValue(Letter1Property, value); }
}
public static readonly DependencyProperty Letter1Property =
DependencyProperty.Register("Letter1", typeof(char), typeof(SplitFlapLetter), new UIPropertyMetadata(null));
private char Letter2
{
get { return (char)GetValue(Letter2Property); }
set { SetValue(Letter2Property, value); }
}
public static readonly DependencyProperty Letter2Property =
DependencyProperty.Register("Letter2", typeof(char), typeof(SplitFlapLetter), new UIPropertyMetadata(null));
private bool _isLetter1Active;
private static void OnLetterChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var uc = d as SplitFlapLetter;
if (uc == null) return;
if (uc._isLetter1Active)
uc.Letter2 = uc.Letter;
else
uc.Letter1 = uc.Letter;
var sb = uc.FindResource(uc._isLetter1Active ? "GotoLetter2Animation" : "GotoLetter1Animation") as Storyboard;
if (sb != null) sb.Begin();
uc._isLetter1Active = !uc._isLetter1Active;
}
private readonly List<char> _letters = new List<char> { 'A', 'B', 'C', 'D', 'E' };
private void OnClick(object sender, MouseButtonEventArgs e)
{
Letter = _letters[(_letters.IndexOf(Letter) + 1) % _letters.Count];
}
}
The Letter property is the only public one and there is a listener on its changes.
This listener sets Letter1 or Letter2 to the new value, changing at every run, so that the other property is still set to the old value.
It then starts one of the two storyboard defined in the UserControl resources :
<Storyboard x:Key="GotoLetter1Animation">
<DoubleAnimation Duration="0:0:0"
Storyboard.TargetName="Letter1Bottom"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="0" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter2Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="2" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter2Bottom"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="1" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter1Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="1" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter1Bottom"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="2" />
<DoubleAnimation Duration="0:0:0.2"
From="1"
Storyboard.TargetName="Letter2Top"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="0" />
<DoubleAnimation BeginTime="0:0:0.2"
Duration="0:0:0.2"
From="0"
Storyboard.TargetName="Letter1Bottom"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="1" />
<Int32Animation BeginTime="0:0:0.4"
Duration="0:0:0"
Storyboard.TargetName="Letter1Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="2" />
<Int32Animation BeginTime="0:0:0.4"
Duration="0:0:0"
Storyboard.TargetName="Letter2Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="1" />
<DoubleAnimation BeginTime="0:0:0.4"
Duration="0:0:0"
Storyboard.TargetName="Letter2Top"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="1" />
</Storyboard>
<Storyboard x:Key="GotoLetter2Animation">
<DoubleAnimation Duration="0:0:0"
Storyboard.TargetName="Letter2Bottom"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="0" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter1Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="2" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter1Bottom"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="1" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter2Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="1" />
<Int32Animation Duration="0:0:0"
Storyboard.TargetName="Letter2Bottom"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="2" />
<DoubleAnimation Duration="0:0:0.2"
From="1"
Storyboard.TargetName="Letter1Top"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="0" />
<DoubleAnimation BeginTime="0:0:0.2"
Duration="0:0:0.2"
From="0"
Storyboard.TargetName="Letter2Bottom"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="1" />
<Int32Animation BeginTime="0:0:0.4"
Duration="0:0:0"
Storyboard.TargetName="Letter2Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="2" />
<Int32Animation BeginTime="0:0:0.4"
Duration="0:0:0"
Storyboard.TargetName="Letter1Top"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="1" />
<DoubleAnimation BeginTime="0:0:0.4"
Duration="0:0:0"
Storyboard.TargetName="Letter1Top"
Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
To="1" />
</Storyboard>
There's probably some way to reduce this xaml and use only one storyboard that would uses the appropriate targets.
I think that this project could really give you a base for what you want to do.
Unfortunately, I don't see how this split-flap display could look well without 3D.
Good luck !
<toolkit:HubTile
Background="Red"
Source="/Assets/MedicineImg/crocin.jpg"
Title="Crocin"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="0,0,0,0"
Height="400"
Width="400"
/>
i am trying to enlarge my hubtile, but only its frame enlarges , all its animations and the image doesn't enlarge , can anyone suggest a logic for enlarging my entire Hubtile with all its contents to 400 x 400 .
As far as I know, you can't just change the width and height of a HubTile that easily (just by setting the properties). You need to dig into the style of the control and not only change the width and height but also make sure that all the animations are properly changed, too.
I wrote a blog post in 2011 about changing it to 300x300 (disclaimer - not only is it my post, but it was also written a long time ago, so it may not work 100%) but it would definitely be a great start for what you need - you could easily modify it to work for you and for whatever size you need.
EDIT: Obviously things changed since 2011. :)
Now the Hubtile uses enum of tile sizes and two converters, width and height to do the conversion to exact width and height values.
There are two options here. The first is to use your own converters and add the tile sizes you need which would probably be a cleaner solution. The quick and dirty solution is to just remove the value converters and the use of the tile size from the style, and hardcode the values in a way which will preserve ratios, but will use 400x400 size.
Here's the style.
<Style x:Key="HubTileStyle1" TargetType="toolkit:HubTile">
<Setter Property="Height" Value="400"/>
<Setter Property="Width" Value="400"/>
<Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="Foreground" Value="#FFFFFFFF"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:HubTile">
<Border x:Name="Container" Width="400" Height="400">
<Border.Resources>
<CubicEase x:Key="HubTileEaseOut" EasingMode="EaseOut"/>
</Border.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ImageStates">
<VisualStateGroup.Transitions>
<VisualTransition x:Name="ExpandedToSemiexpanded" From="Expanded" GeneratedDuration="0:0:0.85" To="Semiexpanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="-400"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.85" Value="-182.64"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX" Storyboard.TargetName="ViewportProjection">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="0.0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="SemiexpandedToExpanded" From="Semiexpanded" GeneratedDuration="0:0:0.85" To="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="-182.64"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.85" Value="-400"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="SemiexpandedToCollapsed" From="Semiexpanded" GeneratedDuration="0:0:0.85" To="Collapsed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="-182.64"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.85" Value="0.0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="CollapsedToExpanded" From="Collapsed" GeneratedDuration="0:0:0.85" To="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="0.0"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.85" Value="-400"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="ExpandedToFlipped" From="Expanded" GeneratedDuration="0:0:0.85" To="Flipped">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="-400"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Image">
<DiscreteObjectKeyFrame KeyTime="0:0:0.185" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BackPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0.185" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX" Storyboard.TargetName="ViewportProjection">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="0.0"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.85" Value="180.0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition x:Name="FlippedToExpanded" From="Flipped" GeneratedDuration="0:0:0.85" To="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="-400"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Image">
<DiscreteObjectKeyFrame KeyTime="0:0:0.185" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BackPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0.185" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX" Storyboard.TargetName="ViewportProjection">
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="180.0"/>
<EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.85" Value="360.0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Duration="0" To="-400" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel"/>
<DoubleAnimation Duration="0" To="0.0" Storyboard.TargetProperty="RotationX" Storyboard.TargetName="ViewportProjection"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Image">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Semiexpanded">
<Storyboard>
<DoubleAnimation Duration="0" To="-182.64" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed"/>
<VisualState x:Name="Flipped">
<Storyboard>
<DoubleAnimation Duration="0" To="400" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel"/>
<DoubleAnimation Duration="0" To="180.0" Storyboard.TargetProperty="RotationX" Storyboard.TargetName="ViewportProjection"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Image">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BackPanel">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel x:Name="Viewport" Height="400" Width="400">
<StackPanel.Projection>
<PlaneProjection x:Name="ViewportProjection" CenterOfRotationY="0.25"/>
</StackPanel.Projection>
<Grid x:Name="TitlePanel" Height="800" RenderTransformOrigin="0.5,0.5" Width="400">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<Border Background="{TemplateBinding Background}" Grid.Row="0">
<TextBlock Foreground="{TemplateBinding Foreground}" FontSize="41" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="39" Margin="10,0,0,6" TextWrapping="NoWrap" Text="{TemplateBinding Title}" VerticalAlignment="Bottom"/>
</Border>
<Grid x:Name="BackPanel" Background="{TemplateBinding Background}" Height="400" Grid.Row="1" Visibility="Collapsed" Width="400">
<Grid.Projection>
<PlaneProjection CenterOfRotationY="0.5" RotationX="180"/>
</Grid.Projection>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="NotificationBlock" Foreground="{TemplateBinding Foreground}" FontSize="{StaticResource PhoneFontSizeLarge}" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="32" Margin="8,8,0,6" Grid.Row="0" TextWrapping="NoWrap" Text="{TemplateBinding Notification}"/>
<TextBlock x:Name="MessageBlock" Foreground="{TemplateBinding Foreground}" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="23.333" Margin="10,10,10,6" Grid.Row="0" TextWrapping="Wrap" Text="{TemplateBinding Message}"/>
<TextBlock x:Name="BackTitleBlock" Foreground="{TemplateBinding Foreground}" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Margin="10,0,0,6" Grid.Row="1" TextWrapping="NoWrap" VerticalAlignment="Bottom"/>
</Grid>
<Border x:Name="Image" Background="{TemplateBinding Background}" Grid.Row="1">
<Image Height="400" Source="{TemplateBinding Source}" Stretch="UniformToFill" Width="400"/>
</Border>
</Grid>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You apply it like this:
<toolkit:HubTile Width="400" Height="400"
Style="{StaticResource HubTileStyle1}"
Background="Red"
Source="/Assets/MedicineImg/crocin.jpg"
Title="Crocin"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
It may need some tweaking, but it's a good start.
How can I fix this exception caused by the folling style?
<Style x:Key="OnOffSwitchToggleButton" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid Margin="0,0,0,-0.033">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.456*"/>
<ColumnDefinition Width="0.544*"/>
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Switch">
<EasingDoubleKeyFrame KeyTime="0" Value="0.083"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path1">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Opacity)" Storyboard.TargetName="path">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path">
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF39B54A"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="path">
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF319D40"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="label">
<EasingColorKeyFrame KeyTime="0" Value="#00999999"/>
<DiscreteColorKeyFrame KeyTime="0:0:0.2" Value="#0039B54A"/>
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ContentControl.Content)" Storyboard.TargetName="label">
<DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="ON"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="Switch">
<DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Static HorizontalAlignment.Left}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Switch">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="39.965"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="label">
<DiscreteDoubleKeyFrame KeyTime="0:0:0.2" Value="-19.224"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Switch">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="label">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="label">
<EasingColorKeyFrame KeyTime="0" Value="#00999999"/>
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="#00999999"/>
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="#FF999999"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Canvas x:Name="_switch" UseLayoutRounding="False" Height="30" Width="70" d:LayoutOverrides="VerticalMargin" Grid.ColumnSpan="2">
<Canvas x:Name="Background" Height="30" Canvas.Left="0" Canvas.Top="0" Width="70" RenderTransformOrigin="0.5,0.5">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Canvas.RenderTransform>
<Path x:Name="path" Height="30" Canvas.Left="0" Canvas.Top="0" Width="70" Data="F1M55.0161,-0.966799999999999L14.9831,-0.966799999999999C6.7081,-0.966799999999999,0.00010000000000332,5.7412,0.00010000000000332,14.0162C0.00010000000000332,22.2922,6.7081,29.0002,14.9831,29.0002L55.0161,29.0002C63.2911,29.0002,70.0001,22.2922,70.0001,14.0162C70.0001,5.7412,63.2911,-0.966799999999999,55.0161,-0.966799999999999" Fill="#FFEDEDED" Stretch="Fill" Stroke="#FFCCCCCC">
<Path.Effect>
<DropShadowEffect ShadowDepth="0" Color="#FF00ADEF" Opacity="0"/>
</Path.Effect>
</Path>
</Canvas>
<Grid x:Name="Switch" Height="22" Canvas.Left="4.815" Canvas.Top="3.568" Width="22" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Grid.Effect>
<DropShadowEffect BlurRadius="3" ShadowDepth="0" Opacity="0.5"/>
</Grid.Effect>
<Path x:Name="path1" Data="F1M14.9614,27.0166C7.7934,27.0166,1.9614,21.1846,1.9614,14.0166C1.9614,6.8486,7.7934,1.0166,14.9614,1.0166C22.1294,1.0166,27.9614,6.8486,27.9614,14.0166C27.9614,21.1846,22.1294,27.0166,14.9614,27.0166" Height="22" Stretch="Fill" Width="22" Margin="0" Fill="White"/>
</Grid>
</Canvas>
<Label x:Name="label" Content="OFF" Grid.Column="1" Margin="-2.506,2,0,0" HorizontalAlignment="Left" Padding="0" VerticalAlignment="Center" FontFamily="Avenir 45" FontSize="14.667" Foreground="#FF999999" RenderTransformOrigin="0.5,0.5">
<Label.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Label.RenderTransform>
</Label>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HorizontalAlignment" Value="Left"/>
</Style>
I'm applying this style to a toggle button which is inside a Grid cell:
<ToggleButton Grid.Column="1" IsChecked="{Binding Path=ObjectStatus}" Style="{StaticResource ResourceKey=OnOffSwitchToggleButton}" Margin="5,0,0,0"/>
I have another toggle button inside a devexpress GridControl and this exception does not appear.
As John said the error is in this line
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Switch">
it is unable to iterate and lookup the property in switch so the solution is to give the transform a name and then reference the transform directly
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(TranslateTransform.Y)" Storyboard.TargetName="SwitchTranslate">
and
<Grid x:Name="Switch" Height="22" Canvas.Left="4.815" Canvas.Top="3.568" Width="22" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform x:Name="SwitchTranslate"/>
</TransformGroup>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Switch">
This is the offending line where '(0).(1)3' where:
(0) is (UIElement.RenderTransform),
(1) is (TransforGroup.Children),
[3] is [3], and
(2) is (TranslateTransform.Y)
Doesn't help much, but I was running into similar problems. I think if you comment out
that line, the problem will go away, but might not work. Perhaps someone with more
experience with this kind of issue can chime in here.
Below is your fixed style:
<Style x:Key="OnOffSwitchToggleButton" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid Margin="0,0,0,-0.033">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.456*"/>
<ColumnDefinition Width="0.544*"/>
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Switch">
<EasingDoubleKeyFrame KeyTime="0" Value="0.083"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path1">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Opacity)" Storyboard.TargetName="path">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path">
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF39B54A"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="path">
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF319D40"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="label">
<EasingColorKeyFrame KeyTime="0" Value="#00999999"/>
<DiscreteColorKeyFrame KeyTime="0:0:0.2" Value="#0039B54A"/>
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ContentControl.Content)" Storyboard.TargetName="label">
<DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="ON"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="Switch">
<DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Static HorizontalAlignment.Left}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Switch">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="39.965"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="label">
<DiscreteDoubleKeyFrame KeyTime="0:0:0.2" Value="-19.224"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Switch">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="label">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="label">
<EasingColorKeyFrame KeyTime="0" Value="#00999999"/>
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="#00999999"/>
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="#FF999999"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Canvas RenderTransformOrigin="0.5,0.5" x:Name="_switch" UseLayoutRounding="False" Height="30" Width="70" Grid.ColumnSpan="2">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Canvas.RenderTransform>
<Canvas x:Name="Background" Height="30" Canvas.Left="0" Canvas.Top="0" Width="70" RenderTransformOrigin="0.5,0.5">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Canvas.RenderTransform>
<Path x:Name="path" Height="30" Canvas.Left="0" Canvas.Top="0" Width="70" Data="F1M55.0161,-0.966799999999999L14.9831,-0.966799999999999C6.7081,-0.966799999999999,0.00010000000000332,5.7412,0.00010000000000332,14.0162C0.00010000000000332,22.2922,6.7081,29.0002,14.9831,29.0002L55.0161,29.0002C63.2911,29.0002,70.0001,22.2922,70.0001,14.0162C70.0001,5.7412,63.2911,-0.966799999999999,55.0161,-0.966799999999999" Fill="#FFEDEDED" Stretch="Fill" Stroke="#FFCCCCCC">
<Path.Effect>
<DropShadowEffect ShadowDepth="0" Color="#FF00ADEF" Opacity="0"/>
</Path.Effect>
</Path>
</Canvas>
<Grid x:Name="Switch" Height="22" Canvas.Left="4.815" Canvas.Top="3.568" Width="22" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Grid.Effect>
<DropShadowEffect BlurRadius="3" ShadowDepth="0" Opacity="0.5"/>
</Grid.Effect>
<Path x:Name="path1" Data="F1M14.9614,27.0166C7.7934,27.0166,1.9614,21.1846,1.9614,14.0166C1.9614,6.8486,7.7934,1.0166,14.9614,1.0166C22.1294,1.0166,27.9614,6.8486,27.9614,14.0166C27.9614,21.1846,22.1294,27.0166,14.9614,27.0166" Height="22" Stretch="Fill" Width="22" Margin="0" Fill="White"/>
</Grid>
</Canvas>
<Label x:Name="label" Content="OFF" Grid.Column="1" Margin="-2.506,2,0,0" HorizontalAlignment="Left" Padding="0" VerticalAlignment="Center" FontFamily="Avenir 45" FontSize="14.667" Foreground="#FF999999" RenderTransformOrigin="0.5,0.5">
<Label.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Label.RenderTransform>
</Label>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HorizontalAlignment" Value="Left"/>
</Style>
I think it's more likely that the Children collection of the TransformGroup doesn't have 4 elements (yet), so (TransforGroup.Children)[3] gives an exception. Make sure that the transform doesn't run before the Children collection is set.