ShrlAlgoToolkit/Melskin/Controls/CodeBox.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:assists="clr-namespace:Melskin.Assists"
    xmlns:controls="clr-namespace:Melskin.Controls"
    xmlns:internal="clr-namespace:Melskin.Converters.Internal"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="{x:Type ToggleButton}" x:Key="CodeSwitchStyle">
        <Setter Property="Foreground" Value="{DynamicResource TextPrimaryBrush}" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Opacity" Value="0.55" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Padding="{TemplateBinding Padding}">
                        <ContentPresenter />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Opacity" Value="1" />
            </Trigger>
        </Style.Triggers>
    </Style>

    <Style TargetType="{x:Type controls:CodeBox}">
        <!--<Setter Property="FontFamily" Value="Chinese Quote" />-->
        <Setter Property="Foreground" Value="{DynamicResource TextPrimaryBrush}" />
        <Setter Property="Background" Value="{DynamicResource ControlBackgroundNormalBrush}" />
        <Setter Property="BorderBrush" Value="{DynamicResource BorderNormalBrush}" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Margin" Value="0,0,0,16" />
        <Setter Property="Padding" Value="24,42,24,50" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="assists:ControlAssist.CornerRadius" Value="2" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type controls:CodeBox}">
                    <Grid UseLayoutRounding="True">
                        <Grid.RowDefinitions>
                            <!--  Content  -->
                            <RowDefinition Height="Auto" />
                            <!--  Title  -->
                            <RowDefinition Height="Auto" />
                            <!--  Description  -->
                            <RowDefinition Height="Auto" />
                            <!--  Code  -->
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <!--  Border  -->
                        <Border
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="{Binding Path=(assists:ControlAssist.CornerRadius), Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                            Grid.Row="0"
                            Grid.RowSpan="4"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        <!--  Content  -->
                        <ContentControl
                            Content="{TemplateBinding Content}"
                            ContentStringFormat="{TemplateBinding ContentStringFormat}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                            Grid.Row="0"
                            Margin="{TemplateBinding Padding}" />
                        <!--  Title  -->
                        <ContentControl
                            Content="{TemplateBinding Title}"
                            ContentTemplate="{TemplateBinding TitleTemplate}"
                            Focusable="False"
                            Grid.Row="1" />

                        <!--  Description  -->
                        <ToggleButton
                            Grid.Row="2"
                            HorizontalAlignment="Right"
                            Margin="0,0,8,8"
                            Style="{StaticResource CodeSwitchStyle}"
                            ToolTip="Show Code"
                            VerticalAlignment="Bottom"
                            x:Name="CodeSwitch">
                            <controls:IconElement
                                Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}}"
                                Height="16"
                                Symbol="CodeOff"
                                Width="16"
                                x:Name="CodeSwitchPath" />
                        </ToggleButton>
                        <ContentControl
                            Content="{TemplateBinding Description}"
                            ContentTemplate="{TemplateBinding DescriptionTemplate}"
                            Focusable="False"
                            Grid.Row="2" />
                        <!--  Code  -->
                        <ContentControl
                            Content="{TemplateBinding Code}"
                            ContentTemplate="{TemplateBinding CodeTemplate}"
                            Focusable="False"
                            Grid.Row="3"
                            Visibility="Collapsed"
                            x:Name="Code" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" SourceName="CodeSwitch" Value="True">
                            <Setter Property="ToolTip" TargetName="CodeSwitch" Value="Hide Code" />
                            <Setter Property="Symbol" TargetName="CodeSwitchPath" Value="Code" />
                            <Setter Property="Visibility" TargetName="Code" Value="Visible" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="TitleTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Canvas>
                        <Border
                            BorderBrush="{Binding BorderBrush, RelativeSource={RelativeSource AncestorType={x:Type controls:CodeBox}}}"
                            BorderThickness="0,1,0,0"
                            Canvas.Left="0"
                            Canvas.Top="0"
                            Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type controls:CodeBox}}}" />
                        <TextBlock
                            Background="{DynamicResource ControlBackgroundNormalBrush}"
                            Canvas.Left="32"
                            Canvas.Top="-10"
                            FontWeight="Medium"
                            Padding="8,1"
                            Panel.ZIndex="1"
                            Text="{TemplateBinding Content}" />
                    </Canvas>
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="DescriptionTemplate">
            <Setter.Value>
                <DataTemplate>
                    <ContentPresenter
                        Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static internal:StringToMarkDownConverter.Instance}}"
                        Margin="32,18"
                        TextBlock.LineHeight="28" />
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="CodeTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Border
                        BorderBrush="{Binding BorderBrush, RelativeSource={RelativeSource AncestorType={x:Type controls:CodeBox}}}"
                        BorderThickness="0,1,0,0"
                        Padding="32,16"
                        Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type controls:CodeBox}}}">
                        <ContentPresenter Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static internal:StringToCodeConverter.Instance}}" />
                    </Border>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--<Style BasedOn="{StaticResource Antd.CodeBox}" TargetType="controls:CodeBox" />-->

</ResourceDictionary>