Develop Reference

UWP databinding in an inherited control

I have a custom textbox control which I inherit from default TextBox. And on style I have added some additional xaml, one of which is this progress ring:
<toolkit:Loading x:Name="IsBusyLoader"
Grid.Column="1"
Grid.ColumnSpan="2"
Style="{StaticResource DefaultLoader}">
<ProgressRing Style="{StaticResource SmallRing}" />
</toolkit:Loading>
and I have to control its "IsLoading" with binding from where the control is being used. For that I created its binding in code behind of this control because it's a style so I wasn't sure how I can create that binding in xaml style with a dependency property.
public FluentTextBox() => DefaultStyleKey = typeof(FluentTextBox);
protected override void OnApplyTemplate()
{
base.OnApplyTemplate();
//GetTemplateChild
_isBusyLoader = GetTemplateChild("IsBusyLoader") as Loading;
//bindings
_isBusyLoader.SetBinding(Microsoft.Toolkit.Uwp.UI.Controls.Loading.IsLoadingProperty, new Binding { Mode = BindingMode.OneWay, Source = IsBusy });
}
public bool IsBusy
{
get => (bool) GetValue(IsBusyProperty);
set => SetValue(IsBusyProperty, value);
}
public static readonly DependencyProperty IsBusyProperty =
DependencyProperty.Register("IsBusy", typeof(bool), typeof(FluentTextBox), new PropertyMetadata(null));
As you can see IsBusy is a dependency property. And I am binding to it on UI here I am using this custom textbox.
<controls1:FluentTextBox
Margin="4"
Header="Field 1"
IsBusy="{x:Bind IsBusy, Mode=OneWay}" />
Now IsBusy property here is actually in code behind the issue is when I update the IsBusy property from code behind, it doesn't reflect in UI. But I've used same IsBusy property somewhere else on that page and it properly raises notifications to UI there so I am clear that part is working fine.
public bool IsBusy // code behind is busy property on my xaml page.
{
get => _isBusy;
set
{
_isBusy = value;
RaisePropertyChanged(nameof(IsBusy));
}
}
Note that when I create the binding and set it to "true" in source then my custom textbox shows that progress ring as expected. I have also tried setting the source in binding to IsBusyProperty but that doesn't work either.
_isBusyLoader.SetBinding(Microsoft.Toolkit.Uwp.UI.Controls.Loading.IsLoadingProperty, new Binding { Mode = BindingMode.OneWay, Source = true });
Update 1
Full Style code
<Style TargetType="controls:FluentTextBox">
<Setter Property="Margin" Value="{ThemeResource DefaultControlMargin}" />
<Setter Property="local:TextBoxProperties.Initialized" Value="true" />
<Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />
<Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" />
<Setter Property="Foreground" Value="{ThemeResource TextControlForeground}" />
<Setter Property="Background" Value="{ThemeResource TextControlBackground}" />
<Setter Property="BorderBrush" Value="{ThemeResource TextControlBorderBrush}" />
<Setter Property="SelectionHighlightColor" Value="{ThemeResource TextControlSelectionHighlightColor}" />
<Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource InputControlFontSize}" />
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
<Setter Property="HorizontalAlignment" Value="{ThemeResource DefaultControlHorizontalAlignment}" />
<Setter Property="VerticalAlignment" Value="{ThemeResource DefaultControlVerticalAlignment}" />
<Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}" />
<Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:FluentTextBox">
<Grid>
<Grid.Resources>
<!--default delete button style here-->
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<i:Interaction.Behaviors>
<ic:EventTriggerBehavior EventName="PointerEntered">
<ic:CallMethodAction MethodName="StartAnimation" TargetObject="{Binding ElementName=MoreActionGridFadeIn}" />
</ic:EventTriggerBehavior>
<ic:EventTriggerBehavior EventName="PointerExited">
<ic:CallMethodAction MethodName="StartAnimation" TargetObject="{Binding ElementName=MoreActionGridFadeOut}" />
</ic:EventTriggerBehavior>
</i:Interaction.Behaviors>
<Border
x:Name="BorderElement"
Grid.Row="0"
Grid.RowSpan="3"
Grid.ColumnSpan="2"
MinWidth="{ThemeResource TextControlThemeMinWidth}"
MinHeight="{ThemeResource TextControlThemeMinHeight}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Control.IsTemplateFocusTarget="True"
CornerRadius="{TemplateBinding CornerRadius}" />
<Border
x:Name="ValidationBorder"
Grid.Row="0"
Grid.RowSpan="3"
Grid.ColumnSpan="2"
MinWidth="{ThemeResource TextControlThemeMinWidth}"
MinHeight="{ThemeResource TextControlThemeMinHeight}"
BorderBrush="{ThemeResource ValidationBorderBrush}"
CornerRadius="{TemplateBinding CornerRadius}" />
<ContentPresenter
x:Name="ShadowHeaderContentPresenter"
Padding="10,0,2,0"
Background="{x:Null}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
FontSize="{TemplateBinding FontSize}"
FontWeight="Normal"
Foreground="{x:Null}"
Opacity="0"
TextWrapping="NoWrap"
Visibility="Visible" />
<ContentPresenter
x:Name="HeaderContentPresenter"
Padding="10,0,2,0"
x:DeferLoadStrategy="Lazy"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
FontSize="{TemplateBinding FontSize}"
FontWeight="Normal"
Foreground="{Binding ElementName=PlaceholderTextContentPresenter, Path=Foreground, Mode=OneWay}"
TextWrapping="NoWrap"
Visibility="Collapsed">
<ContentPresenter.RenderTransform>
<CompositeTransform />
</ContentPresenter.RenderTransform>
</ContentPresenter>
<ScrollViewer
x:Name="ContentElement"
Grid.Row="1"
Margin="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
AutomationProperties.AccessibilityView="Raw"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsTabStop="False"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
ZoomMode="Disabled" />
<TextBlock
x:Name="PlaceholderTextContentPresenter"
Grid.Row="1"
Grid.ColumnSpan="2"
Margin="{TemplateBinding BorderThickness}"
Padding="10,0,0,0"
Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForeground}}"
IsHitTestVisible="False"
Text="{TemplateBinding PlaceholderText}"
TextAlignment="{TemplateBinding TextAlignment}"
TextWrapping="{TemplateBinding TextWrapping}" />
<Grid Grid.RowSpan="3" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button
x:Name="DeleteButton"
MinWidth="{ThemeResource DeleteButtonMinWidth}"
MaxWidth="{ThemeResource DeleteButtonMaxWidth}"
Margin="{ThemeResource HelperButtonThemePadding}"
VerticalAlignment="Stretch"
AutomationProperties.AccessibilityView="Raw"
BorderThickness="{TemplateBinding BorderThickness}"
FontSize="{TemplateBinding FontSize}"
IsTabStop="False"
Style="{StaticResource DeleteButtonStyle}"
Visibility="Collapsed" />
<Grid x:Name="ActionGrid" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition Width="48" />
</Grid.ColumnDefinitions>
<Grid>
<Grid x:Name="MoreGrid" Opacity="0">
<i:Interaction.Behaviors>
<ToolkitBehaviors:Fade
x:Name="MoreActionGridFadeIn"
AutomaticallyStart="False"
Delay="0"
EasingMode="EaseOut"
EasingType="Cubic"
Value="1"
Duration="300" />
<ToolkitBehaviors:Fade
x:Name="MoreActionGridFadeOut"
AutomaticallyStart="False"
Delay="0"
EasingMode="EaseOut"
EasingType="Cubic"
Value="0"
Duration="300" />
</i:Interaction.Behaviors>
<AppBarButton
x:Name="CopyButton"
Width="48"
Height="48"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Icon="Copy"
ToolTipService.ToolTip="Copy" />
</Grid>
</Grid>
<Grid Grid.Column="1">
<toolkit:DropShadowPanel
Width="24"
Height="24"
Margin="8"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Style="{StaticResource GridShadowSmall}"
Color="Black">
<Ellipse
Width="24"
Height="24"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="{TemplateBinding BorderBrush}" />
</toolkit:DropShadowPanel>
<Ellipse
x:Name="CentralElipse"
Width="20"
Height="20"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Canvas.ZIndex="10">
<ToolTipService.ToolTip>
<ToolTip>
<Grid Width="140" MaxHeight="200">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock
x:Name="MemosCountBlock"
Grid.Row="1"
Margin="4"
FontWeight="SemiBold"
TextTrimming="CharacterEllipsis"
TextWrapping="Wrap" />
<TextBlock
Grid.Row="1"
Grid.Column="1"
Margin="4"
Text="Memos"
TextTrimming="CharacterEllipsis"
TextWrapping="WrapWholeWords" />
<TextBlock
x:Name="MyFirstMemoBlock"
Grid.ColumnSpan="2"
Margin="4"
TextTrimming="CharacterEllipsis"
TextWrapping="WrapWholeWords" />
</Grid>
</ToolTip>
</ToolTipService.ToolTip>
<FlyoutBase.AttachedFlyout>
<Flyout x:Name="MemosFlyout" FlyoutPresenterStyle="{StaticResource NoPaddingFlyoutPresenter}">
<local1:MemosControl
x:Name="MyMemosControl"
Width="320"
MaxHeight="440"
Padding="0,8,0,0"
NewMemoButtonVisible="True" />
</Flyout>
</FlyoutBase.AttachedFlyout>
</Ellipse>
</Grid>
<toolkit:Loading
x:Name="IsBusyLoader"
Grid.ColumnSpan="2"
Style="{StaticResource DefaultLoader}">
<ProgressRing Style="{StaticResource SmallRing}" />
</toolkit:Loading>
</Grid>
</Grid>
<ContentPresenter
x:Name="DescriptionPresenter"
Grid.Row="2"
Padding="10,0,4,4"
x:Load="False"
AutomationProperties.AccessibilityView="Raw"
Content="{TemplateBinding Description}"
FontSize="{StaticResource InputControlHeaderFontSize}"
Foreground="{Binding ElementName=PlaceholderTextContentPresenter, Path=Foreground, Mode=OneWay}" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Disabled">
<!-- default disabled state -->
</VisualState>
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<!-- default pointer over state -->
</VisualState>
<VisualState x:Name="Focused">
<!-- default focused state -->
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ButtonStates">
<VisualState x:Name="ButtonVisible">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DeleteButton" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ButtonCollapsed" />
</VisualStateGroup>
<VisualStateGroup x:Name="HeaderStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.25">
<VisualTransition.GeneratedEasingFunction>
<CircleEase EasingMode="EaseInOut" />
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="NotEmpty">
<VisualState.Setters>
<Setter Target="HeaderContentPresenter.(FontSize)" Value="{StaticResource InputControlHeaderFontSize}" />
</VisualState.Setters>
<VisualState.StateTriggers>
<StateTrigger IsActive="{Binding Text, Converter={StaticResource IsNotEmptyConverter}, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="Empty">
<VisualState.Setters>
<Setter Target="HeaderContentPresenter.(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Value="16" />
<Setter Target="PlaceholderTextContentPresenter.(Opacity)" Value="0" />
</VisualState.Setters>
<VisualState.StateTriggers>
<StateTrigger IsActive="{Binding Text, Converter={StaticResource IsEmptyConverter}, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.25">
<VisualTransition.GeneratedEasingFunction>
<CircleEase EasingMode="EaseInOut" />
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Valid" />
<VisualState x:Name="NotValid">
<VisualState.Setters>
<Setter Target="ValidationBorder.(BorderThickness)" Value="{ThemeResource ValidationBorderThickness}" />
</VisualState.Setters>
<VisualState.StateTriggers>
<StateTrigger IsActive="{Binding (local:Validation.HasError), Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Instead of overriding OnApplyTemplate(), you should be able to bind directly to the IsBusy property in your ControlTemplate:
<toolkit:Loading x:Name="IsBusyLoader" IsLoading="{x:Bind IsBusy, Mode=TwoWay}" ... />
Note that you should set the Mode property since the default mode of compiled (x:Bind) bindings is OneTime.
You should also specify a valid default valuu when you register the dependency property:
public static readonly DependencyProperty IsBusyProperty =
DependencyProperty.Register(nameof(IsBusy), typeof(bool), typeof(FluentTextBox),
new PropertyMetadata(false));

Prevent GroupItem Headers from Scrolling Horizontally

I've got a DataGrid with grouped data where the GroupItem headers show to the left of the actual data rows as show below:
However, when you scroll horiztonally you can see that the group item headers also scroll to the point where they are no longer visible on the screen.
Is there anyway to prevent the GroupItem headers from scrolling?
Below is the xaml for the group style:
<Style x:Key="SeverityModificationFactorGroupItemStyle" TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ControlTemplate.Resources>
<Storyboard x:Key="HoverOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Hover" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="HoverOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Hover" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="SelectedOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="select_gradient" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="SelectedOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="select_gradient" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid Background='Transparent' >
<Grid.ColumnDefinitions>
<ColumnDefinition Width='Auto' />
<ColumnDefinition Width='Auto' />
<ColumnDefinition Width='*' />
<ColumnDefinition Width='Auto' />
</Grid.ColumnDefinitions>
<Rectangle x:Name="BackgroundRectangle" Grid.ColumnSpan="4" Grid.RowSpan="2" Fill="{StaticResource NormalBrush}" Stretch="Fill" Stroke="{StaticResource NormalBorderBrush}" StrokeThickness="1" />
<Rectangle x:Name="Hover" Grid.ColumnSpan="4" Grid.RowSpan="2" Stretch="Fill" Fill="{StaticResource MouseOverBrush}" Opacity="0" />
<Border Margin="0,5,0,3">
<Grid Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="160"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" BorderBrush="{StaticResource NormalBorderBrush}" BorderThickness="0,0,1,0" Margin="0,-5,0,-3">
<CheckBox Grid.Column="0" IsChecked="{Binding Items[0].IsSelected}" HorizontalAlignment="Center" VerticalAlignment="Center"
Command="{Binding Path=DataContext.SetLayerYearLossTableIsSelectedCommand, RelativeSource={RelativeSource AncestorType=UserControl}}" CommandParameter="{Binding Items[0]}>
</CheckBox>
</Border>
<Border Grid.Column="1" BorderBrush="{StaticResource NormalBorderBrush}" BorderThickness="0,0,1,0" Margin="0,-5,0,-3">
<TextBlock Grid.Column="1" Text="{Binding Items[0].YearLossTableName}" FontWeight="Bold" VerticalAlignment="Center" TextWrapping="Wrap"/>
</Border>
<Border Grid.Column="2" BorderBrush="{StaticResource NormalBorderBrush}" BorderThickness="0,0,1,0" Margin="0,-5,0,-3">
<CheckBox Grid.Column="2" IsChecked="{Binding Items[0].IsInuring}" HorizontalAlignment="Center" VerticalAlignment="Center"
Command="{Binding Path=DataContext.SetIsInuringCommand, RelativeSource={RelativeSource AncestorType=UserControl}}" CommandParameter="{Binding Items[0]}">
</CheckBox>
</Border>
<Border Grid.Column="3" BorderBrush="{StaticResource NormalBorderBrush}" BorderThickness="0,0,1,0" Margin="0,-5,0,-3">
<TextBox Grid.Column="3" Text="{Binding Items[0].MarketShare, Mode=TwoWay, StringFormat=P2, Converter={StaticResource DecimalPercentageConverter}, ValidatesOnDataErrors=True}" HorizontalAlignment="Center" VerticalAlignment="Center" MinWidth="60">
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<i:InvokeCommandAction Command="{Binding Path=DataContext.SetMarketShareCommand, RelativeSource={RelativeSource AncestorType=UserControl}}" CommandParameter="{Binding Items[0]}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
</Border>
<ItemsPresenter Grid.Column="4"/>
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource HoverOn}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource HoverOff}"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And the actual DataGrid:
<DataGrid ItemsSource="{Binding SeverityModificationFactorsGrouped}" AutoGenerateColumns="False" CanUserAddRows="False" MinRowHeight="25" Panel.ZIndex="0" AreRowDetailsFrozen="False">
<DataGrid.GroupStyle>
<GroupStyle ContainerStyle="{StaticResource SeverityModificationFactorGroupItemStyle}">
<GroupStyle.Panel>
<ItemsPanelTemplate>
<DataGridRowsPresenter/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</DataGrid.GroupStyle>
<DataGrid.Columns>
<DataGridTextColumn Header="{StaticResource AccumulationPerilHeader}" Binding="{Binding AccumulationPerilName}"/>
<DataGridTemplateColumn CellTemplate="{StaticResource ExposureGrowthReadonlyCellTemplate}">
...
</DataGrid>

How to cover expand to another controls wpf

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>

Change the Grid Background color with EventTrigger on MouseDown

I want Change the Grid Background in my UserContorl in XAML EventTrigger MouseDown
Below is mine code:
<UserControl x:Class="OneCardApp.Ex.EntranceGuard.ControlManager.MapMonitoring.Map.MonitorDoor"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" Loaded="UserControl_Loaded" FontSize="10" MouseDown="UserControl_MouseDown" MouseMove="UserControl_MouseMove" MouseUp="UserControl_MouseUp">
<Grid Height="60" Width="50" Name="content">
<Grid.Resources>
<GradientStop x:Name="Stop2" Color="Blue" Offset="1" x:Key="s"></GradientStop>
<Style TargetType="{x:Type Grid}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="blue"></Setter>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="red"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="36"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image Name="img_door" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" Source="/OneCardApp.Ex;component/image/36/companyInfo.png"></Image>
<Label Name="lbl_name" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1"></Label>
</Grid>
I try to create add IsPressed trigger, but it don't have.
so,How do I do that.
Thanks.

Try this
and choose color according to your requirement
<Grid Height="60" Width="50" Name="content" Background="Transparent" Focusable="True">
<Grid.Resources>
<GradientStop x:Name="Stop2" Color="Blue" Offset="1" x:Key="s"></GradientStop>
<Style TargetType="{x:Type Grid}">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="Blue" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="GotKeyboardFocus">
<BeginStoryboard>
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="Red" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseDown">
<BeginStoryboard>
<Storyboard >
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="Green" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="36"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image Name="img_door" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" Source="/OneCardApp.Ex;component/image/36/companyInfo.png"></Image>
<Label Name="lbl_name" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1"></Label>
</Grid>

How to modify a property of a resource from the code behind?

I've created an user control element which has a button with an individual style.
Inside this style I have a rectangle called "Rectangle".
Now i want to change the visibility of this rectangle from the code behind.
How can I do this?
Or in general: How can I change any of the properties of the resources from the code behind?
Button_Field.xaml
<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:ed="http://schemas.microsoft.com/expression/2010/drawing"
mc:Ignorable="d"
x:Class="WpfControlLibrary_Battleship.Button_Field"
x:Name="UserControl"
d:DesignWidth="512" d:DesignHeight="512" Width="Auto" Height="Auto">
<UserControl.Resources>
<Style x:Key="ButtonStyle_FieldWater" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="Grid">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.Background>
<ImageBrush ImageSource="Images/Water.jpg"/>
</Grid.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="MouseOver" GeneratedDuration="0">
<Storyboard>
<DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Path_1"/>
<DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Path_2"/>
<DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Path_3"/>
<DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Path_4"/>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Path_1">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Path_2">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Path_3">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Path_4">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path x:Name="Path_1" Data="M2.5,2.5 L82.833332,2.5 M2.5000006,2.5 L2.5000006,82.833329" HorizontalAlignment="Stretch" Height="Auto" Margin="0" StrokeStartLineCap="Square" Stretch="Fill" StrokeEndLineCap="Square" Stroke="#FF9B0000" StrokeThickness="5" VerticalAlignment="Stretch" Width="Auto" Grid.ColumnSpan="2" Grid.RowSpan="2" Opacity="0"/>
<Path x:Name="Path_2" Grid.Column="6" Data="M2.5,2.5 L82.833356,2.5 M82.833333,2.5 L82.833333,82.833335" HorizontalAlignment="Stretch" Height="Auto" Margin="0" StrokeStartLineCap="Square" Stretch="Fill" StrokeEndLineCap="Square" Stroke="#FF9B0000" StrokeThickness="5" VerticalAlignment="Stretch" Width="Auto" Grid.ColumnSpan="2" Grid.RowSpan="2" Opacity="0"/>
<Path x:Name="Path_3" Data="M2.5,2.5 L2.5,82.833328 M2.5,82.833323 L82.833336,82.833323" HorizontalAlignment="Stretch" Margin="0" Grid.Row="6" StrokeStartLineCap="Square" Stretch="Fill" StrokeEndLineCap="Square" Stroke="#FF9B0000" StrokeThickness="5" Width="Auto" Grid.ColumnSpan="2" Grid.RowSpan="2" Opacity="0"/>
<Path x:Name="Path_4" Grid.Column="6" Data="M2.5000001,168.16667 L168.16665,168.16667 M168.16666,2.5000051 L168.16666,168.1667" HorizontalAlignment="Stretch" Height="Auto" Margin="0" Grid.Row="6" StrokeStartLineCap="Square" Stretch="Fill" StrokeEndLineCap="Square" Stroke="#FF9B0000" StrokeThickness="5" VerticalAlignment="Stretch" Width="Auto" Grid.ColumnSpan="2" Grid.RowSpan="2" Opacity="0"/>
<Rectangle x:Name="Rectangle" Grid.ColumnSpan="8" Fill="Red" Margin="0" Grid.RowSpan="8" Stroke="Black" Opacity="0.495">
<Rectangle.Visibility>
<Visibility>Hidden</Visibility>
</Rectangle.Visibility>
</Rectangle>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Button x:Name="Button" Content="Button" Style="{DynamicResource ButtonStyle_FieldWater}"/>
</UserControl>
Button_Field.xaml.cs
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;
using Battleship_LOGIC;
namespace WpfControlLibrary_Battleship
{
/// <summary>
/// Interaktionslogik für Button_Field.xaml
/// </summary>
public partial class Button_Field : UserControl
{
private Battleship_LOGIC.Game_Logic.Point _point;
public Button_Field(Battleship_LOGIC.Game_Logic.Point point)
{
InitializeComponent();
_point = point;
}
public void redBackground()
{
//Set Visibility of Rectangle to "Visible"
}
public Battleship_LOGIC.Game_Logic.Point Point
{
get { return _point; }
}
}
}

Try this:
var rect = (Rectangle)Button.Template.FindName("Rectangle", Button);
rect.Visibility = System.Windows.Visibility.Visible;