MahApps.Metro
MahApps.Metro copied to clipboard
Published
20 hours ago •
MahApps
MahApps
Shadow Flyout
hi. how i can set Shadow for Flyout ?? like this:
I copy and paste all this code in my program but Flyout There is no shadow
Here you can find the Style for the Flyout. As you can see here, the Border has a DropShadowEffect. The resource can be found here. Just copy what you need, you may end up with something like that which has your shadow effect on the flyout:
<mah:MetroWindow
x:Class="TabItemTest.MainWindow"
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:local="clr-namespace:TabItemTest"
xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Title="MainWindow"
Width="800"
Height="450"
mc:Ignorable="d">
<mah:MetroWindow.Resources>
<DropShadowEffect
x:Key="MaterialDesignShadowDepth5"
BlurRadius="35"
Direction="270"
Opacity=".42"
RenderingBias="Performance"
ShadowDepth="13"
Color="#AA000000" />
<ControlTemplate x:Key="FlyoutTemplate" TargetType="{x:Type mah:Flyout}">
<Grid x:Name="PART_Root" Background="{TemplateBinding Background}">
<Grid.RenderTransform>
<TranslateTransform />
</Grid.RenderTransform>
<AdornerDecorator x:Name="PART_Border">
<Border Background="{TemplateBinding Background}" Effect="{DynamicResource MaterialDesignShadowDepth5}" />
</AdornerDecorator>
<AdornerDecorator>
<DockPanel FocusVisualStyle="{x:Null}" Focusable="False">
<mah:MetroThumbContentControl
x:Name="PART_Header"
Content="{TemplateBinding Header}"
ContentCharacterCasing="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mah:ControlsHelper.ContentCharacterCasing)}"
ContentStringFormat="{TemplateBinding HeaderStringFormat}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
DockPanel.Dock="Top"
FontSize="{TemplateBinding mah:ControlsHelper.HeaderFontSize}"
FontStretch="{TemplateBinding mah:ControlsHelper.HeaderFontStretch}"
FontWeight="{TemplateBinding mah:ControlsHelper.HeaderFontWeight}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<ContentPresenter
x:Name="PART_Content"
ContentSource="Content"
DockPanel.Dock="Bottom" />
</DockPanel>
</AdornerDecorator>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Default" />
<VisualState x:Name="Hide">
<Storyboard x:Name="HideStoryboard">
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="PART_Root"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
<SplineDoubleKeyFrame
x:Name="hideFrame"
KeySpline="0.25,1,0.05,1"
KeyTime="00:00:00.750"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="PART_Root"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)">
<SplineDoubleKeyFrame
x:Name="hideFrameY"
KeySpline="0.25,1,0.05,1"
KeyTime="00:00:00.750"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="PART_Root"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame
x:Name="fadeOutFrame"
KeySpline="0.25,1,0.05,1"
KeyTime="00:00:00.750"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="PART_Border"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame
KeySpline="0.25,1,0.05,1"
KeyTime="00:00:00.750"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Show">
<Storyboard x:Name="ShowStoryboard">
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="PART_Root"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
<SplineDoubleKeyFrame
x:Name="showFrame"
KeySpline="0.25,1,0.05,1"
KeyTime="00:00:00.750"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="PART_Root"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)">
<SplineDoubleKeyFrame
x:Name="showFrameY"
KeySpline="0.25,1,0.05,1"
KeyTime="00:00:00.750"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="PART_Root"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame
KeySpline="0.25,1,0.05,1"
KeyTime="00:00:00.750"
Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="HideDirect">
<Storyboard>
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="PART_Root"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="0" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="PART_Root"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="0" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="PART_Root"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ShowDirect">
<Storyboard>
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="PART_Root"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="0" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="PART_Root"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="0" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="PART_Root"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Position" Value="Top">
<Setter TargetName="PART_Content" Property="DockPanel.Dock" Value="Right" />
<Setter TargetName="PART_Header" Property="DockPanel.Dock" Value="Left" />
</Trigger>
<Trigger Property="Position" Value="Bottom">
<Setter TargetName="PART_Content" Property="DockPanel.Dock" Value="Right" />
<Setter TargetName="PART_Header" Property="DockPanel.Dock" Value="Left" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="CloseButtonVisibility" Value="Collapsed" />
<Condition Property="TitleVisibility" Value="Collapsed" />
</MultiTrigger.Conditions>
<Setter TargetName="PART_Header" Property="Visibility" Value="Collapsed" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="CloseButtonVisibility" Value="Hidden" />
<Condition Property="TitleVisibility" Value="Hidden" />
</MultiTrigger.Conditions>
<Setter TargetName="PART_Header" Property="Visibility" Value="Collapsed" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</mah:MetroWindow.Resources>
<mah:MetroWindow.Flyouts>
<mah:FlyoutsControl>
<mah:Flyout
Width="200"
Background="{StaticResource AccentColorBrush}"
IsOpen="True">
<mah:Flyout.Style>
<Style TargetType="mah:Flyout">
<Setter Property="Template" Value="{StaticResource FlyoutTemplate}" />
</Style>
</mah:Flyout.Style>
</mah:Flyout>
</mah:FlyoutsControl>
</mah:MetroWindow.Flyouts>
</mah:MetroWindow>
Maybe a Flyout would be a nice to have thing in MahApps.Metro too (configurable by a property)?
