d350a89324
The MUX TabView control has a uniquely-shaped [+] button. TerminalApp doesn't use it: instead, it has a SplitView button that is styled to look like MUX's official button. However, it doesn't get the button's shape right. This PR updates TerminalApp's custom button to look more like MUX's. The difference is that MUX only rounds the top two corners, and it uses a bigger radius. Without matching MUX's radius, the upper-left corner of the button makes an awkward asymmetric divot with the abutting tab. There's also a spot in the lower-left corner that just looks like someone accidentally spilled a few pixels on the floor. Current appearance before this PR:  New appearance with this PR:  Most important deltas highlighted with red circles:  Note that this PR does *not* attempt to fix the colors. The colors are also just slightly different from what MUX uses. I'll save that for a separate PR, since all those screenshots would clutter this up this PR.
75 lines
4.9 KiB
XML
75 lines
4.9 KiB
XML
<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under
|
|
the MIT License. See LICENSE in the project root for license information. -->
|
|
<ContentPresenter
|
|
x:Class="TerminalApp.TabRowControl"
|
|
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:local="using:TerminalApp"
|
|
xmlns:mux="using:Microsoft.UI.Xaml.Controls"
|
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
|
mc:Ignorable="d">
|
|
|
|
<mux:TabView x:Name="TabView"
|
|
VerticalAlignment="Bottom"
|
|
HorizontalContentAlignment="Stretch"
|
|
IsAddTabButtonVisible="false"
|
|
TabWidthMode="Equal"
|
|
CanReorderTabs="True"
|
|
CanDragTabs="True"
|
|
AllowDropTabs="True">
|
|
|
|
<mux:TabView.TabStripFooter>
|
|
<mux:SplitButton
|
|
x:Name="NewTabButton"
|
|
x:Uid="NewTabSplitButton"
|
|
Click="OnNewTabButtonClick"
|
|
VerticalAlignment="Stretch"
|
|
HorizontalAlignment="Left"
|
|
Content=""
|
|
UseLayoutRounding="true"
|
|
FontFamily="Segoe MDL2 Assets"
|
|
FontWeight="SemiLight"
|
|
FontSize="12"
|
|
BorderThickness="0"
|
|
CornerRadius="{Binding Source={ThemeResource OverlayCornerRadius}, Converter={StaticResource TopCornerRadiusFilterConverter}}"
|
|
AutomationProperties.AccessibilityView="Control">
|
|
<!-- U+E710 is the fancy plus icon. -->
|
|
<mux:SplitButton.Resources>
|
|
<!-- Override the SplitButton* resources to match the tab view's button's styles. -->
|
|
<ResourceDictionary>
|
|
<ResourceDictionary.ThemeDictionaries>
|
|
<ResourceDictionary x:Key="Light">
|
|
<StaticResource x:Key="SplitButtonBackground" ResourceKey="TabViewItemHeaderBackground" />
|
|
<StaticResource x:Key="SplitButtonForeground" ResourceKey="SystemControlBackgroundBaseMediumBrush" />
|
|
<StaticResource x:Key="SplitButtonBackgroundPressed" ResourceKey="TabViewItemHeaderBackgroundPressed" />
|
|
<StaticResource x:Key="SplitButtonForegroundPressed" ResourceKey="SystemControlBackgroundBaseMediumHighBrush" />
|
|
<StaticResource x:Key="SplitButtonBackgroundPointerOver" ResourceKey="TabViewItemHeaderBackgroundPointerOver" />
|
|
<StaticResource x:Key="SplitButtonForegroundPointerOver" ResourceKey="SystemControlBackgroundBaseMediumHighBrush" />
|
|
</ResourceDictionary>
|
|
<ResourceDictionary x:Key="Dark">
|
|
<StaticResource x:Key="SplitButtonBackground" ResourceKey="TabViewItemHeaderBackground" />
|
|
<StaticResource x:Key="SplitButtonForeground" ResourceKey="SystemControlBackgroundBaseMediumBrush" />
|
|
<StaticResource x:Key="SplitButtonBackgroundPressed" ResourceKey="TabViewItemHeaderBackgroundPressed" />
|
|
<StaticResource x:Key="SplitButtonForegroundPressed" ResourceKey="SystemControlBackgroundBaseMediumHighBrush" />
|
|
<StaticResource x:Key="SplitButtonBackgroundPointerOver" ResourceKey="TabViewItemHeaderBackgroundPointerOver" />
|
|
<StaticResource x:Key="SplitButtonForegroundPointerOver" ResourceKey="SystemControlBackgroundBaseMediumHighBrush" />
|
|
</ResourceDictionary>
|
|
<ResourceDictionary x:Key="HighContrast">
|
|
<StaticResource x:Key="SplitButtonBackground" ResourceKey="TabViewItemHeaderBackground" />
|
|
<StaticResource x:Key="SplitButtonForeground" ResourceKey="SystemControlBackgroundBaseMediumBrush" />
|
|
<StaticResource x:Key="SplitButtonBackgroundPressed" ResourceKey="TabViewItemHeaderBackgroundPressed" />
|
|
<StaticResource x:Key="SplitButtonForegroundPressed" ResourceKey="SystemControlBackgroundBaseMediumHighBrush" />
|
|
<StaticResource x:Key="SplitButtonBackgroundPointerOver" ResourceKey="TabViewItemHeaderBackgroundPointerOver" />
|
|
<StaticResource x:Key="SplitButtonForegroundPointerOver" ResourceKey="SystemControlBackgroundBaseMediumHighBrush" />
|
|
</ResourceDictionary>
|
|
</ResourceDictionary.ThemeDictionaries>
|
|
</ResourceDictionary>
|
|
</mux:SplitButton.Resources>
|
|
</mux:SplitButton>
|
|
</mux:TabView.TabStripFooter>
|
|
|
|
</mux:TabView>
|
|
|
|
</ContentPresenter>
|