Question

我尝试使按钮的外观像在CSS中一样，您可以看到here。当您按下此按钮时，看起来好像在里面。

以下是我的try: annotation_object=annotation['object'] except KeyError: annotation_object=[] # possibly some more advanced handling for this case... for b in annotation_object:尝试，我使用了No module named tpot.builtins.stacking_estimator，但与CSS并不完全相同。

如何在CSS中实现完全相同的外观？

是否可以将CSS转换为XAML？

XAML

Answer 1

达到CSS的样子吗？

是的，您只需要从CSS转换为XAML即可。

也许有点肿，但应该是最相似的，欢迎其他人改进

<Button HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Padding="25,10"
        Content="Hello!"
        FontSize="36"
        FontFamily="Franklin Gothic Medium">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <ControlTemplate.Triggers>
                <Trigger Property="IsPressed"
                            Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ThicknessAnimation Storyboard.TargetName="BUTTON_FACE"
                                                    Storyboard.TargetProperty="Margin"
                                                    To="0,4,0,4"
                                                    Duration="0:0:0.15">
                                    <ThicknessAnimation.EasingFunction>
                                        <QuinticEase EasingMode="EaseInOut" />
                                    </ThicknessAnimation.EasingFunction>
                                </ThicknessAnimation>
                                <DoubleAnimation Storyboard.TargetName="BUTTON_SHADOW"
                                                    Storyboard.TargetProperty="ShadowDepth"
                                                    To="2"
                                                    Duration="0:0:0.15">
                                    <DoubleAnimation.EasingFunction>
                                        <QuinticEase EasingMode="EaseInOut" />
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ThicknessAnimation Storyboard.TargetName="BUTTON_FACE"
                                                    Storyboard.TargetProperty="Margin"
                                                    To="0,0,0,8"
                                                    Duration="0:0:0.15">
                                    <ThicknessAnimation.EasingFunction>
                                        <QuinticEase EasingMode="EaseInOut" />
                                    </ThicknessAnimation.EasingFunction>
                                </ThicknessAnimation>
                                <DoubleAnimation Storyboard.TargetName="BUTTON_SHADOW"
                                                    Storyboard.TargetProperty="ShadowDepth"
                                                    To="6"
                                                    Duration="0:0:0.15">
                                    <DoubleAnimation.EasingFunction>
                                        <QuinticEase EasingMode="EaseInOut" />
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </ControlTemplate.Triggers>
            <Grid>
                <Grid.Effect>
                    <DropShadowEffect x:Name="BUTTON_SHADOW"
                                        BlurRadius="6"
                                        Color="Gray"
                                        Direction="-90"
                                        ShadowDepth="6" />
                </Grid.Effect>
                <Border CornerRadius="0,0,10,10"
                        VerticalAlignment="Bottom"
                        Height="18">
                    <Border.Background>
                        <LinearGradientBrush StartPoint="0,0"
                                                EndPoint="0,1">
                            <GradientStop Color="#DEDEDE"
                                            Offset="0.3" />
                            <GradientStop Color="#BEBEBE"
                                            Offset="0.5" />
                            <GradientStop Color="#4E4E4E"
                                            Offset="1" />
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
                <Border Name="BUTTON_FACE"
                        Margin="0,0,0,8">
                    <Border.Effect>
                        <DropShadowEffect BlurRadius="0"
                                            Color="White"
                                            Direction="90"
                                            ShadowDepth="1" />
                    </Border.Effect>
                    <Border CornerRadius="10"
                            Background="#E8E8E8">
                        <Border.Effect>
                            <DropShadowEffect BlurRadius="1"
                                                Direction="-90"
                                                ShadowDepth="1"
                                                Color="White" />
                        </Border.Effect>
                        <Grid>
                            <Rectangle RadiusX="10"
                                        RadiusY="10">
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="0,2"
                                                            EndPoint="2,0"
                                                            MappingMode="Absolute"
                                                            SpreadMethod="Reflect">
                                        <GradientStop Color="#00FFFFFF"
                                                        Offset="0" />
                                        <GradientStop Color="#00FFFFFF"
                                                        Offset="0.2" />
                                        <GradientStop Color="#FFD2D2D1"
                                                        Offset="0.2" />
                                        <GradientStop Color="#FFD2D2D1"
                                                        Offset="0.8" />
                                        <GradientStop Color="#00FFFFFF"
                                                        Offset="0.8" />
                                        <GradientStop Color="#00FFFFFF"
                                                        Offset="1" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Rectangle RadiusX="10"
                                        RadiusY="10">
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="0,0"
                                                            EndPoint="1,0">
                                        <GradientStop Color="#00FFFFFF"
                                                        Offset="0" />
                                        <GradientStop Color="#7FFFFFFF"
                                                        Offset="0.2" />
                                        <GradientStop Color="#7FFFFFFF"
                                                        Offset="0.8" />
                                        <GradientStop Color="#00FFFFFF"
                                                        Offset="1" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Rectangle RadiusX="10"
                                        RadiusY="10">
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="0,0"
                                                            EndPoint="1,0">
                                        <GradientStop Color="#4CD2D2D2"
                                                        Offset="0" />
                                        <GradientStop Color="#00D2D2D2"
                                                        Offset="0.2" />
                                        <GradientStop Color="#00D2D2D2"
                                                        Offset="0.8" />
                                        <GradientStop Color="#4CD2D2D2"
                                                        Offset="1" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Rectangle RadiusX="10"
                                        RadiusY="10">
                                <Rectangle.Fill>
                                    <LinearGradientBrush EndPoint="0,0"
                                                            StartPoint="0,1">
                                        <GradientStop Color="#00FFFFFF"
                                                        Offset="0.5" />
                                        <GradientStop Color="#4CFFFFFF"
                                                        Offset="0.5" />
                                        <GradientStop Color="#33FFFFFF"
                                                        Offset="1" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Border>
                                <Border.Effect>
                                    <DropShadowEffect BlurRadius="0"
                                                        Direction="-90"
                                                        ShadowDepth="1"
                                                        Color="White" />
                                </Border.Effect>
                                <ContentPresenter x:Name="contentPresenter"
                                                    Focusable="False"
                                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                    Margin="{TemplateBinding Padding}"
                                                    RecognizesAccessKey="False"
                                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                    <ContentPresenter.Effect>
                                        <DropShadowEffect BlurRadius="0"
                                                            Direction="90"
                                                            ShadowDepth="1"
                                                            Color="#262F33" />
                                    </ContentPresenter.Effect>
                                </ContentPresenter>
                            </Border>
                        </Grid>
                    </Border>
                </Border>
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>

看来我发现了一些有趣的东西。

在XAML中使用CSS-XamlCSS

https://forums.xamarin.com/discussion/67249/xamlcss-styling-xaml-applications-with-css

如何样式化WPF按钮，如CSS附加示例中所示

1 个答案: