Is It Possible to Use TemplateBinding in a Storyboard in Silverlight? - animation

I'm building a custom control in Silverlight and I want one of the fields to animate to the value of a DependencyProperty when that property is changed. More specifically, I have particular item in my Control Template that I want to animate to the color of the Background whenever the background changes color. So, what I have is:
<ControlTemplate TargetType="local:MyType">
<Grid x:Name="PART_RootElement">
<Grid.Resources>
<Storyboard x:Name="PART_FillAnimation">
<ColorAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="PART_MainPath"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<EasingColorKeyFrame
x:Name="PATH_FillKeyframe"
KeyTime="00:00:01"
Value="{TemplateBinding Background}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<!-- the rest of the template -->
I'm triggering the animation in the custom control code, but when the animation starts, it doesn't look like the Value is updating. I was just wondering if I'm missing something or if it is at all possible to apply TemplateBinding to resources in my ControlTemplate.
(I'm currently using a work-around of manually assigning the Background to the EasingColorKeyFrame Value, but the TemplateBinding solution would be so much cleaner.)

Have a look at Expression Blend Samples as a possible solution to your problem. There are a number of Interactivity classes that you could use within your ControlTemplate to create the effect your looking for. The documentation is not great, but descriptions in the Object Browser should give you some more clues :)
For example, I have a ListBox ItemTemplate that contains a ControlStoryboardAction Behaviour. The trigger for this Behaviour is a DataTrigger which fires when a DataContext field contains a specific value. (In my case when Severity=="High") The trigger then Plays a Storyboard within the ItemTemplate.
<i:Interaction.Triggers>
<is:DataTrigger Binding="{Binding Severity, Mode=OneWay}" Value="High">
<im:ControlStoryboardAction Storyboard="{StaticResource flashLight}" IsEnabled="True" />
</is:DataTrigger>
The following namespaces are referenced:
<i: - System.Windows.Interactivity
<is: - Expression.Samples.Interactivity (available from the link above. I am using the July 2009 release for SL3)
<im: - Microsoft.Expression.Interactivity.Media

Related

Xamarin.Forms UWP custom icon for the secondary ToolBarItems button

Is there a way to customize the "3-dot" button, that shows the Secondary ToolBarItem list in Xamarin.Forms UWP app?
It is possible to do so for iOS and Android, using the custom renderers. However, I was not able to locate the corresponding UIElement from the UWP custom renderer class.
Any ideas of how to access the button and change its appearance (particularly, change the icon)?
Derive from source code, Xamarin toolbar will be rendered as CommandBar within UWP platform. If you want to edit three dot. the easy way is edit the default UWP CommandBar style, find the MoreButton button element, and replace FontIcon glyph property value with you want. The following is CommandBar segment style that replace the three dot with heart.
<Button
x:Name="MoreButton"
Grid.Column="1"
MinHeight="{ThemeResource AppBarThemeCompactHeight}"
Padding="{ThemeResource CommandBarMoreButtonMargin}"
VerticalAlignment="Top"
Control.IsTemplateKeyTipTarget="True"
Foreground="{TemplateBinding Foreground}"
IsAccessKeyScope="True"
Style="{StaticResource EllipsisButtonRevealStyle}"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CommandBarTemplateSettings.EffectiveOverflowButtonVisibility}">
<FontIcon
x:Name="EllipsisIcon"
Height="15"
VerticalAlignment="Top"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="15"
Glyph="" />
</Button>
There are many icons that you can customize. You can refer to Segoe Fluent Icons font
Note: You need to the set the margin of the FontIcon to adjust the icon vertically and horizontally centered.

How to implement a visual busy/working indicator in Exrin?

Context
I am discovering step by step Exrin infrastructure. I explored that there are many ready to use infra element to implement command execution in background. Among those I see IsBusyDelay, VisualState.IsBusy, Timeout message, etc. I also know that Exrin does not depend on Xamarin.Forms, so I suppose, no real visual implementation should be provided by Exrin, that very last step remains on me. (which is cool, let me decide the UI experience)
In my ViewModel I set IsBusyDelay = 1000;. The background task is started by Execution.ViewModelExecute(... my task here ..., currently 5000msec delay )
Question
I suppose now I have to implement somewhere a handler(s) or override(s) which will be called automatically, and implement some visual UX to show and hide the a busy/inprogress UX feedback. I just do not know where and how...
This is something you would implement yourself in the view. For example, if you wanted something that covered the whole screen, with a loading indicator, you would add this to your UI.
<Grid HorizontalOptions="FillAndExpand"
IsVisible="{Binding VisualState.IsBusy}"
BackgroundColor="#E6272C30"
VerticalOptions="FillAndExpand">
<Grid HorizontalOptions="Center" VerticalOptions="CenterAndExpand"
Height="200">
<ActivityIndicator Grid.Row="0"
IsRunning="{Binding VisualState.IsBusy}"
IsVisible="{Binding VisualState.IsBusy}">
<ActivityIndicator.Scale>
<OnPlatform x:TypeArguments="x:Double" Android="1" iOS="1.3" />
</ActivityIndicator.Scale>
</ActivityIndicator>
</Grid>
</Grid>
You would add this at the bottom of the page, inside your existing Grid.
Then when IsBusy is trigger, it shows this as an overlay, with the activity indicator.
Of course that is only one way to do it. You could just have an activityindicator next to, or inside a button that was just clicked, or anything similar. It all depends on your UI design.

XAML Control padding overlapping other controls

I am doing a windows phone app that I have a 6 x 6 grid of checkboxes, They have to be sized specifically to line up with a background image. I can get the content size correct, but the entire size of the control is too big. I am using the default controltemplate, and I have tried to set the padding to alter the padding between the content and the outer margin of the control but it does not change.
<CheckBox x:Name="chkc1r1" Content="" HorizontalAlignment="Left" Margin="42,24,0,0"
VerticalAlignment="Top" Height="58" Width="42" Tap="chkc1r1_Tap"
BorderThickness="0" UseLayoutRounding="True" Padding="-10"/>
What am I missing here?
After doing some more digging, I found that the property that I looking for is the touch overhang property, has anyone ever altered this property? A very old post that says it can be done in the App.xaml, but did not say how. Anyone have any Ideas?
Anyone have any Ideas?
Specify your own control template for your checkboxes. In Blend, right-click on a checkbox, "Edit Template/Edit a copy", save. Then in visual studio edit the template, replacing "{StaticResource PhoneTouchTargetOverhang}" with e.g. "0".

WP7 PanoramaItem with Icon/Button next to Header

Windows Phone 7's People hub has an "all" panorama item with "search" and a "new" buttons right next to the header/title.
I can't seem to accomplish this with PanoramaItem in Visual Studio using the standard Panorama control. I don't know enough Silverlight/WPF either to be able to position something manually and control transitions/movement correctly.
How can I set a button (or any object, for that matter) to go alongside the header of a wp7 PanoramaItem?
Thanks!
A PanoramaItem Header doesn't have to be a string. It could be another StackPanel that has a CheckBox in it if you wanted, something like this:
<controls:PanoramaItem>
<controls:PanoramaItem.Header>
<StackPanel Orientation="Horizontal">
<TextBlock>Item</TextBlock>
<CheckBox>CheckBox</CheckBox>
</StackPanel>
</controls:PanoramaItem.Header>
<Grid>
<TextBlock>Your Content</TextBlock>
</Grid>
</controls:PanoramaItem>
So you can basically put anything in there that you want. Images, buttons, checkboxes, etc.

Why doesn't my progressbar show in the Windows Phone 7 emulator?

I have tried adding a progressbar to my Windows Phone 7 application, but it doesn't show in the emulator. Am I doing something wrong? Can you give me an example of how to implement the progressbar?
I actually put the progress bar on a grid with a Panorama control. It seems that the Panorama control sits on top of the progress bar unless you set its visibility to collapsed. Once I set the Panorama control's visibility to collapsed, I could see the progress bar.
Thanks for all your help, though.
With IsIndeterminate = false, you simply write code to update ProgressBar.Value to reflect how far through your processing your are.
This assumes you can quantify your progress of whatever processing you are doing in terms of a percentage.
For cases where you can't quantify this, say for example downloading content of unknown size, you can set IsIndeterminate = true.
Early on it was recognised the storyboards used to implement the IsIndeterminate = true ProgressBar animation were very costly and had not been implemented on the render thread.
In response Jeff Wilcox posted this solution.
Jeff Wilcox – A high performance ProgressBar for Windows Phone
And this update, which Matt has referred you to.
Jeff Wilcox – Windows Phone performance progress bar update: part 2, remember to turn IsIndeterminate off when not needed!
Do not use the progres bar which ships with the SDK.
Use this instead.
You use it like this (from the above linked page):
<ProgressBar HorizontalAlignment="Left" VerticalAlignment="Center"
IsIndeterminate="{Binding IsProgressBarVisible}"
Style="{StaticResource PerformanceProgressBar}"
Visibility="{Binding IsProgressBarVisible, Converter={StaticResource VisibilityConverter}}" />
You either need to set a value on it, or set IsIndeterminate=true, or it doesn't show/do anything.
You can set the Canvas.ZIndex property to put in front of the panorama controls.
E.g.
<ProgressBar x:Name="ProgressBar"
Canvas.ZIndex="100"
Width="400" Height="30"
IsIndeterminate="True"/>

Resources