Home/ Questions/Q 8895363
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T23:45:25+00:00

I currently have a custom WPF Window with a custom titlebar, buttons and border.

  • 0

I currently have a custom WPF Window with a custom titlebar, buttons and border. I also have a Storyboard Animation as follows:

    <Storyboard x:Key="SlideLeftToRight"  
                TargetProperty="RenderTransform.(TranslateTransform.X)"
                AccelerationRatio=".5"
                DecelerationRatio=".5">
        <DoubleAnimation Storyboard.TargetName="PageViewer" Duration="0:0:0.8" From="{Binding Width, ElementName=PrimaryWindow}" To="0"/>
        <DoubleAnimation Storyboard.TargetName="BorderVisual" Duration="0:0:0.8" From="0" To="-1252"/>
    </Storyboard>

    <Storyboard x:Key="SlideRightToLeft" 
                TargetProperty="RenderTransform.(TranslateTransform.X)"
                AccelerationRatio=".5"
                DecelerationRatio=".5">
        <DoubleAnimation Storyboard.TargetName="PageViewer" Duration="0:0:0.8" From="-1252" To="0"/>
        <DoubleAnimation Storyboard.TargetName="BorderVisual" Duration="0:0:0.8" From="0" To="{Binding Width, ElementName=PrimaryWindow}"/>
    </Storyboard>

The only problem, is that these animations display over the windows border, thus covering the shadow effect. Is there a way to maybe make the custom border be seen as undrawable? Here is the full XAML of my Window in case that will help.

<Window x:Name="PrimaryWindow"
 x:Class="MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="clr-namespace:Metro_Test"
 Title="MainWindow"
 Height="800"
 Width="1280"
 IsTabStop="False"
 AllowsTransparency="True"
 Background="Transparent"
 BorderBrush="#FF3F3F3F"
 SnapsToDevicePixels="True"
 TextOptions.TextFormattingMode="Display"
 TextOptions.TextRenderingMode="ClearType"
 WindowStyle="None"
 WindowStartupLocation="CenterScreen" AllowDrop="True" ResizeMode="CanResizeWithGrip">

<Window.Resources>
    <Style x:Key="NoChromeButton" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid x:Name="Chrome" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#ADADAD"/>
                            <Setter Property="Opacity" TargetName="Chrome" Value="0.5"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Image x:Key="WhiteClose" Source="Images\White\Close.png" Height="24" Width="24"/>
    <Image x:Key="WhiteAdd" Source="Images\White\Add.png" Height="24" Width="24"/>
    <Image x:Key="WhiteMinus" Source="Images\White\Minus.png" Height="24" Width="24"/>
    <Image x:Key="GrayClose" Source="Images\Gray\Close.png" Height="24" Width="24"/>
    <Image x:Key="GrayAdd" Source="Images\Gray\Add.png" Height="24" Width="24"/>
    <Image x:Key="GrayMinus" Source="Images\Gray\Minus.png" Height="24" Width="24"/>
    <XmlDataProvider x:Key="PageViews">
        <x:XData>
            <Views xmlns="">
                <View Title="View1">
                    <Page Source="MainPage.xaml"/>
                </View>
                <View Title="View2">
                    <Page Source="AddReferencePage.xaml"/>
                </View>
                <View Title="View3">
                    <Page Source="ReferenceManagementPage.xaml"/>
                </View>
            </Views>
        </x:XData>
    </XmlDataProvider>

    <Storyboard x:Key="SlideLeftToRight"  
                TargetProperty="RenderTransform.(TranslateTransform.X)"
                AccelerationRatio=".5"
                DecelerationRatio=".5">
        <DoubleAnimation Storyboard.TargetName="PageViewer" Duration="0:0:0.8" From="{Binding Width, ElementName=PrimaryWindow}" To="0"/>
        <DoubleAnimation Storyboard.TargetName="BorderVisual" Duration="0:0:0.8" From="0" To="-1252"/>
    </Storyboard>

    <Storyboard x:Key="SlideRightToLeft" 
                TargetProperty="RenderTransform.(TranslateTransform.X)"
                AccelerationRatio=".5"
                DecelerationRatio=".5">
        <DoubleAnimation Storyboard.TargetName="PageViewer" Duration="0:0:0.8" From="-1252" To="0"/>
        <DoubleAnimation Storyboard.TargetName="BorderVisual" Duration="0:0:0.8" From="0" To="{Binding Width, ElementName=PrimaryWindow}"/>
    </Storyboard>

    <VisualBrush x:Key="VisualBrush1" Visual="{Binding ElementName=PageViewer}"/>
</Window.Resources>

<Border
    x:Name="m_edgeBorder"
    Margin="14"
    Background="White">

    <Border.Effect>
        <DropShadowEffect
        Opacity="0.999"
        BlurRadius="14"
        ShadowDepth="0"/>
    </Border.Effect>

    <Grid x:Name="MainGrid">

        <Rectangle
            x:Name="TitleBar"
            Height="28"
            Fill="Blue"
            VerticalAlignment="Top"
            AllowDrop="False"
            PreviewMouseLeftButtonDown="FormMouseDown"
            PreviewMouseMove="FormMouseMove"/>

        <Button x:Name="CloseButton" Style="{DynamicResource NoChromeButton}" Click="HandleCloseClick" MouseEnter="HandleMouseEnter" MouseLeave="HandleMouseLeave" ClickMode="Release" HorizontalAlignment="Right" Margin="500,2,2,0" VerticalAlignment="Top" Width="24" Height="24">
            <DynamicResource ResourceKey="GrayClose"/>
        </Button>

        <Button x:Name="MaximiseButton" Style="{DynamicResource NoChromeButton}" Click="HandleMaximiseClick" MouseEnter="HandleMouseEnter" MouseLeave="HandleMouseLeave" ClickMode="Release" HorizontalAlignment="Right" Margin="500,2,28,0" VerticalAlignment="Top" Width="24" Height="24">
            <DynamicResource ResourceKey="GrayAdd"/>
        </Button>

        <Button x:Name="MinimiseButton" Style="{DynamicResource NoChromeButton}" Click="HandleMinimiseClick" MouseEnter="HandleMouseEnter" MouseLeave="HandleMouseLeave" ClickMode="Release" HorizontalAlignment="Right" Margin="500,2,54,0" VerticalAlignment="Top" Width="24" Height="24">
            <DynamicResource ResourceKey="GrayMinus"/>
        </Button>

        <TextBlock Text="Metro Form" FontSize="18" FontFamily="Segoe Light" Margin="0,5" HorizontalAlignment="Center" Foreground="White"/>

        <StackPanel>
            <StackPanel Orientation="Vertical" Margin="28,28,0,0">
                <ListBox x:Name="ViewList" Height="20" Width="300" SelectedIndex="0"
                ItemsSource="{Binding Source={StaticResource PageViews}, XPath=Views/View}"
                DisplayMemberPath="@Title"                    
                SelectionChanged="ChangedSlideSelection">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                </ListBox>
            </StackPanel>

            <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">

                <Border x:Name="BorderVisual" HorizontalAlignment="Stretch">
                    <Rectangle x:Name="RectangleVisual"/>
                    <Border.RenderTransform>
                        <TranslateTransform/>
                    </Border.RenderTransform>
                </Border>

                <ItemsControl x:Name="PageViewer" DataContext="{Binding Path=SelectedItem, ElementName=ViewList}"
                    ItemsSource="{Binding XPath=Page}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Frame x:Name="frame" Source="{Binding XPath=@Source}"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.RenderTransform>
                        <TranslateTransform/>
                    </ItemsControl.RenderTransform>
                </ItemsControl>
            </Grid>
        </StackPanel>
    </Grid>
</Border>
</Window>

Thank you! Probably won’t be able to respond/upvote/mark as answered until tomorrow…Really sleepy right now 😀

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I solved this question. Simply changing the ClipToBounds property on the parent object of the animation stopped the animation leaving the parent.

    <Grid ClipToBounds="True">
     ...
</Grid>
    • 0