I am new to silverlight and I want to trigger an even when the storyboard finsihes or ends. How would I go on doing that. I already have one trigger in storyboard at mouse enter. I am not sure if I can add more events there.
thanks
Use the "StoryBoardComplete" Behavior. You'll find it in the Assets panel under "Behaviors".
EDIT: Sorry, I answered in a hurry and incorrectly from memory. I should have given more details when you said you were new to Silverlight and I should have verified my answer.
CORRECTED ANSWER:
Use a "StoryboardCompletedTrigger" on a Behavior. Let's say you want to change the Fill property of a Rectangle when your Storyboard completes. Add a Rectangle to your application:
Go to the Assets panel (same tab group as the Projects panel). Open the category titled "Behaviors" and locate the "ChangePropertyAction".
Drag and drop one onto the Rectangle. Objects and Timeline will now look like so:
Note that the ChangePropertyAction item is selected. Now go to the Properties panel:
In the Trigger section, click on the "New" button that I've highlighted for you. This will open a dialog and let you pick a different TriggerType. In this case you want a "StoryboardCompletedTrigger":
Fill in the Storyboard and PropertyName values.
Now when Storyboard1 completes the Rectangle's Fill property should change to Red. Here is the compelte XAML code for this simple example:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" mc:Ignorable="d"
x:Class="SilverlightApplication2.MainPage"
Width="640" Height="480">
<UserControl.Resources>
<Storyboard x:Name="Storyboard1">
<DoubleAnimation Duration="0:0:0.9" To="-360" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Rectangle x:Name="rectangle" Fill="#FF0000F7" HorizontalAlignment="Left" Margin="86,133,0,225" Stroke="Black" Width="210" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<CompositeTransform/>
</Rectangle.RenderTransform>
<i:Interaction.Triggers>
<ei:StoryboardCompletedTrigger Storyboard="{StaticResource Storyboard1}">
<ei:ChangePropertyAction PropertyName="Fill">
<ei:ChangePropertyAction.Value>
<SolidColorBrush Color="Red"/>
</ei:ChangePropertyAction.Value>
</ei:ChangePropertyAction>
</ei:StoryboardCompletedTrigger>
</i:Interaction.Triggers>
</Rectangle>
<Button Content="Button" HorizontalAlignment="Left" Height="50" Margin="86,0,0,98" VerticalAlignment="Bottom" Width="110">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</Grid>
YMMV: This approach is for use with Behaviors. Without knowing your situation I can't make a better recommendation, but this is the typical way to accomplish what you want.
Related
In a fresh Universal Windows Platform app, I am trying to set the Background of an ItemsControl. But it doesn't seem to do anything. The only changes I've made to the VS template are in MainPage.xaml, which now looks like this:
<Page
x:Class="UWPPlayground.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWPPlayground"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" x:Name="Hello">
<Grid Background="Blue">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*">
</ColumnDefinition>
<ColumnDefinition Width="*">
</ColumnDefinition>
</Grid.ColumnDefinitions>
<ItemsControl Grid.Row="0" Grid.Column="0" Width="60" Height="30" Foreground="Wheat" Background="White">
<TextBlock Text="Hello World!"></TextBlock>
<TextBlock Text="Can you see this?"></TextBlock>
</ItemsControl>
<Grid Grid.Row="0" Grid.Column="1" Background="Purple"></Grid>
</Grid>
</Page>
The result is shown below. The Foreground property of the ItemsControl seems to be working just fine, as the TextBlocks have wheat-colored text. Due to the small size of the control, the text is cut-off, as expected. The Background, however, is not visible. What am I missing?
ItemsControl inherits from Control, which defines lots of visual properties at the base class level which do not necessarily influence the appearance of the control directly. These properties are usually referenced via TemplateBindings in the ControlTemplate, which then gives rise to the desired appearance. Whether or not the template uses these properties determines whether or not they have any use at all.
You'll notice that changing a UserControl's background also does nothing (for the same reason mentioned above).
Non-control classes like Grid, Rectangle, Border (etc) do honor such properties out of the box, since these are the elements typically used in the templates of controls to produce a certain appearance.
The reason why ItemsControl-derived classes (like ListView) do honor the background property is because some root-level element in its template references the Background property (via TemplateBinding). ItemsControl on its own has no template.
I think the reason why the Foreground property works is because it will inherit its value from the parent. (Some dependency properties can inherit their values like this).
The easiest way to set a background for your ItemsControl would be to wrap it in a Border (or Grid, they're essentially the same now) and set a background brush on that instead.
I don't recommend you do what follows for your example, but this is what you would need to do if you wanted the Background property to work:
<ItemsControl Background="Red">
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<Grid Background="{TemplateBinding Background}">
<ItemsPresenter/>
</Grid>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
I have written the user control below and I want to display a clock image on the button control. The image has BuildAction set to Resource. It shows up perfect in the XAML design screen, but when I run the application the button is blank. What am I doing wrong?
<UserControl x:Class="App_Process_Admin.User_Controls.TimePicker"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="30" d:DesignWidth="150">
<UserControl.Resources>
<ResourceDictionary>
<Image x:Key="ClockImage" Source="Icons/Clock.png"/>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="180" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60*" />
<ColumnDefinition Width="20*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="0" Name="TimeField" Text="" />
<Button Grid.Row="0" Grid.Column="1" Content="{StaticResource ClockImage}" Click="SetTime_Click" />
<local:ClockPopUp x:Name="ClockPopUp1" Grid.Row="1" Grid.Column="0" Visibility="Hidden"></local:ClockPopUp>
</Grid>
</UserControl>
I had the same problem, i resolve it this way (in visual studio 2019, wpf application) :
put your images in your project in a folder
Create an image in xaml and put your source
At this point for me the images are displayed in the design window but not at the runetime
Access to your image in your project with the solution explorer
Select each image and open the property window
Set "Generation action" to "Resource" and "Copy in the repository" To "always copy"
I have done that and i can see my images at runtime :)
PS : sorry for my english, i'm french
Image is a control. If you add it to resources his way, it'll only be displayed in the last place it's added to and will disappear from all previous places. You can fix this by adding x:Shared=False:
<Image x:Key="ClockImage" x:Shared="False" Source="Icons/Clock.png"/>
This way, a new Image control will be created every time it's requested.
Alternatively, you can create a button style with Image in its ContentTemplate and add BitmapImage to the resources directly:
<BitmapImage x:Key="Bitmap" UriSource="Icons/Clock.png"/>
<Style x:Key="ButtonImage" TargetType="Button">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Image Source="{TemplateBinding Content}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Now you can create buttons with images this way:
<Button Content="{StaticResource Bitmap}" Style="{StaticResource ButtonImage}"/>
Image controls will be created by the framework based on the template.
In my case, it was needed to first add the images into project, by drag-and-drop'ing them into the folder where your .xaml is in solution explorer.
Then, i added to .xaml:
<Window.Resources>
<BitmapImage x:Key="Icon" UriSource="Images/Image.png"/>
</Window.Resources>
<Button x:Name="SomeButton" Background="Gray">
<Image Source="{StaticResource Icon}"/>
</Button>
And that's it.
Also, if you have complicated project with many folders, you can use ../ in UriSource to go up a folder from the current, where .xaml file is located
In my application, I am having a ListView. ListView lists a set of images.
So when the application is running, and when that page is loaded, a list of images are shown.
<ListView ItemsSource="{Binding imageLists}" Background="Red" Tapped="ListView_Tapped">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Background="Green">
<Image Source="{Binding imagePath}" CacheMode="BitmapCache" Stretch="UniformToFill"/>
<StackPanel Name="imageTitle" Visibility="Collapsed" Background="Blue"
HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Foreground="White" Text="Dumy Image Title" FontSize="10"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
As you can see from the code, I have one image & stackpanel inside the listview. And the stackpanel's visibility has been set to collapsed for convenience.
The StackPanel imageTitle resides inside the ListView. Stackpanel contains a TextBlock housing the images name. For now it's dumy text.
On Tapping any image in the list, I am trying to make the stackPanel visible.
The Code Behind:
private void ListView_Tapped(object sender, TappedRoutedEventArgs e)
{
imageTitle.Visibility = Windows.UI.Xaml.Visibility.Visible;
}
Since the stackpanel is inside the listview & I am trying to make it visible on the tap event of the listview, I am not able to acheive the needed result. I know my code is wrong.
If I specify the stackpanel outside the listview, I can make it visible using the code I gave inside the ListView_Tapped function. But even in that case, I need to show the stackpanel (name of the image I clicked) inside the listview item (image I clicked).
Any help??
Can this be achieved using only XAML?
Here's a pure xaml way.
Rather than changing the Visibility of the imageTitle (not a great UX), let's change its Opacity to make its appearing more interesting.
First we need to create a storyboard inside this data template. This storyboard will fade in the imageTitle in 400ms.
And then we drag a ControlStoryboard behavior from Expression Blend's Asset panel onto the top level Grid. Basically we want the storyboard to fire off when this Grid is tapped.
Please see below code for reference.
<DataTemplate x:Key="GroupTemplate">
<Grid Background="Green">
<Grid.Resources>
<Storyboard x:Name="ShowImageTitleStoryboard">
<DoubleAnimation Duration="0:0:0.4" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="imageTitle"/>
</Storyboard>
</Grid.Resources>
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Tapped">
<Media:ControlStoryboardAction Storyboard="{StaticResource ShowImageTitleStoryboard}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<Image Source="{Binding Image}" CacheMode="BitmapCache" Stretch="UniformToFill"/>
<StackPanel x:Name="imageTitle" Background="Blue"
HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0">
<TextBlock Foreground="White" Text="Dumy Image Title" FontSize="10"/>
</StackPanel>
</Grid>
</DataTemplate>
Apart from JustinXL's answer it can also be done by using ChangePropertyAction. Also pure XAML:
<DataTemplate>
<Grid Background="Green">
<Image Source="{Binding imagePath}" CacheMode="BitmapCache" Stretch="UniformToFill">
<i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="Tapped">
<ic:ChangePropertyAction TargetObject="{Binding ElementName=imageTitle}" PropertyName="Visibility" Value="Visible"/>
</ic:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Image>
<StackPanel Name="imageTitle" Visibility="Collapsed" Background="Blue"
HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Foreground="White" Text="Dumy Image Title" FontSize="10"/>
</StackPanel>
</Grid>
</DataTemplate>
It's just another way to change a property - JustinXL's answer will provide nice animation with opacity, which will look much better.
I dunno why you specifically want to handle the scenario using XAML. For the Microsoft's recommended MVVM model you should bind a property to your element field and then you can write a converter for the same to return back "Visible" or "Collapse".
I've created a simple user control for my xaml project, but as you can see from my image i cant seem to be able to do certain things.
Ignore the red line, its the size of the control for illustrate its size.
It's placement should be middle of the screen:
<Client:TileMenu HorizontalAlignment="Center" VerticalAlignment="Center" Name="TileOverlayMenu" Background="Azure" BorderBrush="Aquamarine" BorderThickness="3" />
And as you see its background color should be "Azure" with a blueish border of 3.
Why is this?
In the background I have a Canvas:
<Grid x:Name="ContentPanel" Grid.Row="0" Margin="12,0,12,0">
<Canvas Name="GameCanvas">
<Canvas.RenderTransform>
<CompositeTransform x:Name="CanvasRenderTransform" />
</Canvas.RenderTransform>
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DragStarted="GestureListener_DragStarted" DragDelta="GestureListener_DragDelta" Tap="GestureListener_Tap" PinchStarted="GestureListener_PinchStarted" PinchDelta="GestureListener_PinchDelta"/>
</toolkit:GestureService.GestureListener>
</Canvas>
<Client:TileMenu HorizontalAlignment="Center" VerticalAlignment="Center" Name="TileOverlayMenu" Background="Azure" BorderBrush="Aquamarine" BorderThickness="3" />
</Grid>
As for my third problem, having the events in the canvas causes the Move slider to be interrupted, making me only able to push it a little each time :-/
In case TileMenu is a UserControl you would have to set these properties on the top level container in the UserControl's XAML as this defines the entire visual structure of the control.
You could bind to the appropriate values in the UserControl, however:
<UserControl x:Class="YourNamespace.TileMenu" ...
x:Name="tileMenu">
<Border BorderBrush="{Binding BorderBrush, ElementName=tileMenu}"
BorderThickness="{Binding BorderThickness, ElementName=tileMenu}">
<Grid>
...
</Grid>
</Border>
</UserControl>
I have a simple Rectangle in XAML
<Rectangle x:Name="rect" IsTapEnabled="True" Height="100" Width="100" Fill="#FF72BB5C" Stroke="#FFFB0000" Tapped="rect_Tapped"/>
It draws fine but when I try and click on it nothing happens.
I have tried making the stroke bigger and clicking that and nothing.
I have tried lots of the other events associated with the Rectangle and nothing fires.
Would there be a problem calling the Tapped event when I'm using a mouse and not a touch screen?
Just faced the same issue. Solved with IsHitTestVisible property for Rectangle and every view above it. True for rect and False for others. Though True is default, could be omitted.
I just found strange and funny solution for this.
If your layout looks like this:
<Grid>
<Canvas>
<Rectangle x:Name="rect" IsTapEnabled="True" Canvas.Top="100" Canvas.Left="100" Height="100" Width="100" Fill="#FF72BB5C" Stroke="#FFFB0000" Tapped="rect_Tapped"/>
</Canvas>
<TextBlock Name="Test" Text="Hi" />
</Grid>
Then change it to this:
<Grid>
<Canvas>
<Rectangle x:Name="rect" IsTapEnabled="True" Canvas.Top="100" Canvas.Left="100" Height="100" Width="100" Fill="#FF72BB5C" Stroke="#FFFB0000" Tapped="rect_Tapped"/>
</Canvas>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Name="Test" Text="Hi" />
</Grid>
I just added VerticalAlignment="Center" HorizontalAlignment="Center" to TextBlock and now it works. Don't know why, but works. I'm going to go deeper into this issue.