Wednesday, September 12, 2012

Floating Window Default Styles - Extracted Using Blend

I wanted to customize the style for the Floating Window (you can find it here... it allows Silverlight to have a "modeless" window). Will post more information on using this control when I know more about what I am doing.

Below are the styles and templates that Blend Extracted when I chose "Edit Template > Edit A Copy"

<!-- For the FloatingWindowHost styles and controls-->
                    <Style x:Key="BootstrapButtonStyle" TargetType="my:BootstrapButton">
                        <Setter Property="Width" Value="24"/>
                        <Setter Property="Height" Value="24"/>
                        <Setter Property="BorderBrush" Value="#FFA2ADB8"/>
                        <Setter Property="Background" Value="#FF4E4E4E"/>
                        <Setter Property="VerticalAlignment" Value="Top"/>
                        <Setter Property="IsTabStop" Value="false"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="my:BootstrapButton">
                                    <Grid Height="{TemplateBinding Height}" RenderTransformOrigin="0.5,0.5" Width="{TemplateBinding Width}">
                                        <Grid.RenderTransform>
                                            <CompositeTransform/>
                                        </Grid.RenderTransform>
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroup x:Name="CommonStates">
                                                <VisualStateGroup.Transitions>
                                                    <VisualTransition GeneratedDuration="0"/>
                                                </VisualStateGroup.Transitions>
                                                <VisualState x:Name="Disabled">
                                                    <Storyboard>
                                                        <ColorAnimation Duration="0" To="LightGray" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="PART_Arrow"/>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="Normal"/>
                                                <VisualState x:Name="MouseOver">
                                                    <Storyboard>
                                                        <ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="PART_Arrow"/>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="Pressed">
                                                    <Storyboard>
                                                        <ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="PART_Arrow"/>
                                                        <DoubleAnimation By="1" Duration="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="PART_Arrow"/>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup>
                                            <VisualStateGroup x:Name="ButtonStates">
                                                <VisualState x:Name="Open">
                                                    <Storyboard>
                                                        <DoubleAnimation Duration="0:0:0.4" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="PART_Arrow">
                                                            <DoubleAnimation.EasingFunction>
                                                                <CubicEase EasingMode="EaseOut"/>
                                                            </DoubleAnimation.EasingFunction>
                                                        </DoubleAnimation>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="Close">
                                                    <Storyboard>
                                                        <DoubleAnimation Duration="0:0:0.4" To="180" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="PART_Arrow">
                                                            <DoubleAnimation.EasingFunction>
                                                                <CubicEase EasingMode="EaseOut"/>
                                                            </DoubleAnimation.EasingFunction>
                                                        </DoubleAnimation>
                                                        <DoubleAnimation Duration="0:0:0.4" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="PART_Arrow"/>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup>
                                        </VisualStateManager.VisualStateGroups>
                                        <Ellipse>
                                            <Ellipse.Fill>
                                                <LinearGradientBrush EndPoint="0.691,0.972" StartPoint="0.307,0.037">
                                                    <GradientStop Color="#FFA2ADB8"/>
                                                    <GradientStop Color="White" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Ellipse.Fill>
                                        </Ellipse>
                                        <Ellipse Margin="1">
                                            <Ellipse.Fill>
                                                <LinearGradientBrush EndPoint="0.631,1" MappingMode="RelativeToBoundingBox" StartPoint="0.29,0.045">
                                                    <GradientStop Color="#FFB8C3C8" Offset="1"/>
                                                    <GradientStop Color="#FFE7EBED" Offset="0.27"/>
                                                </LinearGradientBrush>
                                            </Ellipse.Fill>
                                        </Ellipse>
                                        <Path x:Name="PART_Arrow" Data="M27.671843,6 L31.333334,2 L35.02343,6 z" Fill="#FF686D76" HorizontalAlignment="Center" Height="4" RenderTransformOrigin="0.5,0.5" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Center" Width="8">
                                            <Path.RenderTransform>
                                                <CompositeTransform TranslateY="-1"/>
                                            </Path.RenderTransform>
                                        </Path>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                    <Style x:Key="BottomBarStyle" TargetType="Border">
                        <Setter Property="Height" Value="24"/>
                        <Setter Property="Background" Value="#FFE7EBED"/>
                        <Setter Property="BorderThickness" Value="0,1,0,0"/>
                        <Setter Property="BorderBrush" Value="#FFFEFEFE"/>
                    </Style>
                    <Style x:Key="FloatingWindowHostOne" TargetType="my:FloatingWindowHost">
                        <Setter Property="Width" Value="Auto"/>
                        <Setter Property="Height" Value="Auto"/>
                        <Setter Property="SnapinEnabled" Value="True"/>
                        <Setter Property="SnapinDistance" Value="5"/>
                        <Setter Property="SnapinMargin" Value="0"/>
                        <Setter Property="ShowMinimizedOnlyInIconbar" Value="False"/>
                        <Setter Property="HorizontalAlignment" Value="Stretch"/>
                        <Setter Property="VerticalAlignment" Value="Stretch"/>
                        <Setter Property="OverlayBrush" Value="#90202030"/>
                        <Setter Property="Background" Value="#FF7ED2E9"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="my:FloatingWindowHost">
                                    <Grid x:Name="PART_Root" Background="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroup x:Name="OverlayStates">
                                                <VisualState x:Name="VisibleOverlay">
                                                    <Storyboard>
                                                        <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_Overlay">
                                                            <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
                                                        </DoubleAnimationUsingKeyFrames>
                                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_Overlay">
                                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                                <DiscreteObjectKeyFrame.Value>
                                                                    <Visibility>Visible</Visibility>
                                                                </DiscreteObjectKeyFrame.Value>
                                                            </DiscreteObjectKeyFrame>
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="HiddenOverlay">
                                                    <Storyboard>
                                                        <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_Overlay">
                                                            <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
                                                        </DoubleAnimationUsingKeyFrames>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_Overlay">
                                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
                                                                <DiscreteObjectKeyFrame.Value>
                                                                    <Visibility>Collapsed</Visibility>
                                                                </DiscreteObjectKeyFrame.Value>
                                                            </DiscreteObjectKeyFrame>
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup>
                                        </VisualStateManager.VisualStateGroups>
                                        <Grid x:Name="PART_ContentRoot">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="*"/>
                                                <RowDefinition Height="Auto"/>
                                            </Grid.RowDefinitions>
                                            <Canvas x:Name="PART_HostCanvas"/>
                                            <Grid x:Name="PART_IconBarContainer" VerticalAlignment="Bottom">
                                                <my:IconBar x:Name="PART_IconBar"/>
                                            </Grid>
                                            <Border Visibility="Collapsed" x:Name="PART_BottomBar" Grid.Row="1" Style="{StaticResource BottomBarStyle}">
                                                <Grid>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="Auto"/>
                                                        <ColumnDefinition Width="*"/>
                                                    </Grid.ColumnDefinitions>
                                                    <my:BootstrapButton x:Name="PART_BootstrapButton" IsOpen="{Binding IsOpen, ElementName=PART_IconBar}" Margin="10,-4,10,0" Style="{StaticResource BootstrapButtonStyle}"/>
                                                    <Border Grid.Column="1">
                                                        <ContentControl x:Name="PART_BarContent" Content="{TemplateBinding Bar}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>
                                                    </Border>
                                                </Grid>
                                            </Border>
                                        </Grid>
                                        <Grid x:Name="PART_Overlay" Background="{TemplateBinding OverlayBrush}" Opacity="0" />
                                        <Canvas x:Name="PART_ModalCanvas"/>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>

No comments:

Post a Comment