<Window x:Class="SimonSays.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:simonSays="clr-namespace:SimonSays"
mc:Ignorable="d"
Height="480" Width="480"
AllowsTransparency="True" Background="Transparent" WindowStyle="None"
d:DataContext="{d:DesignInstance simonSays:SimonSaysRound}">
<Window.Clip>
<EllipseGeometry RadiusX="240" RadiusY="240" Center="242,242" />
</Window.Clip>
<Border Background="Black" BorderThickness="2">
<Border.Clip>
<EllipseGeometry Center="240,240" RadiusX="238" RadiusY="238" />
</Border.Clip>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel x:Name="MessageBar" Grid.Row="1" Grid.ColumnSpan="2" Margin="4" Height="0">
<TextBlock x:Name="GameButton" Foreground="White" HorizontalAlignment="Center" FontSize="24" FontWeight="Bold" />
<TextBlock x:Name="GameScoreLabel" Text="{Binding Score, StringFormat=Your score: \{0\}}" Foreground="White" HorizontalAlignment="Center" FontWeight="Bold" IsEnabled="False" />
</StackPanel>
<Border x:Name="Green" Margin="1" CornerRadius="16" MouseDown="Green_MouseDown">
<Border.Clip>
<EllipseGeometry Center="240,240" RadiusX="240" RadiusY="240" />
</Border.Clip>
<Border.Style>
<Style>
<Setter Property="Border.Background">
<Setter.Value>
<RadialGradientBrush GradientOrigin="1,1" RadiusX="1" RadiusY="1">
<GradientStop Color="LightGreen" Offset="0.0" />
<GradientStop Color="DarkGreen" Offset="0.5" />
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Border.MouseEnter">
<BeginStoryboard>
<Storyboard TargetProperty="Background.GradientStops[1].Offset" Duration="0:0:0.25">
<DoubleAnimation To="1.0" />
<Storyboard TargetProperty="Background.GradientStops[0].Offset">
<DoubleAnimation To="0.2" />
</Storyboard>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Border.MouseLeave">
<BeginStoryboard>
<Storyboard TargetProperty="Background.GradientStops[1].Offset" Duration="0:0:0.25">
<DoubleAnimation To="0.5" />
<Storyboard TargetProperty="Background.GradientStops[0].Offset">
<DoubleAnimation To="0.0" />
</Storyboard>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
<Border Grid.Column="1" x:Name="Red" Margin="1" CornerRadius="16" MouseDown="Red_MouseDown">
<Border.Clip>
<EllipseGeometry Center="-4,240" RadiusX="240" RadiusY="240" />
</Border.Clip>
<Border.Style>
<Style>
<Setter Property="Border.Background">
<Setter.Value>
<RadialGradientBrush GradientOrigin="0,1" RadiusX="1" RadiusY="1">
<GradientStop Color="LightPink" Offset="0.0" />
<GradientStop Color="DarkRed" Offset="0.5" />
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Border.MouseEnter">
<BeginStoryboard>
<Storyboard TargetProperty="Background.GradientStops[1].Offset" Duration="0:0:0.25">
<DoubleAnimation To="1.0" />
<Storyboard TargetProperty="Background.GradientStops[0].Offset">
<DoubleAnimation To="0.2" />
</Storyboard>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Border.MouseLeave">
<BeginStoryboard>
<Storyboard TargetProperty="Background.GradientStops[1].Offset" Duration="0:0:0.25">
<DoubleAnimation To="0.5" />
<Storyboard TargetProperty="Background.GradientStops[0].Offset">
<DoubleAnimation To="0.0" />
</Storyboard>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
<Border Grid.Row="2" x:Name="Yellow" Margin="1" CornerRadius="16" MouseDown="Yellow_MouseDown">
<Border.Clip>
<EllipseGeometry Center="240,-4" RadiusX="240" RadiusY="240" />
</Border.Clip>
<Border.Style>
<Style>
<Setter Property="Border.Background">
<Setter.Value>
<RadialGradientBrush GradientOrigin="1,0" RadiusX="1" RadiusY="1">
<GradientStop Color="LightYellow" Offset="0.0" />
<GradientStop Color="Orange" Offset="0.5" />
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Border.MouseEnter">
<BeginStoryboard>
<Storyboard TargetProperty="Background.GradientStops[1].Offset" Duration="0:0:0.25">
<DoubleAnimation To="1.0" />
<Storyboard TargetProperty="Background.GradientStops[0].Offset">
<DoubleAnimation To="0.2" />
</Storyboard>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Border.MouseLeave">
<BeginStoryboard>
<Storyboard TargetProperty="Background.GradientStops[1].Offset" Duration="0:0:0.25">
<DoubleAnimation To="0.5" />
<Storyboard TargetProperty="Background.GradientStops[0].Offset">
<DoubleAnimation To="0.0" />
</Storyboard>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
<Border Grid.Row="2" Grid.Column="1" x:Name="Blue" Margin="1" CornerRadius="16" MouseDown="Blue_MouseDown">
<Border.Clip>
<EllipseGeometry Center="-4,-4" RadiusX="240" RadiusY="240" />
</Border.Clip>
<Border.Style>
<Style>
<Setter Property="Border.Background">
<Setter.Value>
<RadialGradientBrush GradientOrigin="0,0" RadiusX="1" RadiusY="1">
<GradientStop Color="LightSkyBlue" Offset="0.0" />
<GradientStop Color="Blue" Offset="0.5" />
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Border.MouseEnter">
<BeginStoryboard>
<Storyboard TargetProperty="Background.GradientStops[1].Offset" Duration="0:0:0.25">
<DoubleAnimation To="1.0" />
<Storyboard TargetProperty="Background.GradientStops[0].Offset">
<DoubleAnimation To="0.2" />
</Storyboard>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Border.MouseLeave">
<BeginStoryboard>
<Storyboard TargetProperty="Background.GradientStops[1].Offset" Duration="0:0:0.25">
<DoubleAnimation To="0.5" />
<Storyboard TargetProperty="Background.GradientStops[0].Offset">
<DoubleAnimation To="0.0" />
</Storyboard>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
</Grid>
</Border>
</Window>
结果是一个圆形窗口，带有4个象限和一个黑色水平带，用作拖动窗口的手柄：
我也在用它来显示消息，并且播放器的得分是：
扩展消息栏时，按钮/象限被禁用（不能单击；它们仍然对鼠标悬停做出反应），并在单击消息后折叠时重新启用。
没有控件框，只能通过单击“游戏”来关闭窗口上方”标签：
我有这个C＃后面的代码中的代码（以及其他尚未准备就绪的代码），用于使按钮单击和消息带动起来：
private void AnimateMessageBand(double height)
{
var animation = new DoubleAnimation(height, new Duration(TimeSpan.FromMilliseconds(200)));
RegisterName(MessageBar.Name, MessageBar);
Storyboard.SetTargetName(animation, MessageBar.Name);
Storyboard.SetTargetProperty(animation, new PropertyPath("Height"));
var story = new Storyboard();
story.Children.Add(animation);
story.Begin(MessageBar);
story.Remove();
}
private readonly IDictionary<SimonButton, Border> _buttons;
public void HighlightSimonButton(SimonButton button)
{
var animation = new DoubleAnimation(0, 0.75, new Duration(TimeSpan.FromMilliseconds(100)));
RegisterName(button.ToString(), _buttons[button]);
Storyboard.SetTargetName(animation, button.ToString());
Storyboard.SetTargetProperty(animation, new PropertyPath("Background.GradientStops[1].Offset"));
var story = new Storyboard();
story.Children.Add(animation);
story.Begin(_buttons[button]);
story.Remove();
}
#1 楼
您可以使用
Border创建按钮，而不是使用带有自定义模板的实际Button类。因此，您必须手动管理所有已在常规Button中实现的交互（Clicked，IsPressed，Command，它们与IsEnabled属性和键盘的交互等）。因此，我建议您使用实际的按钮。好吧，您的情节提要板显然已粘贴。 :)为什么不将它们移至资源？