Add the profile, page icons to the page headers (#10046)
## Summary of the Pull Request Adds the profile icons to the page header. I had to manually create the header, and manually bind it to the `Icon` and `Content` of each `NavViewItem`. It's important that each `NavViewItem`'s icon is set as an `IconSource`, so that we can bind to it. If it's just a plain old `FontIcon`, then we can't re-use it. Additionally, I removed the manual sizing of all font icons to font size 12. That would make font icons _tiny_ in the header. Now, they'll properly re-use the size of the `NavigationViewTitleHeaderContentControlTextStyle` in the nav view header. This involved also manually making the icons smaller on the `AddProfile` page and in the `CommandPalette`. As per usual, images are in Teams ## PR Checklist * [x] Closes #9694 * [x] I work here * [ ] Tests added/passed * [n/a] Requires documentation to be updated ## Validation Steps Performed * Checked (bitmap|font) icons in tabs * (bitmap|font) icons in the flyout * (bitmap|font) icons in command palette * (bitmap|font) icons in the nav view * (bitmap|font) icons in the header * (bitmap|font) icons in the add profile page
This commit is contained in:
Mike Griese
GitHub
parent
bfc4838042
commit
a3a2a4102d
|
|
@ -48,8 +48,15 @@
|
|||
x:DataType="local:FilteredCommand">
|
||||
<Grid HorizontalAlignment="Stretch"
|
||||
ColumnSpacing="8">
|
||||
|
||||
<!--
|
||||
Manually set the icon to 24x16. Why 24?
|
||||
If it's a BitmapIcon, then the icon will just get clamped to 16x16.
|
||||
However, if it's a FontIcon, then the icon might actually be double wide.
|
||||
Giving it a width of 24 will allow a 12pt font icon enough space, in a row height of 16 wide.
|
||||
-->
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="16" />
|
||||
<ColumnDefinition Width="24" />
|
||||
<!-- icon -->
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<!-- command label -->
|
||||
|
|
@ -60,7 +67,7 @@
|
|||
</Grid.ColumnDefinitions>
|
||||
|
||||
<IconSourceElement Grid.Column="0"
|
||||
Width="16"
|
||||
Width="24"
|
||||
Height="16"
|
||||
IconSource="{x:Bind Item.Icon, Mode=OneWay, Converter={StaticResource IconSourceConverter}}" />
|
||||
|
||||
|
|
@ -99,7 +106,7 @@
|
|||
<Grid HorizontalAlignment="Stretch"
|
||||
ColumnSpacing="8">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="16" />
|
||||
<ColumnDefinition Width="24" />
|
||||
<!-- icon -->
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<!-- command label -->
|
||||
|
|
@ -110,7 +117,7 @@
|
|||
</Grid.ColumnDefinitions>
|
||||
|
||||
<IconSourceElement Grid.Column="0"
|
||||
Width="16"
|
||||
Width="24"
|
||||
Height="16"
|
||||
IconSource="{x:Bind Item.Icon, Mode=OneWay, Converter={StaticResource IconSourceConverter}}" />
|
||||
|
||||
|
|
@ -162,7 +169,7 @@
|
|||
AutomationProperties.Name="{x:Bind Item.Name, Mode=OneWay}"
|
||||
ColumnSpacing="8">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="16" />
|
||||
<ColumnDefinition Width="24" />
|
||||
<!-- icon / progress -->
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<!-- command label -->
|
||||
|
|
@ -185,7 +192,7 @@
|
|||
Value="{x:Bind Item.(local:TabPaletteItem.TabStatus).ProgressValue, Mode=OneWay}" />
|
||||
|
||||
<IconSourceElement Grid.Column="0"
|
||||
Width="16"
|
||||
Width="24"
|
||||
Height="16"
|
||||
IconSource="{x:Bind Item.Icon, Mode=OneWay, Converter={StaticResource IconSourceConverter}}" />
|
||||
|
||||
|
|
|
|||
|
|
@ -45,16 +45,21 @@
|
|||
<DataTemplate x:DataType="model:Profile">
|
||||
<Grid HorizontalAlignment="Stretch"
|
||||
ColumnSpacing="8">
|
||||
|
||||
<Grid.ColumnDefinitions>
|
||||
<!-- icon -->
|
||||
<ColumnDefinition Width="16" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<!-- profile name -->
|
||||
<ColumnDefinition Width="Auto" />
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<!--
|
||||
Manually set the icon to 24x16. Why 24?
|
||||
If it's a BitmapIcon, then the icon will just get clamped to 16x16.
|
||||
However, if it's a FontIcon, then the icon might actually be double wide.
|
||||
Giving it a width of 24 will allow a 12pt font icon enough space, in a row height of 16 wide.
|
||||
-->
|
||||
<IconSourceElement Grid.Column="0"
|
||||
Width="16"
|
||||
Width="24"
|
||||
Height="16"
|
||||
IconSource="{x:Bind Icon, Mode=OneWay, Converter={StaticResource IconSourceConverter}}" />
|
||||
|
||||
|
|
|
|||
|
|
@ -377,9 +377,13 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
|
|||
addProfileItem.Content(box_value(RS_(L"Nav_AddNewProfile/Content")));
|
||||
addProfileItem.Tag(box_value(addProfileTag));
|
||||
|
||||
FontIcon icon;
|
||||
// Wrap this icon up in a IconSourceElement, so we can bind to it in the
|
||||
// Header above the Pivot.
|
||||
WUX::Controls::IconSourceElement icon;
|
||||
FontIconSource fontIcon;
|
||||
// This is the "Add" symbol
|
||||
icon.Glyph(L"\xE710");
|
||||
fontIcon.Glyph(L"\xE710");
|
||||
icon.IconSource(fontIcon);
|
||||
addProfileItem.Icon(icon);
|
||||
|
||||
SettingsNav().MenuItems().Append(addProfileItem);
|
||||
|
|
|
|||
|
|
@ -35,54 +35,91 @@
|
|||
</Page.Resources>
|
||||
|
||||
<muxc:NavigationView x:Name="SettingsNav"
|
||||
Header="{Binding ElementName=SettingsNav, Path=SelectedItem.Content, Mode=OneWay}"
|
||||
IsBackButtonVisible="Collapsed"
|
||||
IsSettingsVisible="False"
|
||||
ItemInvoked="SettingsNav_ItemInvoked"
|
||||
Loaded="SettingsNav_Loaded"
|
||||
TabFocusNavigation="Cycle">
|
||||
|
||||
<muxc:NavigationView.Header>
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<!--
|
||||
This height is taken from NavigationViewTitleHeaderContentControlTextStyle's
|
||||
FontSize. Our icons may or may not be font icons, so we want to make sure to clamp them to this size.
|
||||
-->
|
||||
<IconSourceElement Height="28"
|
||||
Margin="{ThemeResource NavigationViewHeaderMargin}"
|
||||
IconSource="{Binding ElementName=SettingsNav, Path=SelectedItem.Icon.IconSource, Mode=OneWay}" />
|
||||
<TextBlock Margin="{ThemeResource NavigationViewHeaderMargin}"
|
||||
Text="{Binding ElementName=SettingsNav, Path=SelectedItem.Content, Mode=OneWay}" />
|
||||
</StackPanel>
|
||||
</muxc:NavigationView.Header>
|
||||
|
||||
<muxc:NavigationView.MenuItems>
|
||||
|
||||
<muxc:NavigationViewItem x:Uid="Nav_Launch"
|
||||
Tag="Launch_Nav">
|
||||
<muxc:NavigationViewItem.Icon>
|
||||
<FontIcon Glyph="" />
|
||||
<IconSourceElement>
|
||||
<IconSourceElement.IconSource>
|
||||
<FontIconSource Glyph="" />
|
||||
</IconSourceElement.IconSource>
|
||||
</IconSourceElement>
|
||||
</muxc:NavigationViewItem.Icon>
|
||||
</muxc:NavigationViewItem>
|
||||
|
||||
<muxc:NavigationViewItem x:Uid="Nav_Interaction"
|
||||
Tag="Interaction_Nav">
|
||||
<muxc:NavigationViewItem.Icon>
|
||||
<FontIcon Glyph="" />
|
||||
<IconSourceElement>
|
||||
<IconSourceElement.IconSource>
|
||||
<FontIconSource Glyph="" />
|
||||
</IconSourceElement.IconSource>
|
||||
</IconSourceElement>
|
||||
</muxc:NavigationViewItem.Icon>
|
||||
</muxc:NavigationViewItem>
|
||||
|
||||
<muxc:NavigationViewItem x:Uid="Nav_Appearance"
|
||||
Tag="GlobalAppearance_Nav">
|
||||
<muxc:NavigationViewItem.Icon>
|
||||
<FontIcon Glyph="" />
|
||||
<IconSourceElement>
|
||||
<IconSourceElement.IconSource>
|
||||
<FontIconSource Glyph="" />
|
||||
</IconSourceElement.IconSource>
|
||||
</IconSourceElement>
|
||||
</muxc:NavigationViewItem.Icon>
|
||||
</muxc:NavigationViewItem>
|
||||
|
||||
<muxc:NavigationViewItem x:Uid="Nav_ColorSchemes"
|
||||
Tag="ColorSchemes_Nav">
|
||||
<muxc:NavigationViewItem.Icon>
|
||||
<FontIcon Glyph="" />
|
||||
<IconSourceElement>
|
||||
<IconSourceElement.IconSource>
|
||||
<FontIconSource Glyph="" />
|
||||
</IconSourceElement.IconSource>
|
||||
</IconSourceElement>
|
||||
</muxc:NavigationViewItem.Icon>
|
||||
</muxc:NavigationViewItem>
|
||||
|
||||
<muxc:NavigationViewItem x:Uid="Nav_Rendering"
|
||||
Tag="Rendering_Nav">
|
||||
<muxc:NavigationViewItem.Icon>
|
||||
<FontIcon Glyph="" />
|
||||
<IconSourceElement>
|
||||
<IconSourceElement.IconSource>
|
||||
<FontIconSource Glyph="" />
|
||||
</IconSourceElement.IconSource>
|
||||
</IconSourceElement>
|
||||
</muxc:NavigationViewItem.Icon>
|
||||
</muxc:NavigationViewItem>
|
||||
|
||||
<muxc:NavigationViewItem x:Uid="Nav_Actions"
|
||||
Tag="Actions_Nav">
|
||||
<muxc:NavigationViewItem.Icon>
|
||||
<FontIcon Glyph="" />
|
||||
<IconSourceElement>
|
||||
<IconSourceElement.IconSource>
|
||||
<FontIconSource Glyph="" />
|
||||
</IconSourceElement.IconSource>
|
||||
</IconSourceElement>
|
||||
</muxc:NavigationViewItem.Icon>
|
||||
</muxc:NavigationViewItem>
|
||||
|
||||
|
|
@ -97,7 +134,11 @@
|
|||
KeyDown="OpenJsonKeyDown"
|
||||
Tapped="OpenJsonTapped">
|
||||
<muxc:NavigationViewItem.Icon>
|
||||
<FontIcon Glyph="" />
|
||||
<IconSourceElement>
|
||||
<IconSourceElement.IconSource>
|
||||
<FontIconSource Glyph="" />
|
||||
</IconSourceElement.IconSource>
|
||||
</IconSourceElement>
|
||||
</muxc:NavigationViewItem.Icon>
|
||||
</muxc:NavigationViewItem>
|
||||
</muxc:NavigationView.PaneFooter>
|
||||
|
|
|
|||
|
|
@ -131,7 +131,6 @@ namespace winrt::Microsoft::Terminal::Settings::Model::implementation
|
|||
// Note: you _do_ need to manually set the font here.
|
||||
icon.FontFamily(winrt::Windows::UI::Xaml::Media::FontFamily{ L"Segoe UI" });
|
||||
}
|
||||
icon.FontSize(12);
|
||||
icon.Glyph(iconPath);
|
||||
iconSource = icon;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue