Hi I got this Storyboard in WPF, that works great, but I need to load my user controls for Code Behind. (Some of them take some time to load, so I need to give the user info about the loading progress)
Anyway, this is my code right now.
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="businessCard"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:0.01">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
And I add them to my code with
<Grid Name="MyGrid">
<local:BusinessCard x:Name="businessCard"/>
<local:MailMessage x:Name="mailMessageCard"
DataContext="{Binding Path=SelectedItem, ElementName=foldersTreeView}" />
</Grid>
This Works, but as I mentioned I need to change it to run from Code Behind.
Was thinking about something like this, but I can't get the Binding to work.
var businessCard = new BusinessCard() {Name = "businessCard"};
MyGrid.Children.Add(businessCard);
Throws and Error
'businessCard' name cannot be found in the name scope of 'System.Windows.Controls.Grid'.
You can use the Storyboard.Target property instead of Storyboard.TargetName.
First remove the TargetName property of your XAML, and add a name to your animation, so you can reference it in code-behind:
<ObjectAnimationUsingKeyFrames x:Name="MyObjectAnimation" BeginTime="00:00:00"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:0.01">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
Then in your code-behind, after you create the object, update the animation:
var businessCard = new BusinessCard() {Name = "businessCard"};
MyGrid.Children.Add(businessCard);
MyObjectAnimation.SetValue(Storyboard.TargetProperty, businessCard)
Hope it helps!
Related
I can't change checkbox' background by using following code, but it works for Windows Store app (Windows 8.1). I want to know how to make it works for UWP?
this.checkBox.Background = new SolidColorBrush(Windows.UI.Colors.Yellow);
this.checkBox.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
For changing the Foreground and Background color of the checkbox, you need to update its template. You can do this by - Right-Click on your checkbox from the visual designer, then click on Edit Template > Edit a copy. This will create the default template for the CheckBox. (You can check out the whole template here)
This template has all the visual states for the checkbox. You will need to override the visual state that you need. For Example you do something like this to the "UncheckedNormal" state.
<VisualState x:Name="UncheckedNormal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="Your Fill Color here for only check part" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle"
Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Your foreground color here" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="Your background color here" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
This can also be written in C# but it is way too complex and editing styles in XAML is the recommended way of styling.
Hope this helps. Please feel free to add any questions you might have.
So this is probably a really simple answer. In my UWP app I've tried to start using the built-in Windows controls instead of my own buttons made from Borders around Textblocks. I'm doing this because it's simpler, but most importantly I need an easy to use toggle button.
I've learned about CommandBar and AppBarToggleButton and these seem to be exactly what I want. I'm able to set the background colour of the CommandBar just fine, but when toggled the AppBarToggleButton is always the user's accent colour. I need to be able to define it to match my app's branding (green). I have a feeling it requires me using some sort of theme as it's not in the xaml object's Brush properties menu, but I'm lost from then on out.
So this is my code, though it's very basic.
<CommandBar Background="{StaticResource MapButtonsBackgroundAcrylic}">
<AppBarToggleButton x:Name="tog_view_mode" Icon="View" Label="View Mode" Foreground="White"/>
<AppBarSeparator Foreground="White"/>
<AppBarToggleButton x:Name="tog_edit_mode" Icon="Edit" Label="Edit Mode" Foreground="White"/>
</CommandBar>
And this is what it gives me. My user accent colour is that blue. Also the change to black text isn't good.
As I'll have several toggles in my app, I'd like to either make a single style that I can assign them, or maybe change the accent colour that the app see's? I'm not sure what the correct procedure is here as I'm new to modifying built-in controls.
So I need a way for, when toggled,
The background to be green, say #FF008000
The foreground to be white.
Can anyone help me out?
You can override the style template for the AppBarToggleButton to achieve this.
To do this you need to right click on your AppBarToggleButton > Edit template > Edit a copy.
Then add the relevant code to the visual state. In your case the visual state is "Checked".
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckedHighlightBackground" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowCheckGlyph" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="Your color here(green)"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="OverflowContentRoot" />
</Storyboard>
</VisualState>
Hope this helps.. please feel free to ask any questions that you might have..
You should override the AppBarToggleButtonBackground and other brushes in your App.xaml (if you want to apply to the whole app), in the Resources section of your page (if you want to apply to a specific page) or the same inside the actual toggle button (if you want to apply to a single button). The available resource keys are listed in the documentation.
I have a question regarding of changing button color in WP 8.1 on touch down or tap. I've already figured out how to change the background when there is no interaction, but I want to also change the background color of the button if it is tapped to transparent. Is this possible?
You'll have to modify the control template, as the "Pressed" state background is hard-coded into the control as "PhoneForegroundBrush":
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
So copy-paste the entire default "ButtonBase" control template from the SDK, and modify the above parts as needed.
On the one hand, if you want a consistent pressed color throughout your app, then it's easy -- just change the hard-coded color. If on the other hand you want a different color for different buttons, then it's a bit trickier -- you'll have to subclass Button, and add a new "PressedBrush" dependency property to the control, then integrate that property into the control template.
Error: "Invalid attribute value for property Background."
XAML:
<VisualState x:Name="Pressed">
<Storyboard>
....
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="/Images/home_2_click.png" />
</ObjectAnimationUsingKeyFrames>
....
</Storyboard>
</VisualState>
you seems to apply background imag to a button during animation.
Certainly you are applying it in a wrong way.
you must do the following:
<DiscreteObjectKeyFrame KeyTime="0:0:1">
<DiscreteObjectKeyFrame.Value>
<ImageBrush ImageSource="" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
This will certainly solvers your problem. And if it does, then please mark this as an accepted answer.
thanx
I would like to display an animation gif such as loading... in my XAML as my procedure is progressing. I found out that this cannot be easily done in WPF as I loaded my Gif and it just shows the first frame. What are the best ways to display an animation in WPF.
I had this issue, until I discovered that in WPF4, you can simulate your own keyframe image animations. First, split your animation into a series of images, title them something like "Image1.gif", "Image2,gif", and so on. Import those images into your solution resources. I'm assuming you put them in the default resource location for images.
You are going to use the Image control. Use the following XAML code. I've removed the non-essentials.
<Image Name="Image1">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded"
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0:0:1" Storyboard.TargetProperty="Source" RepeatBehavior="Forever">
<DiscreteObjectKeyFrames KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="Images/Image1.gif"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrames>
<DiscreteObjectKeyFrames KeyTime="0:0:0.25">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="Images/Image2.gif"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrames>
<DiscreteObjectKeyFrames KeyTime="0:0:0.5">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="Images/Image3.gif"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrames>
<DiscreteObjectKeyFrames KeyTime="0:0:0.75">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="Images/Image4.gif"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrames>
<DiscreteObjectKeyFrames KeyTime="0:0:1">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="Images/Image5.gif"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Image.Triggers>
</Image>
You could embed a MediaElement
<MediaElement LoadedBehavior="Play" Source="path/to.file" />
or winforms PictureBox:
<wfi:WindowsFormsHost>
<winForms:PictureBox x:Name="pictureBoxLoading">
</winForms:PictureBox>
</wfi:WindowsFormsHost>
However, I'd recommend finding a way to do this in WPF. Have a look at StoryBoards and animations. Without knowing what you're trying to achieve or why you want to do this it's hard to advise further.
Simply Right Click on .gif file and change two properties:
Build Action : Embedded Resource
Copy To Output Directory : Copy if Newer
Then
<MediaElement x:Name="myGif" UnloadedBehavior="Manual" Source="giphy_s.gif" MediaEnded="MediaElement_MediaEnded"/>
and set Event For Continue Running
private void MediaElement_MediaEnded(object sender, RoutedEventArgs e)
{
myGif.Position = new TimeSpan(0, 0, 1);
myGif.Play();
}