I'm new in programming (changing area, leaving Design) and pretty interested in WPF.
So I'm studying and doing some codes.
In this one, I'm trying to make an "invisible" grid (the gridNovoCliente, opacity = 0) to show up at a button click event (opacity = 1), with all its elements.
I want the grid/elements invisible until the user clicks the button.
But it's not working.
I've been Googling it for 3 days before decided to post here.
I get the error 'Set property 'System.Windows.Media.Animation.Storyboard.Target' threw an exception.' at the EventTrigger line.
There will be more buttons once I get this one working, so I created a style.
Thanks in advance!
Here's the code.
<Grid>
<Button Style="{StaticResource templateButton}" Name="novoCliente" Content="Novo
Cliente" Margin="20,41,0,598" TextBlock.TextAlignment="Center">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.Target="gridNovoCliente"
Storyboard.TargetProperty="Opacity"
From="0"
To="1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Grid Height="705" HorizontalAlignment="Left" Margin="131,12,0,0" Name="gridNovoCliente" VerticalAlignment="Top" Width="859" Background="#FF6FAA6F" Opacity="0">
<TextBox Height="70" HorizontalAlignment="Left" Margin="270,250,0,0" Name="textBox1" VerticalAlignment="Top" Width="358" />
</Grid>
</Grid>
<Canvas>
<Button Name="novoCliente" Content="Novo
Cliente" Margin="20,41,0,598" TextBlock.TextAlignment="Center">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click" >
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="gridNovoCliente"
Storyboard.TargetProperty="Opacity"
From="0"
To="1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
<Grid Height="705" HorizontalAlignment="Left" Margin="131,12,0,0" Name="gridNovoCliente" VerticalAlignment="Top" Width="859" Background="#FF6FAA6F" Opacity="0">
<TextBox Height="70" HorizontalAlignment="Left" Margin="270,250,0,0" Name="textBox1" VerticalAlignment="Top" Width="358" />
</Grid>
</Canvas>
It's very simple, please try above xaml, it's works for me. Thanks
Related
I have a StackPanel and a button. Initallty the button content should be << When the button is clicked the StackPanel content should collapse and the button text should become >> where collapse is happening correctly. Again when the same button is pressed I want the content to show up and text should be << which I am unsure how to do.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" x:Name="stkEasyLocatePanel" Loaded="stkEasyLocatePanel_Loaded" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0,0,0,28"></StackPanel>
<Button Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,5,0,0" Panel.ZIndex="140" Height="20" Width="25" Background="Transparent" Content="<<">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard x:Name="HideStackPanel">
<DoubleAnimation Storyboard.TargetName="stkEasyLocatePanel" Storyboard.TargetProperty="Width" From="330" To="0" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<!--This part dosent work. The content collapses and shows on a single click. But I want it to happen on two clicks of same button-->
<Storyboard x:Name="ShowStackPanel">
<DoubleAnimation Storyboard.TargetName="stkEasyLocatePanel" Storyboard.TargetProperty="Width" From="0" To="330" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
Replace Button with ToggleButton , and use code below as it is, and see if this solves your problem.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Width="330" x:Name="stkEasyLocatePanel" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0,0,0,28">
<Image Source="C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg"/>
</StackPanel>
<ToggleButton Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,5,0,0" Panel.ZIndex="140" Height="20" Width="25" Background="Transparent" Content="<<">
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<BeginStoryboard>
<Storyboard x:Name="HideStackPanel">
<DoubleAnimation Storyboard.TargetName="stkEasyLocatePanel" Storyboard.TargetProperty="Width" From="0" To="330" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="<<" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<BeginStoryboard>
<!--This part dosent work. The content collapses and shows on a single click. But I want it to happen on two clicks of same button-->
<Storyboard x:Name="ShowStackPanel">
<DoubleAnimation Storyboard.TargetName="stkEasyLocatePanel" Storyboard.TargetProperty="Width" From="330" To="0" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value=">>" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
</Grid>
I would suggest to keep a variable in code behind (something like isCollaped) and then in code behind hookup to the click event of the button. Inside the click method of the button place some logic to hide or show the stack panel.
For example:
XAML
<StackPanel Grid.Column="0" x:Name="stkEasyLocatePanel" Loaded="stkEasyLocatePanel_Loaded" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0,0,0,28"></StackPanel>
//Add the Click event.
<Button Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,5,0,0" Panel.ZIndex="140" Height="20" Width="25" Background="Transparent" Content="<<" Click=Button_Click>
CODE BEHIND
bool isCollapsed = false;
private void Button_Click(object sender, RoutedEventArgs e)
{
if (isCollapsed)
{
//Create and run show Stackpanel animation
//Change the content of the button to "<<"
}
else
{
//Create and run hide Stackpanel animation
//Change the content of the button to ">>"
}
isCollapsed = !isCollapsed;
}
EDIT
As requested in the comment, this is an example on how you would animate from code behind.
if (isCollapsed)
{
DoubleAnimation showAnim = new DoubleAnimation();
showAnim.Duration = TimeSpan.FromSeconds(0.3);
showAnim.EasingFunction = new PowerEase() { EasingMode = EasingMode.EaseIn };
showAnim.From = 330;
showAnim.To = 0;
stkEasyLocatePanel.BeginAnimation(StackPanel.WidthProperty, showAnim);
//Change the content of the button to "<<"
}
I have the following code to animate the width of the ellipse forever until the window is closed. However, it throws XamlParseExceptionError. Could someone point out to me where I made the mistake?
`
</TextBlock>
<TextBlock x:Uid="ProductName" Localization.Attributes="$Content(Readable Unmodifiable)">
<TextBlock.ToolTip>
<TextBlock x:Uid="ProductNameTip" Localization.Attributes="$Content(ToolTip Readable Modifiable)">
A photo editor that will make everyone look beautiful
</TextBlock>
</TextBlock.ToolTip>
Amazing Photo Editor
</TextBlock>
<Ellipse Name="Circle"
Width="100"
Height="100"
Fill="Red">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.Target="Circle"
Storyboard.TargetProperty="Width"
From="1"
To="100"
Duration="0:0:5"
AutoReverse="True"
RepeatBehavior="Forever">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</StackPanel>
</Grid>
`
Use Storyboard.TargetName Attached Property instead of Storyboard.Target.
<DoubleAnimation Storyboard.TargetName="Circle"
The following XAML code creates a button with a border as its content. The border has a TextBlock as it's child. When you CLICK on the button, the border width gradually grows.
Since the text block is inside the border it is not seen until you click the button.
Now my requirements are:
There should be a text displayed on the button even before you click it.
Even after you click the button, only the border should animate while the button text remains in its center position.
<Button Name="button5" Width="100" Margin="10" HorizontalContentAlignment="Left">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="myBorder" Storyboard.TargetProperty="Width" From="0" To="94" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
<Button.Content>
<Border Background="Gray" Width="0" Name="myBorder">
<TextBlock>Search</TextBlock>
</Border>
</Button.Content>
</Button>
I will appreciate if anyone is able to provide answers with working XAML code.
I've modified your XAML only slightly:
<Button Name="button5" Width="100" Margin="10" HorizontalContentAlignment="Left">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="myRectangle" Storyboard.TargetProperty="Width" From="0" To="94" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
<Button.Content>
<Grid>
<Rectangle x:Name="myRectangle" Fill="Gray" Width="0" HorizontalAlignment="Left" />
<TextBlock Text="Search" />
</Grid>
</Button.Content>
</Button>
For the Button's content, you could use a Grid which contains your Border and the TextBlock. Since no columns or rows are specified, the TextBlock and the Border are drawn on top of each other. It situations like this where the Border does not have content, I prefer to use a Rectangle instead since it is bit lighter. Hope this helps!
Hi iam trying to make an Wpf TextBlock to blink. I want like when im clicking on an button then the textblock blinks. How can i achive this.
I have tried the following.
<TextBlock Name="txtBlockScannerText" Margin="10,0,0,0" Style="{StaticResource TextBlockNormal}" Text="Skanna Inleverans listan">
<TextBlock.Triggers>
<EventTrigger RoutedEvent="TextBlock.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard BeginTime="00:00:00" RepeatBehavior="Forever" Storyboard.TargetName="txtBlockScannerText" Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)">
<ColorAnimation From="Black" To="Red" Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
But with this code it only blinks when my mouse enter it. How can i trigger the blink in an button click event. Or how do i call the event to blink. Thanks for help
Here is the solution
<TextBlock Name="txtBlockScannerText" Margin="10,0,0,0" Text="WELCOME"> </TextBlock>
<Button Content="Click Me" Height="23" HorizontalAlignment="Left" Margin="225,43,0,0" Name="button1" VerticalAlignment="Top" Width="75">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard BeginTime="00:00:00"
RepeatBehavior="Forever"
Storyboard.TargetName="txtBlockScannerText"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)">
<ColorAnimation From="Black" To="Blue" Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
There's no click event on a TextBlock. If you use a button with the textblock as content you can hook up your animation to the button's click event. You may need to style the button to remove 3D look or what else you may choose as default style for your buttons.
Make your trigger listen to the Loaded event rather than the MouseEnter event...
<EventTrigger RoutedEvent="TextBlock.Loaded">
I am trying to change the Background Color of the ParentGrid when the child control ( Button ) ChildButton is clicked
I want to achive this using Triggers but not sure if this is even possible
Please Suggest a way to DO this through XAML only
<Grid Name="ParentGrid" Background="Red">
<Button Name="ChildButton" />
</Grid>
Thanks
<Grid Name="ParentGrid" Background="Red">
<Button Name="ChildButton" Margin="100">
<Button.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0"
Storyboard.TargetName="ParentGrid"
Storyboard.TargetProperty="Background.Color" To="Blue"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>