Hi there i am new to WPF.I have applied round corner text box by using
<Window.Resources>
saw on some website do not know if it is best.
Now i may have 4 text boxes all having round corners
I have selected a border brush color and want that it should change when ever the some particular textbox has focus.so i added event
private void textBox1_GotFocus(object sender, RoutedEventArgs e)
{
textBoxCpanelUserName.BorderBrush = Brushes.OrangeRed;
}
but no effect.I checked when text box has focus the event fires but never changes the value of border brush.
Following is my XMAL
<Window x:Class="AutomatingSomething.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="600" Width="800" Name="MainContainer" xmlns:my="clr-namespace:WPFControls.Clocks;assembly=WPFControls" xmlns:common="clr-namespace:WPF.Common">
<Window.Resources>
<ControlTemplate x:Key="TextBoxBaseControlTemplate" TargetType="{x:Type TextBoxBase}">
<Border Background="{TemplateBinding Background}"
x:Name="Bd" BorderBrush="#FF3BB5C8"
BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="7">
<ScrollViewer x:Name="PART_ContentHost"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Width" Value="Auto">
<Setter Property="MinWidth" Value="100"/>
</Trigger>
<Trigger Property="Height" Value="Auto">
<Setter Property="MinHeight" Value="20"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<Grid Name="MasterGrid">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF484848" Offset="0.075" />
<GradientStop Color="#FF8A8A8A" Offset="1" />
</LinearGradientBrush>
</Grid.Background>
<Border BorderBrush="Silver" BorderThickness="0" Height="45" HorizontalAlignment="Left" Margin="902,12,0,0" Name="border1" VerticalAlignment="Top" Width="88">
<my:RetroClock Name="retroClock1" FontSize="28" FontWeight="Normal" />
</Border>
<Button Content="Button" Name="button1" Margin="12,25,907,608" Click="button1_Click" />
<Grid common:VisibilityAnimation.AnimationType="Fade" Height="524" HorizontalAlignment="Left" Margin="101,25,0,0" Name="CpanelSettings" VerticalAlignment="Top" Width="665">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFD4D4D4" Offset="0" />
<GradientStop Color="#FF797979" Offset="1" />
</LinearGradientBrush>
</Grid.Background>
<Label Content="Cpanel Settings" Height="38" HorizontalAlignment="Left" Margin="289,6,0,0" Name="label1" VerticalAlignment="Top" FontWeight="Bold" FontSize="26" FontFamily="Tekton Pro" FontStretch="Condensed" Width="147">
<Label.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="#FFB4AFAF" Offset="1" />
</LinearGradientBrush>
</Label.Foreground>
</Label>
<TextBox Height="30" HorizontalAlignment="Left" Margin="132,50,0,0" Name="textBoxCpanelUserName" VerticalAlignment="Top" Width="187" FontFamily="Tekton Pro" FontWeight="Bold" BorderThickness="2" Template="{StaticResource TextBoxBaseControlTemplate}" FontSize="15" BorderBrush="#FF3BB5C8" GotFocus="textBox1_GotFocus" />
<Label Content="Cpanel Settings" FontFamily="Tekton Pro" FontSize="20" FontStretch="Condensed" FontWeight="Bold" Height="34" HorizontalAlignment="Left" Margin="6,46,0,0" Name="label2" VerticalAlignment="Top" Width="120">
<Label.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="#FFB4AFAF" Offset="1" />
</LinearGradientBrush>
</Label.Foreground>
</Label>
</Grid>
</Grid>
</Window>
I have one more question that if i draw new textbox and try to make its corner round by the drawn template then if i change the color on one textbox on focus all get updated?(i donot want that)
I am extremely sorry if i have said any non-technical thing or said the things wrong.Its because i am totaly new to wpf
Simply add following Trigger to ControlTemplate.Triggers
<Trigger Property="IsFocused" Value="true">
<Setter Property="BorderBrush" TargetName="Bd" Value="Red"/>
</Trigger>
I suppose you forgot to bind Bd's BorderBrush in TextBoxBaseControlTemplate as you made it for Background.
Template should look like the following:
<ControlTemplate x:Key="TextBoxBaseControlTemplate" TargetType="{x:Type TextBoxBase}">
<Setter Property="BorderBrush" Value="#FF3BB5C8"/>
<Border Background="{TemplateBinding Background}"
x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="7">
<ScrollViewer x:Name="PART_ContentHost"/>
</Border>
...
Related
I am developing a WPF application and I'm using the standard WPF Datepicker.
Here is the XAML Code:
<DatePicker Grid.Column="0" Grid.Row="5" Margin="5,0,5,12"
x:Name="SendungDatePicker" SelectedDate="{Binding Path=ProduktionsDatum}"
ToolTip="{x:Static resx:MetaData.DateTooltip}" />
However, when I use it, the upper part of the calendar isn't displayed correctly:
As you can see, I can't see the month and year.
How can I solve this problem?
Thank you for your help
EDIT
I generated a template for the calendar style:
<Style x:Key="CalendarStyle1" TargetType="{x:Type Calendar}">
<Setter Property="Foreground" Value="#FF333333"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE4EAF0" Offset="0"/>
<GradientStop Color="#FFECF0F4" Offset="0.16"/>
<GradientStop Color="#FFFCFCFD" Offset="0.16"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Calendar}">
<StackPanel x:Name="PART_Root" HorizontalAlignment="Center">
<CalendarItem x:Name="PART_CalendarItem" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Style="{TemplateBinding CalendarItemStyle}" Height="Auto" Width="Auto"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How can I update the height of the header of the calendar?
If you generate a style for CalendarItem then you will find that Height of Header Button is 20 and FontSize is 10.5. So you override the CalendarItem style and defined either the height of PART_HeaderTemplate or decrease the FontSize.
<Button x:Name="PART_PreviousButton" Grid.Column="0" Focusable="False" HorizontalAlignment="Left" Height="20" Grid.Row="0" Template="{StaticResource PreviousButtonTemplate}" Width="28"/>
<Button x:Name="PART_HeaderButton" Grid.Column="1" FontWeight="Bold" Focusable="False" FontSize="10.5" HorizontalAlignment="Center" Grid.Row="0" Template="{StaticResource HeaderButtonTemplate}" VerticalAlignment="Center"/>
<Button x:Name="PART_NextButton" Grid.Column="2" Focusable="False" HorizontalAlignment="Right" Height="20" Grid.Row="0" Template="{StaticResource NextButtonTemplate}" Width="28"/>
the problem is very simple, the header of your DatePicker is a Button. Surely you have somewhere put a style for your buttons where you specify a height for them.
Solution: if for your buttons you have set ... Height = 20 you must raise the height, Height = 25 Or try until you see that the header is not cut. That's why my friend cuts himself, because the button is not high enough.
I hope this helps someone who ever has this problem, since it's something that drove me crazy.
Since there is no Border.Effect property in Silverlight for Windows Phone, I managed to recreate a similar effect. What came up after editing the stile of a Pivot control is this:
As you can see the project is one of Visual Studio default templates.
With my custom style, the ItemsPanel is behind that black/gray gradient so, when you scroll the list, it's like items are disappearing.
<Style x:Key="PivotStyle1" TargetType="controls:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<ItemsPanelTemplate>
<Grid />
</ItemsPanelTemplate>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="70" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache" Grid.RowSpan="3"/>
<Grid Grid.Row="1">
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" VerticalAlignment="Top"/>
<Grid Height="50" VerticalAlignment="Top">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#66000000" Offset="0"/>
<GradientStop Offset="1"/>
<GradientStop Color="#19000000" Offset="0.523"/>
</LinearGradientBrush>
</Grid.Background>
</Grid>
</Grid>
<Grid Height="70" Grid.Row="0" VerticalAlignment="Top">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF1665CD" Offset="1"/>
<GradientStop Color="#FF5395EC"/>
</LinearGradientBrush>
</Grid.Background>
<Primitives:PivotHeadersControl x:Name="HeadersListElement"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The problem is that whenever I slide towards PivotItems the two Grid with a gradient background flicker. What could be the problem?
UPDATE: The flickering only appears when I navigate back to this page
Solved setting CacheMode to the Grid elements.
For Example:
<Grid Height="70" CacheMode="BitmapCache" Grid.Row="0" VerticalAlignment="Top">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF1665CD" Offset="1"/>
<GradientStop Color="#FF5395EC"/>
</LinearGradientBrush>
</Grid.Background>
<Primitives:PivotHeadersControl x:Name="HeadersListElement"/>
</Grid>
Rather than restyle the Pivot to add a background you'll probably find it much easier to create a single image to use as the page background and leave the Pivot background as transparent.
In my WPF app, I see these smear-like visual corruptions, especially around rounded corners. Notice the problem with the upper corners of the button.
I tried the following but the issue persists:
SnapToDevicePixels=true
Resized and moved the app window.
Changed the screen resolution
What might be causing this?
XAML for the button:
<Button Width="Auto" Click="btnAdd_Click" Height="Auto" x:Name="btnAdd" VerticalAlignment="Center" HorizontalAlignment="Right" Focusable="False" Margin="20,0,0,0" SnapsToDevicePixels="True">
<StackPanel Orientation="Horizontal" Margin="0">
<TextBlock Text="Ekle" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,5,0"/>
<Image Source="/FideKiosk;component/Icons/right.png" MaxWidth="30" Width="15" Height="15"/>
</StackPanel>
</Button>
and then I have an implicit style in Application.Resources:
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="grid">
<Rectangle RadiusX="10" RadiusY="10" x:Name="rectangle" Opacity="0.995">
<Rectangle.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="0" Color="#FFC0F3AD" Opacity="0"/>
</Rectangle.Effect>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.501,0.039" StartPoint="0.501,0.971">
<GradientStop Color="#FF346223" Offset="0.124" />
<GradientStop Color="#FF325625" Offset="0.526" />
<GradientStop Color="#FF39622B" Offset="0.534" />
<GradientStop Color="#FF367021" Offset="0" />
<GradientStop Color="#FF4A8535" Offset="0.986" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True" Margin="15" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="grid" Value="0.5"/>
</Trigger>
<Trigger Property="IsMouseCaptureWithin" Value="True">
<Setter Property="Effect" TargetName="rectangle">
<Setter.Value>
<DropShadowEffect BlurRadius="30" Color="#FFC0F3AD" Opacity="1" ShadowDepth="0"/>
</Setter.Value>
</Setter>
<Setter Property="Fill" TargetName="rectangle">
<Setter.Value>
<LinearGradientBrush EndPoint="0.501,0.039" StartPoint="0.501,0.971">
<GradientStop Color="#FF346223" Offset="0.303"/>
<GradientStop Color="#FF325625" Offset="0.526"/>
<GradientStop Color="#FF39622B" Offset="0.534"/>
<GradientStop Color="#FF4A8535" Offset="0"/>
<GradientStop Color="#FF8AC077" Offset="0.986"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I used your code and could not find any artifacts in neither the designer nor when running the app. So unless you have more UI elements that are not in code you presented my guess is that the graphics card (hardware/driver) on your machine is causing this.
You could test this by switching to software rendering: Can I force WPF rendering tier?
I'm having a slight problem with reskinning a ProgressBar in WPF. Specifically, no matter what I do, it seems to clip the inner indicator at about 99%. I've tried all sorts of things, from clipping to OpacityMask, but I can't seem to stop the top from cutting off. Any ideas what's going on here?
Code:
<Style x:Key="BarrelStyle" TargetType="{x:Type ProgressBar}">
<Setter Property="Value" Value="100" />
<Setter Property="Orientation" Value="Vertical" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid>
<Border CornerRadius="10" BorderThickness="1" Padding="3,3,3,3" x:Name="PART_Track" Background="Blue">
<Border x:Name="PART_Indicator" CornerRadius="10" BorderBrush="#FFC06565" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
<Grid>
<Border x:Name="Indicator_Content" CornerRadius="10" Background="Red" BorderBrush="White" BorderThickness="1"/>
<Border x:Name="Indicator_Gloss" CornerRadius="10" >
<Border.Background>
<LinearGradientBrush EndPoint="1.0,0.5" StartPoint="0.05,0.5">
<GradientStop Color="#75000000" Offset="0"/>
<GradientStop Color="#7EFFFFFF" Offset="0.5"/>
<GradientStop Color="#75000000" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
</Border>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Try setting inner most Grid's Margin="0,4" and set "PART_Indicator" Margin="0,0,0,-4". Or just use the code below:
<Style x:Key="BarrelStyle" TargetType="{x:Type ProgressBar}">
<Setter Property="Value" Value="100" />
<Setter Property="Orientation" Value="Vertical" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid>
<Border CornerRadius="10" BorderThickness="1" Padding="3,3,3,3" x:Name="PART_Track" Background="Blue">
<Border x:Name="PART_Indicator" CornerRadius="10" BorderBrush="#FFC06565" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Margin="0,0,0,-4">
<Grid Margin="0,4">
<Border x:Name="Indicator_Content" CornerRadius="10" Background="Red" BorderBrush="White" BorderThickness="1"/>
<Border x:Name="Indicator_Gloss" CornerRadius="10" >
<Border.Background>
<LinearGradientBrush EndPoint="1.0,0.5" StartPoint="0.05,0.5">
<GradientStop Color="#75000000" Offset="0"/>
<GradientStop Color="#7EFFFFFF" Offset="0.5"/>
<GradientStop Color="#75000000" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
</Border>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have an Expander placed on a window with a blue background and I would like to make the button for the expander another color than the default (blue, which it is receiving from the window). When I modify the background property of the expander it changes the entire expander, header and all to the new color. However, I would like only the button itself to change. Could anyone point me to the right property that I am looking for?
Thank you
You not only have to retemplate the Expander ... you need to retemplate the ToggleButton within the Expander's template ... so that you can template bind the Background brush set on the Expander all the way down through the Expander's visuals and into the ToggleButton's visuals (using two TemplateBindings).
One thing that is helpful (at least for me) when you are learning how to modify the visuals of the WPF controls is to use the SimpleStyles as these are much easier to copy and modify ... than the full fledged, normal styles & templates.
To do this, open up Blend and go into the Asset Library (the bottom most tool) ... if you click on that you will see two sets of controls: System Controls and Simple Styles. Grab one of the controls (whichever one you want) from the Simple Styles and plunk it down on the design surface. Then, you can right click on it, Edit Control Parts (Template), and Edit a Copy. This will create a copy of the Simple Styles style and template ... which you can then (more easily) modify to your hearts content.
(I should note at this point that I would then modify that xaml (generated by Blend) in both Visual Studio and Blend ... flipping back and forth as necessary ... and taking advantage of the strengths of each: Blend for its WYSIWYG design surface ... and Visual Studio for its code editing and IntelliSense support.)
I have drafted up some quick xaml that does what you are asking and will include it below. You should be able to drop this xaml in Kaxaml or another loose xaml editor.
Hope this helps.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640"
Height="480"
>
<Page.Resources>
<LinearGradientBrush x:Key="NormalBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#EEE" Offset="0.0"/>
<GradientStop Color="#CCC" Offset="1.0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#CCC" Offset="0.0"/>
<GradientStop Color="#444" Offset="1.0"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="GlyphBrush" Color="#444"/>
<LinearGradientBrush x:Key="MouseOverBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#AAA" Offset="1.0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="PressedBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#BBB" Offset="0.0"/>
<GradientStop Color="#EEE" Offset="0.1"/>
<GradientStop Color="#EEE" Offset="0.9"/>
<GradientStop Color="#FFF" Offset="1.0"/>
</LinearGradientBrush>
<ControlTemplate x:Key="newToggleButtonControlTemplate" TargetType="{x:Type ToggleButton}">
<Grid Background="{TemplateBinding Background}">
<Rectangle
x:Name="Rectangle"
Margin="0,0,0,0"
Fill="Transparent"
Stroke="{DynamicResource NormalBorderBrush}"
/>
<Path
x:Name="Up_Arrow"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="{DynamicResource GlyphBrush}"
Data="M 0 0 L 4 4 L 8 0 Z"
/>
<Path
x:Name="Down_Arrow"
Visibility="Collapsed"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="{DynamicResource GlyphBrush}"
Data="M 0 4 L 4 0 L 8 4 Z"
/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Fill" Value="{DynamicResource MouseOverBrush}" TargetName="Rectangle"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Fill" Value="{DynamicResource PressedBrush}" TargetName="Rectangle"/>
</Trigger>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Visibility" Value="Visible" TargetName="Down_Arrow"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="Up_Arrow"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="newExpanderStyle" TargetType="{x:Type Expander}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" x:Name="ContentRow"/>
</Grid.RowDefinitions>
<Border
x:Name="Border"
Grid.Row="0"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="2,2,0,0"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ToggleButton
Template="{DynamicResource newToggleButtonControlTemplate}"
Background="{TemplateBinding Background}"
IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
OverridesDefaultStyle="True"
/>
<ContentPresenter Grid.Column="1" Margin="4" RecognizesAccessKey="True" ContentSource="Header"/>
</Grid>
</Border>
<Border
x:Name="ExpandSite"
Grid.Row="1"
Visibility="Collapsed"
BorderThickness="1,0,1,1"
CornerRadius="0,0,2,2"
>
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"
Focusable="false"
/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter Property="Visibility" Value="Visible" TargetName="ExpandSite"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Page.Background>
<LinearGradientBrush EndPoint="0.997,0.996" StartPoint="0.002,0.058">
<GradientStop Color="#FF63A6DE" Offset="0"/>
<GradientStop Color="#FFC2DEF5" Offset="1"/>
</LinearGradientBrush>
</Page.Background>
<Grid x:Name="LayoutRoot">
<Expander
Style="{DynamicResource newExpanderStyle}"
Header="Expander"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Background="{DynamicResource NormalBrush}"
>
<Grid>
<Button Content="Hello World"/>
</Grid>
</Expander>
</Grid>
</Page>