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>
Related
I have a button inside a DataTemplate of a ListBox.
Whenever a button is added to the Listbox,I want to animate the appearance of the new button by setting the opacity from minimum to maximum.
How do I do this?
You could listen to Loaded event. When Loaded wpf will trigger your animation.
Here is an example how you could achieve that:
<Button Height="23" Margin="102,95,100,0" Name="button3" VerticalAlignment="Top" Content="Opacity">
<Button.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
From="1"
To="0"
Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
Is there a way to change the TabIndex (in XAML only) when a button is clicked.
Below is my try following this article and one on my own which is commented.
Thanks!
<StackPanel>
<Button x:Name="Button" Content="Go" />
<TabControl x:Name="Tab">
<TabItem Header="First">
<TextBlock Text="First" />
</TabItem>
<TabItem Header="Second">
<TextBlock Text="Second" />
</TabItem>
<TabControl.Triggers>
<EventTrigger RoutedEvent="Button.PreviewMouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<Int32AnimationUsingKeyFrames
Duration="0"
Storyboard.TargetName="Tab"
Storyboard.TargetProperty="TabIndex">
<DiscreteInt32KeyFrame
KeyTime="0"
Value="1" />
</Int32AnimationUsingKeyFrames>
<!--<Int32Animation
Duration="0"
Storyboard.TargetName="Tab"
Storyboard.TargetProperty="TabIndex"
FillBehavior="HoldEnd"
By="1"
From="0"
To="1" />-->
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TabControl.Triggers>
</TabControl>
</StackPanel>
Edit: Use SelectedIndex instead of TabIndex to change the current tab.
Your event trigger is misplaced. Instead of placing the trigger on TabControl, place trigger on StackPanel.
<StackPanel.Triggers>
<EventTrigger RoutedEvent="Button.PreviewMouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<Int32AnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="Tab"
Storyboard.TargetProperty="TabIndex">
<DiscreteInt32KeyFrame KeyTime="0"
Value="1" />
</Int32AnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</StackPanel.Triggers>
Reason:
Button.PreviewMouseLeftButtonDown is a tunnelling routed attached event i.e. it will start from root element and continue to tunnel until it reaches actual sender. So, it will start from window or UserControl and will continue to tunnel until it reaches Go button. It won't tunnel to TabControl since it is sibling of button and not a parent of TabControl.
But it will work if you place it on StackPanel since StackPanel is parent of TabControl and Button. Before tunnelling to GO Button, it will pass via StackPanel. Hence, your storyBoard will work.
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
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">