How to cover expand to another controls wpf - c#
I have a code snippet like below. I want to click the test button to show the expander, and let the expander cover the TextBlock and ComboBox in the same row. I have tried somebody's solution to set ZIndex, but doesn't work. Anyone can help?
<Window.Resources>
<Storyboard x:Key="show" TargetProperty="Height">
<DoubleAnimation Storyboard.TargetName="TestRec" Duration="0:0:0.3" From="0" To="300"/>
</Storyboard>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Content="showRectangle" Click="Button_Click"/>
<TextBlock Text="Test TextBlock" Grid.Row="1"/>
<ComboBox Grid.Column="1" Grid.Row="1" SelectedIndex="0">
<ComboBoxItem Content="A"/>
<ComboBoxItem Content="B"/>
<ComboBoxItem Content="C"/>
<ComboBoxItem Content="D"/>
</ComboBox>
<Grid Grid.Row="1" Grid.ColumnSpan="2" x:Name="TestRec" Height="0">
<Expander Header="abc" IsExpanded="True">
<Expander.Content>
<ListView ItemsSource="{Binding List}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Expander.Content>
</Expander>
</Grid>
</Grid>
private void Button_Click(object sender, RoutedEventArgs e)
{
this.BeginStoryboard(FindResource("show") as Storyboard);
}
Set the background of the expander to White.
<Expander Header="abc" IsExpanded="True" Background="White">
That the solution to be reliable, I suggest you hide them in the Storyboard. Set for the controls names, in this case used TestTextBlock and TestComboBox:
<Window x:Class="MyProject.MainWindow"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
...
<Storyboard x:Key="show">
<DoubleAnimation Storyboard.TargetName="TestRec"
Storyboard.TargetProperty="Height"
Duration="0:0:0.3"
From="0"
To="300" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TestTextBlock"
Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<sys:Double>0.0</sys:Double>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TestComboBox"
Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<sys:Double>0.0</sys:Double>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
In this case it is also possible use DoubleAnimation if you will use the Opacity property. And according to another Storyboard you will show them by setting Opacity to 1.0.
Additional to #Bizz, you can set a style for your Expander, if pc is not in highcontrast mode,
set Background to white.
<Style.Triggers>
<DataTrigger Binding="{Binding Source={x:Static SystemParameters.HighContrast}}" Value="False">
<Setter Property="Background" Value="White" />
</DataTrigger>
<DataTrigger Binding="{Binding Source={x:Static SystemParameters.HighContrast}}" Value="True">
<Setter Property="Background" Value="{Binding Source={x:Static SystemColors.ActiveBorderBrush}}"/>
</DataTrigger>
</Style.Triggers>
Related
How to change textBlock.Foreground color when FlipView changed? c# UWP
I have a page with Grid, there are two textBlocks on it and a FlipView at the bottom <Grid> <TextBlock x:Name="txt1" Text="First"/> <TextBlock x:Name="txt2" Text="Second"/> <FlipView x:Name="flipView"> <RelativePanel Background="White"> //PanelContent </RelativePanel> <ScrollViewer> //ScrollViewerContent </ScrollViewer> </FlipView> </Grid> I want to change txt1 text color, when RelativePanel at the FlipView is active, and the same with txt2, when ScrollViewer is active. How can I do it?
Put the RelativePanel and ScrollViewer inside a FlipViewItem, and handle the SelectionChanged event of the flip view. Check the SelectedIndex of the flip view and change the Foreground according to the index.
You have multiple options to do that. Two of them using the DataTriggerBehavior:
Option 1: Solution with VisualStates
Add a VisualStateGroup containing two VisualStates to your VisualStateManager:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="RelativeSelected"/>
<VisualState x:Name="ScrollSelected">
<Storyboard>
<ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="txt1" d:IsOptimized="True"/>
<ColorAnimation Duration="0" To="#FFFB6700" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="txt2" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
and trigger them by calling a GoToStateAction:
<Interactivity:Interaction.Behaviors>
<Core:DataTriggerBehavior x:Name="RelativePanelSelectedTrigger" Binding="{Binding SelectedIndex,ElementName=flipView}" Value="0">
<Core:GoToStateAction StateName="RelativeSelected" />
</Core:DataTriggerBehavior>
<Core:DataTriggerBehavior x:Name="ScrollViewerSelectedTrigger" Binding="{Binding SelectedIndex,ElementName=flipView}" Value="1">
<Core:GoToStateAction StateName="ScrollSelected" />
</Core:DataTriggerBehavior>
</Interactivity:Interaction.Behaviors>
Here´s a complete sample:
<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Interactivity:Interaction.Behaviors>
<Core:DataTriggerBehavior x:Name="RelativePanelSelectedTrigger" Binding="{Binding SelectedIndex,ElementName=flipView}" Value="0">
<Core:GoToStateAction StateName="RelativeSelected" />
</Core:DataTriggerBehavior>
<Core:DataTriggerBehavior x:Name="ScrollViewerSelectedTrigger" Binding="{Binding SelectedIndex,ElementName=flipView}" Value="1">
<Core:GoToStateAction StateName="ScrollSelected" />
</Core:DataTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="RelativeSelected"/>
<VisualState x:Name="ScrollSelected">
<Storyboard>
<ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="txt1" d:IsOptimized="True"/>
<ColorAnimation Duration="0" To="#FFFB6700" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="txt2" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBlock x:Name="txt1" Text="First" Foreground="#FF0068FF"/>
<TextBlock x:Name="txt2" Text="Second"/>
<FlipView x:Name="flipView">
<RelativePanel x:Name="relativePanel" Background="White">
<TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="RelativePanel is selected" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</RelativePanel>
<ScrollViewer x:Name="scrollViewer">
<TextBlock x:Name="textBlock1" TextWrapping="Wrap" Text="ScrollViewer is Selected" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</ScrollViewer>
</FlipView>
</StackPanel>
Option 2: Solution using ChangePropertyAction
If you want to avoid creating VisualStates you can change the Foreground-property directly.
<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Interactivity:Interaction.Behaviors>
<Core:DataTriggerBehavior x:Name="RelativePanelSelectedTrigger" Binding="{Binding SelectedIndex,ElementName=flipView}" Value="0">
<Core:ChangePropertyAction TargetObject="{Binding ElementName=txt1}" PropertyName="Foreground">
<Core:ChangePropertyAction.Value>
<SolidColorBrush Color="#FF1700FF"/>
</Core:ChangePropertyAction.Value>
</Core:ChangePropertyAction>
<Core:ChangePropertyAction TargetObject="{Binding ElementName=txt2}" PropertyName="Foreground">
<Core:ChangePropertyAction.Value>
<SolidColorBrush Color="Black"/>
</Core:ChangePropertyAction.Value>
</Core:ChangePropertyAction>
</Core:DataTriggerBehavior>
<Core:DataTriggerBehavior x:Name="ScrollViewerSelectedTrigger" Binding="{Binding SelectedIndex,ElementName=flipView}" Value="1">
<Core:ChangePropertyAction TargetObject="{Binding ElementName=txt1}" PropertyName="Foreground">
<Core:ChangePropertyAction.Value>
<SolidColorBrush Color="Black"/>
</Core:ChangePropertyAction.Value>
</Core:ChangePropertyAction>
<Core:ChangePropertyAction TargetObject="{Binding ElementName=txt2}" PropertyName="Foreground">
<Core:ChangePropertyAction.Value>
<SolidColorBrush Color="#FF73E017"/>
</Core:ChangePropertyAction.Value>
</Core:ChangePropertyAction>
</Core:DataTriggerBehavior>
</Interactivity:Interaction.Behaviors>
You could try binding the background property of txt1 to the selected item of your flip view;
background = "{Binding SelectedItem, ElementName=flipView, Converter={StaticResource ObjectTypeToColorConverter}}"
Then create a converter class that takes the selected item, checks its type and returns the color you desire based on the type;
if(obj.getType() == (typeOf)RelativePanel) return color.red;
How to make a TextBox and a ComboBox's ToggleBox to flicker identically, when certain dependency property is set to True?
I have a TextBox and a ComboBox. I want them both to flicker whenever some dependency property, BlinkDepProp, is set to true:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--
...
-->
<TextBox Text="{Binding MyDataContext.SomeText, UpdateSourceTrigger=PropertyChanged}" Grid.Row="0">
<TextBox.Style>
<Style>
<Style.Triggers>
<DataTrigger
Binding="{Binding Path=BlinkDepProp,
RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type loc:DevicesRepositoryEditorUserControl}}}"
Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="BlinkBeginStoryboard">
<Storyboard>
<ColorAnimation To="Red" Storyboard.TargetProperty="(TextBox.Background).(SolidColorBrush.Color)"
FillBehavior="Stop" Duration="0:0:0.4" RepeatBehavior="Forever" AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="BlinkBeginStoryboard" />
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
<!--
...
-->
<ComboBox ItemsSource="{Binding MyDataContext.SomeList}" Template="{DynamicResource ComboBoxControlTemplate}"
SelectedValue="{Binding MyDataContext.SelectedEntry}"
Grid.Row="1">
<!--
...
-->
</Grid>
The snippet above works for the TextBox element, but I want to apply it to the ToggleButton of the ComboBox as well. I created the ComboBoxControlTemplate ControlTemplate (doesn't really matter, but it's in some ResourceDictionary that resides in a separate XAML file).
My question is: how do I trigger both the TextBox and the ComboBox to act identically (same colours, identical flickering rate and phase, ...), and respond to the same BlinkDepProp (defined in the containing UserControl)?
What exactly didn't work?
On my little example textbox and combobox are blinking.
<Window x:Class="animation.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">
<Window.Resources>
<Style x:Key="blink">
<Style.Triggers>
<DataTrigger
Binding="{Binding BlinkDepProp}"
Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="BlinkBeginStoryboard">
<Storyboard>
<ColorAnimation To="Red" Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
FillBehavior="Stop" Duration="0:0:0.4" RepeatBehavior="Forever" AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="BlinkBeginStoryboard" />
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBox
Name="txt"
Text="{Binding SomeText, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource ResourceKey=blink}"
Background="Beige"
Width="100"
Height="20"/>
<ComboBox
Name="cmb"
Style="{StaticResource ResourceKey=blink}"
Background="Beige"
Width="100"
Height="20"
Grid.Column="1"/>
</Grid>
</Window>
You can try setting the ComboBox's Background to some Binding to the TextBox's Background when the DataTrigger is fired like this:
<ComboBox ItemsSource="{Binding MyDataContext.SomeList}"
Template="{DynamicResource ComboBoxControlTemplate}"
SelectedValue="{Binding MyDataContext.SelectedEntry}"
Grid.Row="1">
<ComboBox.Style>
<Style TargetType="ComboBox">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=BlinkDepProp,
RelativeSource={RelativeSource
AncestorType={x:Type loc:DevicesRepositoryEditorUserControl}}}" Value="True">
<Setter Property="Background" Value="{Binding Background, ElementName=tb}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ComboBox.Style>
</ComboBox>
I suppose your TextBox's Name is tb.
Popup never loses focus
I'm having a problem with my popup. When the user clicks the profile, I want to display a popup.
This already works but the popup doesn't close when it loses focus.
I've tried to set the stayopen property to false but then the popup shows up for about half a second and then immediately closes.
I also tried to catch the focus lost event in code, but the event never triggers...
<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:converters="clr-namespace:UserControlSolution.Converter"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
mc:Ignorable="d"
x:Class="UserControlSolution.ProfileControl"
x:Name="UserControl"
d:DesignWidth="640" d:DesignHeight="480"
Height="55">
<UserControl.Resources>
<converters:ConnectedStatusToColorConverter x:Key="ConnectedStatusToColorConverter"/>
<Style x:Key="ProfileOptionsStyle" TargetType="TextBlock">
<Setter Property="Padding" Value="7" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="Foreground" Value="Silver" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="TextAlignment" Value="Right" />
<Setter Property="Margin" Value="10,3,5,0" />
<Setter Property="FontSize" Value="14.5" />
<Setter Property="TextWrapping" Value="WrapWithOverflow" />
<Setter Property="TextTrimming" Value="CharacterEllipsis" />
<Setter Property="Background" Value="Transparent" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource SelectGrey}" />
</Trigger>
</Style.Triggers>
</Style>
<Canvas x:Key="Lynx_logo_NoText" x:Name="Lynx_logo_NoText" HorizontalAlignment="Left" Height="189.333" UseLayoutRounding="False" VerticalAlignment="Top" Width="504.864">
<Canvas x:Name="Laag_2" Height="156.803" Canvas.Left="26.033" Canvas.Top="16.47" Width="450.509">
<Path Data="F1M140.0616,111.5394L140.0616,168.4354C140.0616,169.0754,139.9016,169.6314,139.5826,170.1064C139.2646,170.5874,138.7136,170.9654,137.9206,171.2384C137.1316,171.5194,136.0656,171.7644,134.7216,171.9584C133.3746,172.1524,131.7546,172.2564,129.8586,172.2564C127.8856,172.2564,126.2406,172.1524,124.9396,171.9584C123.6336,171.7644,122.5656,171.5194,121.7336,171.2384C120.9056,170.9654,120.3296,170.5874,120.0126,170.1064C119.6986,169.6314,119.5416,169.0754,119.5416,168.4354L119.5416,111.5394L93.9836,56.1284C93.1016,54.3004,92.5696,52.8684,92.3686,51.8324C92.1686,50.8104,92.3686,50.0044,92.9656,49.4514C93.5616,48.8954,94.6346,48.5374,96.1866,48.3784C97.7356,48.2214,99.8216,48.1414,102.4466,48.1414C104.8326,48.1414,106.7586,48.2214,108.2336,48.3784C109.7056,48.5374,110.8746,48.7554,111.7496,49.0294C112.6246,49.3174,113.2846,49.7144,113.7196,50.2254C114.1536,50.7424,114.5736,51.4014,114.9756,52.1934C114.9756,52.1934,128.1596,87.4004,130.2146,92.0934L130.4496,92.0934C132.2656,87.5664,134.1506,83.0514,136.0836,78.5604C138.0196,74.0694,139.9816,69.6334,141.9666,65.2574C141.9666,65.2574,164.0146,19.1754,164.4506,18.6164C164.8886,18.0634,165.4816,17.6464,166.2436,17.3654C166.9976,17.0844,168.0476,16.8684,169.4056,16.7064C170.7566,16.5504,172.4606,16.4704,174.5306,16.4704C177.3946,16.4704,179.6426,16.5734,181.2716,16.7684C182.8956,16.9674,184.0326,17.3474,184.6716,17.9014C185.3096,18.4604,185.5226,19.2544,185.3286,20.2884C185.1266,21.3194,184.5926,22.7164,183.7176,24.4624z" Fill="#FF646363" Height="155.786" Canvas.Left="66.261" Stretch="Fill" Canvas.Top="0" Width="93.104"/>
<Path Data="M468.9649,21.5218C470.5999,20.1588,471.8999,19.3438,472.8649,19.0808C473.8309,18.8198,474.5919,19.1598,475.1489,20.1048C475.7059,21.0488,476.0769,22.5998,476.2629,24.7498C476.4469,26.9018,476.5419,29.7638,476.5419,33.3308C476.5419,36.6918,476.4849,39.3148,476.3739,41.2048C476.2629,43.0938,476.0579,44.5898,475.7619,45.6918C475.4659,46.7938,475.1119,47.6358,474.7029,48.2108C474.2959,48.7898,473.7559,49.2888,473.0879,49.7068L415.7079,95.0558L473.0879,140.8758C473.7559,141.4028,474.3139,141.9788,474.7589,142.6088C475.2039,143.2388,475.5579,144.1038,475.8169,145.2058C476.0769,146.3088,476.2629,147.8048,476.3739,149.6938C476.4849,151.5828,476.5419,154.1028,476.5419,157.2518C476.5419,160.7158,476.4469,163.4478,476.2629,165.4398C476.0769,167.4358,475.7059,168.8258,475.1489,169.6128C474.5919,170.3998,473.8309,170.6638,472.8649,170.3998C471.8999,170.1388,470.5999,169.3248,468.9649,167.9588L402.6729,112.3758L338.6079,165.4398C336.9759,166.6998,335.6559,167.5138,334.6529,167.8808C333.6499,168.2508,332.8699,168.0138,332.3139,167.1718C331.7559,166.3328,331.4039,164.8648,331.2549,162.7628C331.1069,160.6648,331.0319,157.7788,331.0319,154.1028C331.0319,150.9538,331.0879,148.3828,331.1989,146.3868C331.3109,144.3948,331.4969,142.8198,331.7559,141.6638C332.0179,140.5098,332.3879,139.6708,332.8699,139.1438C333.3549,138.6208,333.8929,138.0418,334.4859,137.4128L388.4109,93.6378L334.4859,50.1798C333.8929,49.6558,333.3549,49.1308,332.8699,48.6048C332.3879,48.0808,332.0179,47.3208,331.7559,46.3218C331.4969,45.3248,331.3109,43.9348,331.1989,42.1488C331.0879,40.3648,331.0319,37.9518,331.0319,34.9058C331.0319,31.6528,331.1259,29.0008,331.3109,26.9538C331.4969,24.9068,331.8509,23.4388,332.3689,22.5448C332.8899,21.6548,333.6499,21.3118,334.6529,21.5218C335.6559,21.7328,336.9759,22.4668,338.6079,23.7258L402.2269,76.6328L468.9649,21.5218z"
Height="158.784" Canvas.Left="301.359" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="{Binding mainViewModel.IsConnected, Converter={StaticResource ConnectedStatusToColorConverter}}" StrokeThickness="7.281" StrokeMiterLimit="4" StrokeLineJoin="Miter" Canvas.Top="-1.115" Width="152.791"/>
<Path Data="F1M106.0738,163.4183C106.0738,165.0103,105.9928,166.3413,105.8348,167.4143C105.6748,168.4873,105.4178,169.4023,105.0598,170.1573C104.7018,170.9143,104.2638,171.4703,103.7478,171.8273C103.2298,172.1863,102.6138,172.3643,101.8988,172.3643L33.6678,172.3643C31.8368,172.3643,30.1078,171.7493,28.4788,170.5163C26.8478,169.2833,26.0328,167.1153,26.0328,164.0153L26.0328,21.1113C26.0328,20.4753,26.1918,19.9183,26.5098,19.4413C26.8268,18.9633,27.3848,18.5873,28.1798,18.3083C28.9738,18.0303,30.0478,17.7913,31.4008,17.5923C32.7528,17.3943,34.3828,17.2933,36.2918,17.2933C38.2788,17.2933,39.9298,17.3943,41.2418,17.5923C42.5538,17.7913,43.6078,18.0303,44.4028,18.3083C45.1968,18.5873,45.7548,18.9633,46.0728,19.4413C46.3898,19.9183,46.5508,20.4753,46.5508,21.1113L46.5508,154.5913L101.8988,154.5913C102.6138,154.5913,103.2298,154.7703,103.7478,155.1283C104.2638,155.4853,104.7018,156.0043,105.0598,156.6793C105.4178,157.3543,105.6748,158.2493,105.8348,159.3623C105.9928,160.4773,106.0738,161.8283,106.0738,163.4183" Fill="#FF646363" Height="155.071" Canvas.Left="0" Stretch="Fill" Canvas.Top="0.823" Width="80.041"/>
<Path Data="F1M312.2998,164.0872C312.2998,165.6792,312.0318,167.0302,311.4988,168.1442C310.9638,169.2582,310.2648,170.1712,309.4018,170.8872C308.5378,171.6032,307.5708,172.1202,306.5028,172.4382C305.4328,172.7542,304.3638,172.9142,303.2938,172.9142L296.5108,172.9142C294.3698,172.9142,292.4988,172.6942,290.8958,172.2592C289.2918,171.8222,287.7708,171.0262,286.3308,169.8732C284.8938,168.7212,283.4518,167.1502,282.0128,165.1612C280.5748,163.1742,279.0458,160.6282,277.4328,157.5262L230.3438,69.7332C227.8818,65.2002,225.4018,60.4492,222.8998,55.4782C220.3988,50.5092,218.0728,45.6782,215.9178,40.9852L215.6798,40.9852C215.8378,46.7112,215.9568,52.5562,216.0378,58.5202C216.1158,64.4842,216.1568,70.4092,216.1568,76.2932L216.1568,169.4552C216.1568,170.0132,215.9888,170.5492,215.6538,171.0662C215.3178,171.5842,214.7518,171.9812,213.9538,172.2592C213.1558,172.5382,212.1088,172.7752,210.8078,172.9752C209.5068,173.1722,207.8478,173.2732,205.8348,173.2732C203.8198,173.2732,202.1628,173.1722,200.8618,172.9752C199.5608,172.7752,198.5338,172.5382,197.7788,172.2592C197.0228,171.9812,196.4788,171.5842,196.1428,171.0662C195.8068,170.5492,195.6398,170.0132,195.6398,169.4552L195.6398,27.0292C195.6398,23.8492,196.5418,21.5832,198.3478,20.2302C200.1538,18.8792,202.1238,18.2022,204.2578,18.2022L214.3548,18.2022C216.7328,18.2022,218.7228,18.4012,220.3238,18.7982C221.9248,19.1972,223.3618,19.8532,224.6328,20.7662C225.9038,21.6822,227.1368,22.9552,228.3278,24.5842C229.5168,26.2142,230.7648,28.2632,232.0738,30.7272L268.2728,98.4812C270.5028,102.6162,272.6538,106.6512,274.7298,110.5882C276.8038,114.5242,278.8018,118.4012,280.7238,122.2192C282.6458,126.0352,284.5478,129.7932,286.4308,133.4912C288.3138,137.1892,290.1768,140.9072,292.0228,144.6442L292.1418,144.6442C291.9818,138.3632,291.8818,131.8202,291.8428,125.0222C291.8018,118.2232,291.7838,111.6822,291.7838,105.3992L291.7838,21.6612C291.7838,21.1062,291.9518,20.5882,292.2858,20.1102C292.6218,19.6332,293.1868,19.2162,293.9858,18.8582C294.7818,18.5002,295.8308,18.2432,297.1318,18.0832C298.4328,17.9242,300.1318,17.8442,302.2298,17.8442C304.0748,17.8442,305.6708,17.9242,307.0128,18.0832C308.3548,18.2432,309.4038,18.5002,310.1608,18.8582C310.9148,19.2162,311.4618,19.6332,311.7978,20.1102C312.1318,20.5882,312.2998,21.1062,312.2998,21.6612z"
Fill="#FF646363" Height="155.429" Canvas.Left="169.607" Stretch="Fill" Canvas.Top="1.374" Width="116.66"/>
</Canvas>
<Canvas x:Name="Laag_3"/>
</Canvas>
</UserControl.Resources>
<Grid x:Name="HeaderContainer" Grid.Row="0" Background="{StaticResource VeryDarkGrey}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ProfilePanelStates">
<VisualState x:Name="ProfilePanelMouseEnter">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ProfilePanel">
<EasingColorKeyFrame KeyTime="0" Value="#FF404040"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ProfilePanelMouseOut"/>
<VisualState x:Name="ProfilePanelMouseDown">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ProfilePanel">
<EasingColorKeyFrame KeyTime="0" Value="#FF404040"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.FontSize)" Storyboard.TargetName="UserNameTextBlock">
<EasingDoubleKeyFrame KeyTime="0" Value="17.666"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="ProfilePicture">
<EasingDoubleKeyFrame KeyTime="0" Value="43"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ProfilePicture">
<EasingDoubleKeyFrame KeyTime="0" Value="43"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ProfilePanelMouseUp">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ProfilePanel">
<EasingColorKeyFrame KeyTime="0" Value="#FF404040"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.FontSize)" Storyboard.TargetName="UserNameTextBlock">
<EasingDoubleKeyFrame KeyTime="0" Value="18.667"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="ProfilePicture">
<EasingDoubleKeyFrame KeyTime="0" Value="45"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ProfilePicture">
<EasingDoubleKeyFrame KeyTime="0" Value="45"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Viewbox x:Name="LynxLogoContainer" StretchDirection="DownOnly" Stretch="Uniform" Height="35" Grid.Column="0" HorizontalAlignment="Left" Margin="15,0,0,0" >
<ContentControl x:Name="MessageAction" Content="{StaticResource Lynx_logo_NoText}" Margin="0,5" />
</Viewbox>
<Grid x:Name="ProfilePanel" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Stretch" Background="Transparent" MouseLeftButtonDown="ProfilePanel_MouseLeftButtonDown">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<ei:GoToStateAction StateName="ProfilePanelMouseDown"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeftButtonUp">
<ei:GoToStateAction StateName="ProfilePanelMouseUp"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseEnter">
<ei:GoToStateAction StateName="ProfilePanelMouseEnter"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<ei:GoToStateAction StateName="ProfilePanelMouseOut"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<TextBlock x:Name="UserNameTextBlock" Grid.Column="0" TextWrapping="WrapWithOverflow" Foreground="Silver"
TextAlignment="Right" FontSize="18.667" HorizontalAlignment="Right"
TextTrimming="CharacterEllipsis" FontFamily="Segoe UI Light" Text="Laurens" />
<WrapPanel x:Name="ProfilePictureContainer" Grid.Column="1" Width="45" Height="45" HorizontalAlignment="Right">
<Image x:Name="ProfilePicture" Source="/Image/JV.jpg" Width="45" Height="45" />
</WrapPanel>
</Grid>
<Popup x:Name="ProfilePopup" Placement="Bottom" PlacementTarget="{Binding ElementName=ProfilePictureContainer}" Height="Auto" Width="Auto"
MinWidth="{Binding ActualWidth, ElementName=ProfilePanel}" MaxWidth="{Binding ActualWidth, ElementName=HeaderContainer}"
VerticalOffset="2" PopupAnimation="Slide" AllowsTransparency="True">
<Border Background="{StaticResource VeryDarkGrey}" BorderThickness="0,2,0,0" BorderBrush="#3C3C3C">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Vertical" VerticalAlignment="Top" Margin="0,0,0,5">
<TextBlock Style="{StaticResource ProfileOptionsStyle}" Text="Status: Online" />
<TextBlock Style="{StaticResource ProfileOptionsStyle}" Text="Verander profielfoto" />
</StackPanel>
<StackPanel Grid.Row="1" Margin="0,0,0,3">
<Rectangle HorizontalAlignment="Stretch" Fill="#FF4E4E4E" Height="1" Margin="10,0"/>
<TextBlock Style="{StaticResource ProfileOptionsStyle}" Text="Afsluiten" Margin="5,2,5,0"/>
</StackPanel>
</Grid>
</Border>
</Popup>
</Grid>
This is the code where I open the popup
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace UserControlSolution
{
/// <summary>
/// Interaction logic for ProfileControl.xaml
/// </summary>
public partial class ProfileControl : UserControl
{
public ProfileControl()
{
this.InitializeComponent();
this.ProfilePopup.LostFocus += new RoutedEventHandler(ProfilePopup_LostFocus);
}
void ProfilePopup_LostFocus(object sender, RoutedEventArgs e)
{
ProfilePopup.IsOpen = false;
}
private void ProfilePanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
ProfilePopup.IsOpen = true;
}
}
}
I would handle this by setting the StaysOpen property to false and Binding the Popup.IsOpen property to a bool property and setting the property to false when I need the Popup to close. The problem of trying to do this in the LostFocus event is that the Popup will lose focus even if the user just clicks on a control inside the Popup, as that control will take the focus... I'm guessing that is why your Popup was closing so quickly.
For example, I have a custom AutoCompleteTextBox and that closes the Popup control in various event handlers after a user have selected one of the suggestions:
private void ListBox_PreviewMouseDoubleClick(object sender, MouseButtonEventArgs e)
{
Text = SelectedSuggestion;
if (SuggestionSelected != null) SuggestionSelected(this, new EventArgs());
Focus();
CaretIndex = Text.Length;
IsPopupOpen = false; // <<< Here is the line that closes the Popup
}
WPF how to animate picture inside listboxitem using data trigger?
I have a listbox with templated listboxitem which is binded to an object.
one of the listboxitem controls is an image and it's source is also binded to a property inside the datacontext, So the pictur inside the Image control is different according to that property.
I want to animate the image but only specific one (when the binded property value is some specific value only).
I guess there are other ways to do that, maybe using code behind. But I would realy like use it in the xaml code, so I thought using animation inside DataTrigger, it makes sense to me because the starting/ending the animation depends on the DataContext:
<DataTrigger Binding="{Binding Path=Value.SomeProperty}"
Value="SomePropertyValue">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard TargetName="SomePropertyIcon">
<StaticResource ResourceKey="SomePropertyValueAnimation"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard TargetName="SomePropertyIcon">
<StaticResource ResourceKey="StopSomePropertyValueAnimation"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
But I cannot make it work any way.
I tried to put that code inside a style of the listBox and then apply that style to the image, it didnt work, I also tried to put inside the listBox.ItemTamplate, and other places but nothing helped.
Here is the code. maybe it can help to understand (I pasted only relevan code here):
<UserControl ...>
<UserControl.Resources>
<local:SomePropertyToImageConverter x:Key="somePropertyToImageConverter"/>
<DoubleAnimation x:Key="SomePropertyValueAnimation" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" To="45" Duration="0:0:2" RepeatBehavior="Forever"/>
<DoubleAnimation x:Key="StopSomePropertyValueAnimation" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" To="0" Duration="0:0:2"/>
</UserControl.Resources>
<Grid>
<ListBox Name="myListBox"
ItemsSource="{Binding Path=myDataContext}" IsEnabled="True" Focusable="True" SelectionMode="Extended">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Width="20" Height="20" Name="SomePropertyIcon"
Source="{Binding Path=Value.SomeProperty, Converter={StaticResource somePropertyToImageConverter}}"/>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=Value.SomeProperty}"
Value="SomePropertyValue">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard TargetName="SomePropertyIcon">
<StaticResource ResourceKey="SomePropertyValueAnimation"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard TargetName="SomePropertyIcon">
<StaticResource ResourceKey="StopSomePropertyValueAnimation"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Value.SomeProperty}"
Value="SomePropertyValue">
<Setter Property="Background" Value="Bisque"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</Grid>
Animation cannot change property values for a property path that does not exist. The "Image" you are trying to manipulate does not have "Rotate transform" you should add it and it should work:
<Image Width="20" Height="20" Name="SomePropertyIcon"
Source="{Binding Path=Value.SomeProperty, Converter={StaticResource somePropertyToImageConverter}}">
<Image.RenderTransform >
<RotateTransform />
</Image.RenderTransform>
</Image>
WPF textblock blink
I have an application that will need to make the button text flash/blink depending on a dependency object (the sample XAML below uses check box's IsChecked). I've tried many different tricks I've seen on Google search, to no avail.
Below is the sample XAML code I created for this purpose, and there must be something I am missing. Can someone help on this?
=========================
<Window x:Class="WpfTestBed.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="414" Width="751">
<Window.Resources>
<Style x:Key="SB_BaseGradientButton" TargetType="Button">
<Style.Resources>
<Color x:Key="StartColor">Gray</Color>
<Color x:Key="EndColor">White</Color>
<SolidColorBrush x:Key="PressedForegroundColor" Color="Black"/>
</Style.Resources>
<Setter Property="Margin" Value="2,2,2,2" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="FontSize" Value="14" />
</Style>
<Storyboard x:Key="FlashBlockTextStoryBoard">
<ObjectAnimationUsingKeyFrames RepeatBehavior="Forever" Storyboard.TargetName="txtButtonFace" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Hidden}" />
<DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Style BasedOn="{StaticResource {x:Type TextBlock}}" x:Key="FlashTextBlock" TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=checkBox1.IsChecked}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="storyboard" Storyboard="{StaticResource FlashBlockTextStoryBoard}" />
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="storyboard" />
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid Margin="10,10,10,10" >
<Grid.RowDefinitions>
<RowDefinition Height="40*"/>
<RowDefinition Height="12*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="12*" MaxWidth="210"/>
<ColumnDefinition Width="20*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" MaxHeight="70" MaxWidth="150"
FontSize="16" Style="{StaticResource SB_BaseGradientButton}" Margin="320,0,29,12" Grid.Row="1">
<TextBlock Name="txtButtonFace" TextAlignment="Center" Text="This Is Test"
Style="{StaticResource FlashTextBlock}">
</TextBlock>
</Button>
<CheckBox Content="Make button flash" Grid.Column="1" Height="16" HorizontalAlignment="Left" Margin="44,24,0,0"
Name="checkBox1" VerticalAlignment="Top" Grid.Row="1" />
</Grid>
</Window>
Two things and it will work:
your binding syntax is wrong. It has to be
Binding="{Binding Path=IsChecked, ElementName=checkBox1}"
and remove Storyboard.TargetName="txtButtonFace" from your Storyboard because you can't use a TargetName in a Style.