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