c# wpf change DoubleAnimation "To" when load (in <Window.Resources>) - c#

I use this code to animate an Image from left to right
but I want To="100" to window width
how to change DoubleAnimation "To" when window load or resize ?
xaml :
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" ResizeMode="CanResize" WindowState="Normal" WindowStyle="ToolWindow" Loaded="Window_Loaded">
<Window.Resources>
<Storyboard x:Key="PlayAnimation" Storyboard.TargetProperty="(Canvas.Left)">
<DoubleAnimation From="0" Duration="0:0:1" RepeatBehavior="Forever" To="100" />
</Storyboard>
</Window.Resources>
<Grid>
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="1" />
<GradientStop Color="#FF5AC0FF" Offset="0" />
</LinearGradientBrush>
</Grid.Background>
<Canvas>
<Image Cursor="Hand" Height="205" HorizontalAlignment="Left" Margin="74,78,0,0" Name="image2" Source="I:\a.png" Stretch="Fill" VerticalAlignment="Top" Width="200" />
</Canvas>
</Grid>
</Window>
C# code :
private void Window_Loaded(object sender, RoutedEventArgs e)
{
Storyboard sb = this.FindResource("PlayAnimation") as Storyboard;
Storyboard.SetTarget(sb, this.image2);
sb.Begin();
}

If I understand your question correctly, you want to change the To to some different value in codebehind, something like this:
Storyboard sb = this.FindResource("PlayAnimation") as Storyboard;
(sb.Children[0] as DoubleAnimation).To = 200;
Storyboard.SetTarget(sb, this.image2);
sb.Begin();

Related

what to do to begin my c# uwp animation in onclik?

my code in xml is self explanatory to the seniors in uwp
Unsccestful search of several hours in inet
and very few and complex (beyond my need) animation/layout/components found
its a simple qwestion but i am to totally unable to seize this problem
tried and so but no way to get the thing working
<Page
x:Class="App3.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App3"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Width="800" Height="800" >
<Page.Resources>
<LinearGradientBrush x:Key="mibrush">
<GradientStop Color="Red" Offset="0"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="btnbrush">
<GradientStop Color="Yellow" Offset="0"/>
<GradientStop Color="Orange" Offset="1"/>
</LinearGradientBrush>
</Page.Resources>
<Grid Background="{StaticResource mibrush}" BorderThickness="10">
<Button x:Name="miboton" Content="Button" Click="Button_Click" Height="150"
Margin="444,598,0,0" Width="200">
<Button.Resources>
<Storyboard x:Key="buttonAnimation" x:Name="buttonAnimation">
<DoubleAnimation Storyboard.TargetName="miButton"
Storyboard.TargetProperty="(Canvas.Left)" To="200" Duration="0:0:5" AutoReverse="True"
/>
</Storyboard>
</Button.Resources>
</Button>
</Grid>
</Page>
now my cs part of the mainpage
namespace App3{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs args)
{
buttonAnimation.Begin();
}
}
}
crash componets with not installed exception.i can do keyframes animation,an other ones
but the book treats this chapters as standalone not telling me where to start a how to start animations .
In fact i have to idea how to treat event simplest tiggers of animations.Pls some patience with me im nooby in this language.
You need to check the TargetName and Button Name.
These two should be the same.
<Button x:Name="miboton"
<DoubleAnimation Storyboard.TargetName="miButton"

Animation Shapes in UWP

How can I use scale animation to scaling the Shapes like Path, Rectangle, ... without memory increasing.
It seems that UWP uses BitmapCache by default in Scale animation and this is because UWP tries to use BitmapCache for smooth animation but I think UWP can clip the BtimapCache to decrease memory usage.
Here is my simple code which builds in Windows10 v1903.
<Page.Resources>
<Storyboard x:Name="MyStoryboard" >
<DoubleAnimation To="{Binding MyScale}" Duration="0:0:0.3" Storyboard.TargetName="CompositeTransform"
Storyboard.TargetProperty="ScaleX"/>
<DoubleAnimation To="{Binding MyScale}" Duration="0:0:0.3" Storyboard.TargetName="CompositeTransform"
Storyboard.TargetProperty="ScaleY"/>
</Storyboard>
</Page.Resources>
<Grid Background="Transparent">
<Ellipse x:Name="path" Fill="Red" VerticalAlignment="Top" HorizontalAlignment="Left"
StrokeThickness="1" Stroke="#FF000000" Width="200" Height="100"
>
<Ellipse.RenderTransform>
<CompositeTransform x:Name="CompositeTransform" ></CompositeTransform>
</Ellipse.RenderTransform>
</Ellipse>
</Grid>
and C#:
private void MainPage_OnPointerWheelChanged(object sender, PointerRoutedEventArgs e)
{
if (e.GetCurrentPoint(this).Properties.MouseWheelDelta > 0)
MyScale *= 2;
else
MyScale /= 2;
MyStoryboard.Begin();
}
when the user uses the mouse wheel and tries to zoom-in, the memory is increasing.
Is there anything wrong with my code?
To simplify this question I'm going to compare UWP and WPF in big objects. so I create solutions in both UWP and WPF with just one shape in MainPage. Here are the solutions:
UWP:
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Rectangle Width="20000" Height="20000" Fill="Red" Stroke="Black" />
</Page>
WPF:
<Window x:Class="TestScaleBigPath.MainWindow"
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"
mc:Ignorable="d"
WindowState="Maximized" >
<Rectangle Width="20000" Height="20000" Fill="Red" Stroke="Black" />
</Window>
WPF only takes 53MB memory while UWP takes 950MB. Here are the Diagnostics Sessions:
UWP
WPF

White space between menu and window

Using the menu control in a xaml window, I have this annoying white space between the window border and the docking panel.
The menu itself is inside a stackpanel:
<Window x:Class="COZView.Shell"
xmlns:ad="clr-namespace:AvalonDock;assembly=AvalonDock"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sc="clr-namespace:COZView.StaticContent"
xmlns:ve="clr-namespace:COZView.View_Edit"
Title="COZView" Width="1024" Height="800" Icon="/COZView;component/Images/COZView.png"
Loaded="OnLoaded" IsVisibleChanged="isVisibleChanged" Closing="OnClosing">
<Grid x:Name="ShellRegion">
<StackPanel Height="Auto" Orientation="Vertical">
<Menu x:Name="menu">
<!-- MENU ITEMS REMOVED -->
</Menu>
<Grid x:Name="DockingRegion" >
<ad:DockingManager x:Name="DockManager">
<ad:ResizingPanel>
<ad:DocumentPane Margin="0,0,0,0">
<sc:StartPage Title="Home Page" VerticalContentAlignment="Stretch"
onProjectOpenFail="StartPage_onProjectOpenFail"
onProjectOpenSuccess="StartPage_onProjectOpenSuccess"
onProjectCreateSuccess="StartPage_onProjectCreateSuccess"
onProjectCreateFail="StartPage_onProjectCreateFail"/>
</ad:DocumentPane>
<ad:DockablePane ad:ResizingPanel.ResizeWidth="300" x:Name="ExplorerPane" FontSize="14" FontWeight="Bold">
<sc:AboutTab x:Name="about" Title="About" FontSize="14" FontWeight="Bold"/>
<sc:ProcessExplorer x:Name="pxProcessExplorer" Title="Process Explorer" FontSize="14"/>
<sc:DataExplorer x:Name="adDataExplorer" Title="Data Explorer" FontSize="14"/>
<!--<sc:UREPExplorer x:Name="adUREPExplorer" Title="UREP Custom Navigation" FontSize="14" Visibility="Hidden"/>-->
</ad:DockablePane>
</ad:ResizingPanel>
</ad:DockingManager>
</Grid>
</StackPanel>
</Grid>
How do i remove the white space? Do I have to surrond it in something? Should the menu be in a different container?
Its just the default menu style where Background is defined as
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#FFF6F6F6" Offset="0.25" />
<GradientStop Color="#FFEAE8E8" Offset="0.25" />
<GradientStop Color="#FFDCD9D9" Offset="0.8" />
<GradientStop Color="#FFFFFFFF" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
Define a different background if you dont like the #FFFFFFFF bottom line.

Template Button for reuse in code

I'm sorry if this is very obvious, but it's been years since I used C#, and I can't seem to find the correct google search term for this.
I am trying to create a button template in XAML that will be used in a, for example, 2x2 grid. This button has to be added in code, because the user should be able to define how many buttons he wants during runtime. The button is supposed to contain another button and a label.
<Window x:Class="Soundboard.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="750" Width="1200">
<Window.Resources>
<ControlTemplate x:Key="myButton" TargetType="Button">
<Canvas x:Name="mainCanvas">
<Button x:Name="childButton" Height="30" Width="30" HorizontalAlignment="Right" VerticalAlignment="Top">
<Button.Background>
<ImageBrush ImageSource="Resources/picture.png"/>
</Button.Background>
</Button>
<Label x:Name="nameLabel" Content="Label" HorizontalAlignment="Center" VerticalAlignment="Bottom"></Label>
</Canvas>
</ControlTemplate>
</Window.Resources>
<Grid x:Name="myGrid">
</Grid>
I can call the button fine by adding this line in XAML myGrid (to test)
<Button Template="{StaticResource myButton}" Height="200" Width="200" Margin="300,0,0,0"></Button>
<Button Template="{StaticResource smyButton}" Height="200" Width="200" Margin="0,0,0,0"></Button>
But I don't seem to be able to find a way to add that button in code. This is one of my tries that will not work:
Button b = (Button)FindResource("myButton");
b.SetValue(Grid.RowProperty, r); // r is int from row for loop
b.SetValue(Grid.ColumnProperty, c); // c is int from column for loop
myGrid.Children.Add(b);
But b will always be null. Can someone help me? I am guessing I am using some wrong method in the XAML, but I really have no idea at the moment.
myButton is a ControlTemplate instead of a Button as currently being accessed in the code, so you may modify the code as follows
Button b = new Button();
b.Template = (ControlTemplate)FindResource("myButton");
so in above example you retrieve the ControlTemplate via FindResource method and apply it to a newly created button.
rest remains the same
Like this line and it has been used on app.xaml files :
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<SolidColorBrush x:Key="ListBoxItemDisabledForegroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxItemPointerOverBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxItemPointerOverForegroundThemeBrush" Color="#f7f6f6" />
<SolidColorBrush x:Key="ListBoxItemPressedBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxItemPressedForegroundThemeBrush" Color="#f7f6f6" />
<SolidColorBrush x:Key="ListBoxItemSelectedBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxItemSelectedDisabledBackgroundThemeBrush" Color="#66FFFFFF" />
<SolidColorBrush x:Key="ListBoxItemSelectedDisabledForegroundThemeBrush" Color="#99000000" />
<SolidColorBrush x:Key="ListBoxItemSelectedForegroundThemeBrush" Color="#f7f6f6" />
<SolidColorBrush x:Key="ListBoxItemSelectedPointerOverBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxBorderThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxDisabledForegroundThemeBrush" Color="#66FFFFFF" />
<SolidColorBrush x:Key="ListBoxFocusBackgroundThemeBrush" Color="#f7f6f6" />
<SolidColorBrush x:Key="ListBoxForegroundThemeBrush" Color="#f7f6f6" />
</ResourceDictionary>

how to move a button in WPF

XAML code is below
<Window x:Class="DenemeWpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<DockPanel Width="Auto"
VerticalAlignment="Stretch"
Height="Auto"
HorizontalAlignment="Stretch"
Grid.ColumnSpan="1"
Grid.Column="0"
Grid.Row="0"
Margin="0,0,0,0"
Grid.RowSpan="1">
<StackPanel>
<StackPanel.Background>
<LinearGradientBrush>
<GradientStop Color="White" Offset="0" />
<GradientStop Color="DarkKhaki" Offset=".3" />
<GradientStop Color="DarkKhaki" Offset=".7" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</StackPanel.Background>
<StackPanel Margin="10">
<Button Name="simpleButton"
Click="simpleButtonClick"
KeyDown="simpleButton_KeyDown">Simple</Button>
<Button Name="cubeButton"
Click="cubeButtonClick">Cube</Button>
</StackPanel>
</StackPanel>
<Viewport3D Name="mainViewport"
ClipToBounds="True">
<Viewport3D.Camera>
<PerspectiveCamera FarPlaneDistance="100"
LookDirection="-11,-10,-9"
UpDirection="0,1,0"
NearPlaneDistance="1"
Position="11,10,9"
FieldOfView="70" />
</Viewport3D.Camera>
<ModelVisual3D>
<ModelVisual3D.Content>
<DirectionalLight Color="White" Direction="-2,-3,-1" />
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</DockPanel>
</Grid>
</Window>
this is inide XAML.cs
private void simpleButton_KeyDown(object sender, KeyEventArgs e)
{
if (e.Key == Key.P) {
//something to move the simpleButton
}
}
I want to move simpleButton when P is pressed from keyboard, but I can't seem to find any method or way to do that.
if animation is not required just do
if (e.Key == Key.P)
{
cubeButton.Margin = new Thickness(60, 50, 50, 60);
}
left,top,right,bottom should be numbers
and you have added keydown event to button so button must be focused in order to receive the keydown event
also look at TranslateTransform in WPF
to move the button within the grid you have to handle the keydown event of the MainWindow, see following example:
private void Grid_KeyDown(object sender, KeyEventArgs e)
{
if (e.Key == Key.P)
{
button1.Margin = new Thickness(2, 2, 2, 2);
}
}
Also if you have not explained how the focus on the active form KeyDown event will not be
recalled.
Bye
You can move it many ways. You could put it on a Canvas control and change its Canvas.Left or Canvas.Top. You could put it inside a Grid and change its Grid.Row or Grid.Column. Probably the most flexible way is to apply a TranslateTransform to it, which will also move it the amount you specify.

Categories