355 lines
23 KiB
XML
355 lines
23 KiB
XML
<UserControl
|
|
x:Class="FluentTerminal.App.Views.TabBar"
|
|
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
|
|
xmlns:behaviors="using:FluentTerminal.App.Behaviors"
|
|
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
|
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
|
xmlns:models="using:FluentTerminal.Models"
|
|
xmlns:viewmodels="using:FluentTerminal.App.ViewModels"
|
|
xmlns:views="using:FluentTerminal.App.Views"
|
|
d:DesignHeight="32"
|
|
d:DesignWidth="200"
|
|
mc:Ignorable="d">
|
|
|
|
<Grid x:Name="Tabs">
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="Auto" />
|
|
<ColumnDefinition Width="*" />
|
|
<ColumnDefinition Width="Auto" />
|
|
<ColumnDefinition Width="Auto" />
|
|
</Grid.ColumnDefinitions>
|
|
<RepeatButton
|
|
x:Name="ScrollLeftButton"
|
|
Grid.Column="0"
|
|
Width="24"
|
|
Padding="0,0,0,0"
|
|
Click="OnScrollLeftButtonTapped"
|
|
Style="{StaticResource TitleBarRepeatButtonStyle}"
|
|
ToolTipService.ToolTip="Scroll left"
|
|
Visibility="Collapsed">
|
|
<RepeatButton.Content>
|
|
<Viewbox Width="12" Height="12">
|
|
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" />
|
|
</Viewbox>
|
|
</RepeatButton.Content>
|
|
</RepeatButton>
|
|
<ScrollViewer
|
|
x:Name="ScrollViewer"
|
|
Grid.Column="1"
|
|
HorizontalScrollBarVisibility="Hidden"
|
|
HorizontalScrollMode="Enabled"
|
|
VerticalScrollBarVisibility="Hidden"
|
|
VerticalScrollMode="Disabled">
|
|
<ListView
|
|
x:Name="ListView"
|
|
AllowDrop="True"
|
|
Background="Transparent"
|
|
CanDragItems="True"
|
|
CanReorderItems="True"
|
|
ItemsSource="{x:Bind ItemsSource}"
|
|
SelectedItem="{x:Bind SelectedItem, Mode=TwoWay}">
|
|
<ListView.ItemTemplate>
|
|
<DataTemplate x:DataType="viewmodels:TerminalViewModel">
|
|
<RelativePanel
|
|
Height="32"
|
|
Margin="0"
|
|
VerticalAlignment="Stretch"
|
|
Background="Transparent"
|
|
ToolTipService.ToolTip="{x:Bind Title, Mode=OneWay}">
|
|
<Interactivity:Interaction.Behaviors>
|
|
<behaviors:MiddleClickBehavior>
|
|
<behaviors:MiddleClickBehavior.Actions>
|
|
<core:InvokeCommandAction Command="{x:Bind CloseCommand}" />
|
|
</behaviors:MiddleClickBehavior.Actions>
|
|
</behaviors:MiddleClickBehavior>
|
|
</Interactivity:Interaction.Behaviors>
|
|
<RelativePanel.ContextFlyout>
|
|
<MenuFlyout>
|
|
<MenuFlyoutSubItem Text="Color">
|
|
<ToggleMenuFlyoutItem
|
|
Command="{x:Bind SelectTabThemeCommand}"
|
|
CommandParameter="None"
|
|
IsChecked="{x:Bind TabTheme, Mode=OneWay, Converter={StaticResource TabThemeSelectedConverter}, ConverterParameter=None}"
|
|
Text="None">
|
|
<ToggleMenuFlyoutItem.Icon>
|
|
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" />
|
|
</ToggleMenuFlyoutItem.Icon>
|
|
</ToggleMenuFlyoutItem>
|
|
<ToggleMenuFlyoutItem
|
|
Command="{x:Bind SelectTabThemeCommand}"
|
|
CommandParameter="Red"
|
|
IsChecked="{x:Bind TabTheme, Mode=OneWay, Converter={StaticResource TabThemeSelectedConverter}, ConverterParameter=Red}"
|
|
Text="Red">
|
|
<ToggleMenuFlyoutItem.Icon>
|
|
<FontIcon
|
|
FontFamily="Segoe MDL2 Assets"
|
|
Foreground="#E81123"
|
|
Glyph="" />
|
|
</ToggleMenuFlyoutItem.Icon>
|
|
</ToggleMenuFlyoutItem>
|
|
<ToggleMenuFlyoutItem
|
|
Command="{x:Bind SelectTabThemeCommand}"
|
|
CommandParameter="Green"
|
|
IsChecked="{x:Bind TabTheme, Mode=OneWay, Converter={StaticResource TabThemeSelectedConverter}, ConverterParameter=Green}"
|
|
Text="Green">
|
|
<ToggleMenuFlyoutItem.Icon>
|
|
<FontIcon
|
|
FontFamily="Segoe MDL2 Assets"
|
|
Foreground="#10893E"
|
|
Glyph="" />
|
|
</ToggleMenuFlyoutItem.Icon>
|
|
</ToggleMenuFlyoutItem>
|
|
<ToggleMenuFlyoutItem
|
|
Command="{x:Bind SelectTabThemeCommand}"
|
|
CommandParameter="Blue"
|
|
IsChecked="{x:Bind TabTheme, Mode=OneWay, Converter={StaticResource TabThemeSelectedConverter}, ConverterParameter=Blue}"
|
|
Text="Blue">
|
|
<ToggleMenuFlyoutItem.Icon>
|
|
<FontIcon
|
|
FontFamily="Segoe MDL2 Assets"
|
|
Foreground="#0078D7"
|
|
Glyph="" />
|
|
</ToggleMenuFlyoutItem.Icon>
|
|
</ToggleMenuFlyoutItem>
|
|
<ToggleMenuFlyoutItem
|
|
Command="{x:Bind SelectTabThemeCommand}"
|
|
CommandParameter="Purple"
|
|
IsChecked="{x:Bind TabTheme, Mode=OneWay, Converter={StaticResource TabThemeSelectedConverter}, ConverterParameter=Purple}"
|
|
Text="Purple">
|
|
<ToggleMenuFlyoutItem.Icon>
|
|
<FontIcon
|
|
FontFamily="Segoe MDL2 Assets"
|
|
Foreground="#881798"
|
|
Glyph="" />
|
|
</ToggleMenuFlyoutItem.Icon>
|
|
</ToggleMenuFlyoutItem>
|
|
<ToggleMenuFlyoutItem
|
|
Command="{x:Bind SelectTabThemeCommand}"
|
|
CommandParameter="Orange"
|
|
IsChecked="{x:Bind TabTheme, Mode=OneWay, Converter={StaticResource TabThemeSelectedConverter}, ConverterParameter=Orange}"
|
|
Text="Orange">
|
|
<ToggleMenuFlyoutItem.Icon>
|
|
<FontIcon
|
|
FontFamily="Segoe MDL2 Assets"
|
|
Foreground="#FF8C00"
|
|
Glyph="" />
|
|
</ToggleMenuFlyoutItem.Icon>
|
|
</ToggleMenuFlyoutItem>
|
|
<ToggleMenuFlyoutItem
|
|
Command="{x:Bind SelectTabThemeCommand}"
|
|
CommandParameter="Teal"
|
|
IsChecked="{x:Bind TabTheme, Mode=OneWay, Converter={StaticResource TabThemeSelectedConverter}, ConverterParameter=Teal}"
|
|
Text="Teal">
|
|
<ToggleMenuFlyoutItem.Icon>
|
|
<FontIcon
|
|
FontFamily="Segoe MDL2 Assets"
|
|
Foreground="#00B7C3"
|
|
Glyph="" />
|
|
</ToggleMenuFlyoutItem.Icon>
|
|
</ToggleMenuFlyoutItem>
|
|
</MenuFlyoutSubItem>
|
|
<MenuFlyoutItem Command="{x:Bind EditTitleCommand}" Text="Edit Title" />
|
|
<MenuFlyoutSeparator />
|
|
<MenuFlyoutItem Command="{x:Bind CloseCommand}" Text="Close" />
|
|
</MenuFlyout>
|
|
</RelativePanel.ContextFlyout>
|
|
<Border
|
|
Grid.ColumnSpan="3"
|
|
Height="3"
|
|
VerticalAlignment="Bottom"
|
|
Background="{x:Bind TabTheme.Color, Mode=OneWay, Converter={StaticResource ColorResourceKeyFallbackConverter}, ConverterParameter=SystemControlHighlightAccentBrush}"
|
|
RelativePanel.AlignBottomWithPanel="True"
|
|
RelativePanel.AlignLeftWithPanel="True"
|
|
RelativePanel.AlignRightWithPanel="True"
|
|
Visibility="{x:Bind IsUnderlined, Mode=OneWay, Converter={StaticResource TrueToVisibleConverter}}" />
|
|
<TextBlock
|
|
Grid.Column="0"
|
|
Margin="12,8,6,0"
|
|
RelativePanel.AlignLeftWithPanel="True"
|
|
RelativePanel.LeftOf="CloseButton"
|
|
Style="{StaticResource CaptionTextBlockStyle}"
|
|
Text="{x:Bind Title, Mode=OneWay}"
|
|
TextTrimming="CharacterEllipsis"
|
|
TextWrapping="NoWrap" />
|
|
<Grid
|
|
x:Name="CloseButton"
|
|
Grid.Column="2"
|
|
Width="32"
|
|
RelativePanel.AlignRightWithPanel="True">
|
|
<Button
|
|
HorizontalAlignment="Center"
|
|
Command="{x:Bind CloseCommand}"
|
|
Style="{StaticResource TitleBarButtonStyle}"
|
|
ToolTipService.ToolTip="Close"
|
|
Visibility="{x:Bind IsSelected, Mode=OneWay, Converter={StaticResource TrueToVisibleConverter}}">
|
|
<Viewbox Width="12" Height="12">
|
|
<SymbolIcon Symbol="Cancel" />
|
|
</Viewbox>
|
|
</Button>
|
|
<Grid Height="32" Visibility="{x:Bind NewOutput, Mode=OneWay, Converter={StaticResource TrueToVisibleConverter}}">
|
|
<Viewbox
|
|
Width="12"
|
|
Height="12"
|
|
VerticalAlignment="Center"
|
|
ToolTipService.ToolTip="New output">
|
|
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" />
|
|
</Viewbox>
|
|
</Grid>
|
|
</Grid>
|
|
</RelativePanel>
|
|
</DataTemplate>
|
|
</ListView.ItemTemplate>
|
|
<ListView.Template>
|
|
<ControlTemplate>
|
|
<ItemsPresenter />
|
|
</ControlTemplate>
|
|
</ListView.Template>
|
|
<ListView.ItemContainerStyle>
|
|
<Style TargetType="ListViewItem">
|
|
<Setter Property="MinWidth" Value="100" />
|
|
<Setter Property="MaxWidth" Value="200" />
|
|
<Setter Property="MinHeight" Value="32" />
|
|
<Setter Property="Padding" Value="0" />
|
|
<Setter Property="views:TabBarBackgroundBindingHelper.BackgroundBindingPath" Value="BackgroundTabTheme" />
|
|
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
|
|
<Setter Property="VerticalContentAlignment" Value="Stretch" />
|
|
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
|
|
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
|
|
<Setter Property="Foreground" Value="{ThemeResource ListViewItemForeground}" />
|
|
<Setter Property="TabNavigation" Value="Local" />
|
|
<Setter Property="IsHoldingEnabled" Value="True" />
|
|
<Setter Property="AllowDrop" Value="False" />
|
|
<Setter Property="UseSystemFocusVisuals" Value="True" />
|
|
<Setter Property="FocusVisualMargin" Value="0" />
|
|
<Setter Property="FocusVisualPrimaryBrush" Value="{ThemeResource ListViewItemFocusVisualPrimaryBrush}" />
|
|
<Setter Property="FocusVisualPrimaryThickness" Value="2" />
|
|
<Setter Property="FocusVisualSecondaryBrush" Value="{ThemeResource ListViewItemFocusVisualSecondaryBrush}" />
|
|
<Setter Property="FocusVisualSecondaryThickness" Value="1" />
|
|
<Setter Property="Template">
|
|
<Setter.Value>
|
|
<ControlTemplate TargetType="ListViewItem">
|
|
<ListViewItemPresenter
|
|
x:Name="Root"
|
|
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
|
|
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
|
|
CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
|
|
CheckBrush="{ThemeResource ListViewItemCheckBrush}"
|
|
CheckMode="{ThemeResource ListViewItemCheckMode}"
|
|
ContentMargin="{TemplateBinding Padding}"
|
|
ContentTransitions="{TemplateBinding ContentTransitions}"
|
|
Control.IsTemplateFocusTarget="True"
|
|
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
|
|
DragBackground="{ThemeResource ListViewItemDragBackground}"
|
|
DragForeground="{ThemeResource ListViewItemDragForeground}"
|
|
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
|
|
FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
|
|
FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
|
|
FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
|
|
FocusVisualPrimaryBrush="{TemplateBinding FocusVisualPrimaryBrush}"
|
|
FocusVisualPrimaryThickness="{TemplateBinding FocusVisualPrimaryThickness}"
|
|
FocusVisualSecondaryBrush="{TemplateBinding FocusVisualSecondaryBrush}"
|
|
FocusVisualSecondaryThickness="{TemplateBinding FocusVisualSecondaryThickness}"
|
|
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
|
|
PointerOverBackground="{Binding TabTheme, Mode=OneWay, Converter={StaticResource TabColorFallbackConverter}, ConverterParameter=BackgroundPointerOver}"
|
|
PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"
|
|
PressedBackground="{Binding TabTheme, Mode=OneWay, Converter={StaticResource TabColorFallbackConverter}, ConverterParameter=BackgroundPressed}"
|
|
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
|
|
RevealBackground="{ThemeResource ListViewItemRevealBackground}"
|
|
RevealBorderBrush="{ThemeResource ListViewItemRevealBorderBrush}"
|
|
RevealBorderThickness="{ThemeResource ListViewItemRevealBorderThemeThickness}"
|
|
SelectedBackground="{Binding TabTheme, Mode=OneWay, Converter={StaticResource TabColorFallbackConverter}, ConverterParameter=BackgroundSelected}"
|
|
SelectedForeground="{ThemeResource ListViewItemForegroundSelected}"
|
|
SelectedPointerOverBackground="{Binding TabTheme, Mode=OneWay, Converter={StaticResource TabColorFallbackConverter}, ConverterParameter=BackgroundSelectedPointerOver}"
|
|
SelectedPressedBackground="{Binding TabTheme, Mode=OneWay, Converter={StaticResource TabColorFallbackConverter}, ConverterParameter=BackgroundSelectedPressed}"
|
|
SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}">
|
|
<VisualStateManager.VisualStateGroups>
|
|
<VisualStateGroup x:Name="CommonStates">
|
|
<VisualState x:Name="Normal" />
|
|
<VisualState x:Name="Selected" />
|
|
|
|
<VisualState x:Name="PointerOver">
|
|
<VisualState.Setters>
|
|
<Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
|
|
</VisualState.Setters>
|
|
</VisualState>
|
|
|
|
<VisualState x:Name="PointerOverSelected">
|
|
<VisualState.Setters>
|
|
<Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
|
|
</VisualState.Setters>
|
|
</VisualState>
|
|
<VisualState x:Name="PointerOverPressed">
|
|
<VisualState.Setters>
|
|
<Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
|
|
</VisualState.Setters>
|
|
</VisualState>
|
|
|
|
<VisualState x:Name="Pressed">
|
|
<VisualState.Setters>
|
|
<Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
|
|
</VisualState.Setters>
|
|
</VisualState>
|
|
|
|
<VisualState x:Name="PressedSelected">
|
|
<VisualState.Setters>
|
|
<Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
|
|
</VisualState.Setters>
|
|
</VisualState>
|
|
</VisualStateGroup>
|
|
|
|
<VisualStateGroup x:Name="DisabledStates">
|
|
<VisualState x:Name="Enabled" />
|
|
|
|
<VisualState x:Name="Disabled">
|
|
<VisualState.Setters>
|
|
<Setter Target="Root.RevealBorderThickness" Value="0" />
|
|
</VisualState.Setters>
|
|
</VisualState>
|
|
</VisualStateGroup>
|
|
|
|
</VisualStateManager.VisualStateGroups>
|
|
</ListViewItemPresenter>
|
|
</ControlTemplate>
|
|
</Setter.Value>
|
|
</Setter>
|
|
</Style>
|
|
</ListView.ItemContainerStyle>
|
|
<ListView.ItemsPanel>
|
|
<ItemsPanelTemplate>
|
|
<ItemsStackPanel Orientation="Horizontal" />
|
|
</ItemsPanelTemplate>
|
|
</ListView.ItemsPanel>
|
|
</ListView>
|
|
</ScrollViewer>
|
|
<RepeatButton
|
|
x:Name="ScrollRightButton"
|
|
Grid.Column="2"
|
|
Width="24"
|
|
Padding="0,0,0,0"
|
|
Click="OnScrollRightButtonTapped"
|
|
Style="{StaticResource TitleBarRepeatButtonStyle}"
|
|
ToolTipService.ToolTip="Scroll right"
|
|
Visibility="Collapsed">
|
|
<RepeatButton.Content>
|
|
<Viewbox Width="12" Height="12">
|
|
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" />
|
|
</Viewbox>
|
|
</RepeatButton.Content>
|
|
</RepeatButton>
|
|
<Button
|
|
x:Name="Add"
|
|
Grid.Column="3"
|
|
Command="{x:Bind AddCommand}"
|
|
Style="{StaticResource TitleBarButtonStyle}"
|
|
ToolTipService.ToolTip="New tab">
|
|
<Button.Content>
|
|
<Viewbox Width="12" Height="12">
|
|
<SymbolIcon Symbol="Add" />
|
|
</Viewbox>
|
|
</Button.Content>
|
|
</Button>
|
|
</Grid>
|
|
</UserControl> |