mirror of
https://github.com/microsoft/PowerToys.git
synced 2026-04-03 17:56:44 +02:00
7b7bae2889
Add a new image provider for `MarkdownTextBlock` that allows loading
images from additional sources:
- **file scheme**
- Enables loading images using the `file:` scheme.
- Intentionally restricts file URIs to absolute paths to ensure correct
resolution when passed through the CmdPal extension/host boundary. (In
most cases, 3rd-party extensions will provide the paths, but the CmdPal
host performs the actual loading and would otherwise resolve paths
relative to itself.)
- **data scheme**
- Enables loading images from URIs with the `data:` scheme (both Base64
and URL-encoded forms).
- Note: the Markdown control itself cannot handle large input and may
hang before the code introduced in this PR is invoked.
- **ms-appx scheme**
- This scheme is now supported for loading images.
- However, since the Command Palette host performs the loading,
`ms-appx:` resolution applies to the host and not the extensions, which
limits its usefulness.
- **ms-appdata scheme**
- This scheme is now supported for loading images.
- Similar to `ms-appx:`, resolution applies to the host, not the
extensions, limiting its usefulness.
---
Additionally, this PR introduces the concept of **_image source
hints_**, implemented as query string parameters piggy-backed on the
original URI.
These hints allow users to influence the behavior of images within
Markdown content.
- `--x-cmdpal-fit`
- `none`: no automatic scaling, provides image as is (default)
- `fit`: scale to fit the available space
- `--x-cmdpal-upscale`
- `true`: allow upscaling
- `false`: downscale only (default)
- `--x-cmdpal-width`: desired width in pixels
- `--x-cmdpal-height`: desired height in pixels
- `--x-cmdpal-maxwidth`: max width in pixels
- `--x-cmdpal-maxheight`: max height in pixels
---
Since `MarkdownTextBlock` requires conforming to the `IImageProvider`
interface—which accepts only a raw URI and must return an `Image`
control—this PR also introduces a new class `RtbInlineImageFactory`.
The factory hooks into the root text block upon loading and listens for
events related to **layout** and **DPI changes**, ensuring that images
adapt correctly to the control’s environment.
```csharp
public interface IImageProvider
{
Task<Image> GetImage(string url);
bool ShouldUseThisProvider(string url);
}
```
---
Pictures? Videos!
Loading images from new schemes:
https://github.com/user-attachments/assets/e0f4308d-30b2-4c81-86db-353048c708c1
New image source scaling options:
https://github.com/user-attachments/assets/ec5b007d-3140-4f0a-b163-7b278233ad40
<!-- Enter a brief description/summary of your PR here. What does it
fix/what does it change/how was it tested (even manually, if necessary)?
-->
## Summary of the Pull Request
<!-- Please review the items on the PR checklist before submitting-->
## PR Checklist
- [x] Closes: #41752
- [ ] **Communication:** I've discussed this with core contributors
already. If the work hasn't been agreed, this work might be rejected
- [ ] **Tests:** Added/updated and all pass
- [ ] **Localization:** All end-user-facing strings can be localized
- [ ] **Dev docs:** Added/updated
- [ ] **New binaries:** Added on the required places
- [ ] [JSON for
signing](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ESRPSigning_core.json)
for new binaries
- [ ] [WXS for
installer](https://github.com/microsoft/PowerToys/blob/main/installer/PowerToysSetup/Product.wxs)
for new binaries and localization folder
- [ ] [YML for CI
pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ci/templates/build-powertoys-steps.yml)
for new test projects
- [ ] [YML for signed
pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/release.yml)
- [ ] **Documentation updated:** If checked, please file a pull request
on [our docs
repo](https://github.com/MicrosoftDocs/windows-uwp/tree/docs/hub/powertoys)
and link it here: #xxx
<!-- Provide a more detailed description of the PR, other things fixed,
or any additional comments/features here -->
## Detailed Description of the Pull Request / Additional comments
<!-- Describe how you validated the behavior. Add automated tests
wherever possible, but list manual validation steps taken as well -->
## Validation Steps Performed
---------
Co-authored-by: Michael Jolley <mike@baldbeardedbuilder.com>
524 lines
26 KiB
XML
524 lines
26 KiB
XML
<?xml version="1.0" encoding="utf-8" ?>
|
|
<Page
|
|
x:Class="Microsoft.CmdPal.UI.Pages.ShellPage"
|
|
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:animations="using:CommunityToolkit.WinUI.Animations"
|
|
xmlns:cmdpalUI="using:Microsoft.CmdPal.UI"
|
|
xmlns:converters="using:CommunityToolkit.WinUI.Converters"
|
|
xmlns:coreViewModels="using:Microsoft.CmdPal.Core.ViewModels"
|
|
xmlns:cpcontrols="using:Microsoft.CmdPal.UI.Controls"
|
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
|
xmlns:help="using:Microsoft.CmdPal.UI.Helpers"
|
|
xmlns:labToolkit="using:CommunityToolkit.Labs.WinUI.MarkdownTextBlock"
|
|
xmlns:markdownImageProviders="using:Microsoft.CmdPal.UI.Helpers.MarkdownImageProviders"
|
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
|
xmlns:tkcontrols="using:CommunityToolkit.WinUI.Controls"
|
|
xmlns:toolkit="using:CommunityToolkit.WinUI.Controls"
|
|
xmlns:ui="using:CommunityToolkit.WinUI"
|
|
xmlns:viewModels="using:Microsoft.CmdPal.UI.ViewModels"
|
|
Background="Transparent"
|
|
mc:Ignorable="d">
|
|
|
|
<Page.Resources>
|
|
<ResourceDictionary>
|
|
<converters:StringVisibilityConverter
|
|
x:Key="StringNotEmptyToVisibilityConverter"
|
|
EmptyValue="Collapsed"
|
|
NotEmptyValue="Visible" />
|
|
|
|
<converters:BoolNegationConverter x:Key="BoolNegationConverter" />
|
|
|
|
<cmdpalUI:MessageStateToSeverityConverter x:Key="MessageStateToSeverityConverter" />
|
|
|
|
<cmdpalUI:DetailsDataTemplateSelector
|
|
x:Key="DetailsDataTemplateSelector"
|
|
CommandTemplate="{StaticResource DetailsCommandsTemplate}"
|
|
LinkTemplate="{StaticResource DetailsLinkTemplate}"
|
|
SeparatorTemplate="{StaticResource DetailsSeparatorTemplate}"
|
|
TagTemplate="{StaticResource DetailsTagsTemplate}" />
|
|
|
|
<converters:BoolToVisibilityConverter
|
|
x:Key="BoolToInvertedVisibilityConverter"
|
|
FalseValue="Visible"
|
|
TrueValue="Collapsed" />
|
|
|
|
<DataTemplate x:Key="TagTemplate" x:DataType="coreViewModels:TagViewModel">
|
|
<cpcontrols:Tag
|
|
HorizontalAlignment="Left"
|
|
AutomationProperties.Name="{x:Bind Text, Mode=OneWay}"
|
|
BackgroundColor="{x:Bind Background, Mode=OneWay}"
|
|
FontSize="12"
|
|
ForegroundColor="{x:Bind Foreground, Mode=OneWay}"
|
|
Icon="{x:Bind Icon, Mode=OneWay}"
|
|
Text="{x:Bind Text, Mode=OneWay}"
|
|
ToolTipService.ToolTip="{x:Bind ToolTip, Mode=OneWay}" />
|
|
</DataTemplate>
|
|
|
|
<DataTemplate x:Key="CommandTemplate" x:DataType="coreViewModels:CommandViewModel">
|
|
<StackPanel Orientation="Vertical">
|
|
<Button
|
|
Name="Command"
|
|
HorizontalAlignment="Stretch"
|
|
HorizontalContentAlignment="Left"
|
|
Click="Command_Click"
|
|
Style="{StaticResource SubtleButtonStyle}">
|
|
<StackPanel VerticalAlignment="Center" Orientation="Horizontal">
|
|
<cpcontrols:IconBox
|
|
Width="16"
|
|
Height="16"
|
|
Margin="0,3,8,0"
|
|
SourceKey="{x:Bind Icon, Mode=OneWay}"
|
|
SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested}" />
|
|
<TextBlock Text="{x:Bind Name}" />
|
|
</StackPanel>
|
|
</Button>
|
|
</StackPanel>
|
|
</DataTemplate>
|
|
|
|
<DataTemplate x:Key="DetailsLinkTemplate" x:DataType="coreViewModels:DetailsLinkViewModel">
|
|
<StackPanel Orientation="Vertical">
|
|
<TextBlock
|
|
IsTextSelectionEnabled="True"
|
|
Text="{x:Bind Key, Mode=OneWay}"
|
|
TextWrapping="WrapWholeWords" />
|
|
<TextBlock
|
|
FontSize="12"
|
|
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
|
|
IsTextSelectionEnabled="True"
|
|
Text="{x:Bind Text, Mode=OneWay}"
|
|
TextWrapping="WrapWholeWords"
|
|
Visibility="{x:Bind IsText, Mode=OneWay}" />
|
|
<HyperlinkButton
|
|
Padding="0"
|
|
Content="{x:Bind Text, Mode=OneWay}"
|
|
FontSize="12"
|
|
NavigateUri="{x:Bind Link, Mode=OneWay}"
|
|
Visibility="{x:Bind IsLink, Mode=OneWay}" />
|
|
</StackPanel>
|
|
</DataTemplate>
|
|
<DataTemplate x:Key="DetailsCommandsTemplate" x:DataType="coreViewModels:DetailsCommandsViewModel">
|
|
<StackPanel Orientation="Vertical" Spacing="4">
|
|
<TextBlock
|
|
IsTextSelectionEnabled="True"
|
|
Text="{x:Bind Key, Mode=OneWay}"
|
|
TextWrapping="WrapWholeWords" />
|
|
<ItemsControl
|
|
ItemTemplate="{StaticResource CommandTemplate}"
|
|
ItemsSource="{x:Bind Commands, Mode=OneWay}"
|
|
Visibility="{x:Bind HasCommands, Mode=OneWay}" />
|
|
</StackPanel>
|
|
</DataTemplate>
|
|
<DataTemplate x:Key="DetailsSeparatorTemplate" x:DataType="coreViewModels:DetailsSeparatorViewModel">
|
|
<StackPanel Margin="0,8,8,0" Orientation="Vertical">
|
|
<Border
|
|
Margin="8,0,0,0"
|
|
BorderBrush="{ThemeResource TextFillColorSecondaryBrush}"
|
|
BorderThickness="0,0,0,2">
|
|
<TextBlock
|
|
Margin="-8,0,0,8"
|
|
FontWeight="SemiBold"
|
|
IsTextSelectionEnabled="True"
|
|
Text="{x:Bind Key, Mode=OneWay}"
|
|
TextWrapping="WrapWholeWords" />
|
|
</Border>
|
|
</StackPanel>
|
|
</DataTemplate>
|
|
<DataTemplate x:Key="DetailsTagsTemplate" x:DataType="coreViewModels:DetailsTagsViewModel">
|
|
<StackPanel Orientation="Vertical" Spacing="4">
|
|
<TextBlock
|
|
IsTextSelectionEnabled="True"
|
|
Text="{x:Bind Key, Mode=OneWay}"
|
|
TextWrapping="WrapWholeWords" />
|
|
<ItemsControl
|
|
ItemTemplate="{StaticResource TagTemplate}"
|
|
ItemsSource="{x:Bind Tags, Mode=OneWay}"
|
|
Visibility="{x:Bind HasTags, Mode=OneWay}">
|
|
<ItemsControl.ItemsPanel>
|
|
<ItemsPanelTemplate>
|
|
<toolkit:WrapPanel
|
|
x:Name="TagsWrapPanel"
|
|
MinWidth="0"
|
|
Padding="0"
|
|
HorizontalSpacing="4"
|
|
Orientation="Horizontal"
|
|
VerticalSpacing="4" />
|
|
</ItemsPanelTemplate>
|
|
</ItemsControl.ItemsPanel>
|
|
</ItemsControl>
|
|
</StackPanel>
|
|
</DataTemplate>
|
|
<tkcontrols:MarkdownThemes
|
|
x:Key="DefaultMarkdownThemeConfig"
|
|
H3FontSize="12"
|
|
H3FontWeight="Normal" />
|
|
<markdownImageProviders:ImageProvider x:Key="ImageProvider" />
|
|
<tkcontrols:MarkdownConfig
|
|
x:Key="DefaultMarkdownConfig"
|
|
ImageProvider="{StaticResource ImageProvider}"
|
|
Themes="{StaticResource DefaultMarkdownThemeConfig}" />
|
|
</ResourceDictionary>
|
|
</Page.Resources>
|
|
|
|
<Grid>
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="*" />
|
|
<RowDefinition Height="Auto" />
|
|
</Grid.RowDefinitions>
|
|
|
|
<Grid Background="{ThemeResource LayerOnAcrylicPrimaryBackgroundBrush}">
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="Auto" />
|
|
<RowDefinition Height="*" />
|
|
<RowDefinition Height="Auto" />
|
|
</Grid.RowDefinitions>
|
|
|
|
<!-- Back button and search box -->
|
|
<Grid
|
|
Padding="0,12,0,12"
|
|
HorizontalAlignment="Stretch"
|
|
VerticalAlignment="Stretch">
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="Auto" />
|
|
<ColumnDefinition Width="*" />
|
|
<ColumnDefinition Width="Auto" />
|
|
</Grid.ColumnDefinitions>
|
|
|
|
<!-- Back button -->
|
|
<StackPanel Orientation="Horizontal">
|
|
<Image
|
|
Width="20"
|
|
Margin="20,0,6,0"
|
|
HorizontalAlignment="Center"
|
|
ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
|
|
AutomationProperties.AccessibilityView="Raw"
|
|
Source="ms-appx:///Assets/icon.svg"
|
|
Visibility="{x:Bind ViewModel.CurrentPage.IsNested, Mode=OneWay, Converter={StaticResource BoolToInvertedVisibilityConverter}}">
|
|
<animations:Implicit.ShowAnimations>
|
|
<animations:OpacityAnimation
|
|
EasingMode="EaseIn"
|
|
EasingType="Cubic"
|
|
From="0"
|
|
To="1.0"
|
|
Duration="0:0:0.187" />
|
|
<animations:ScaleAnimation
|
|
EasingMode="EaseIn"
|
|
EasingType="Cubic"
|
|
From="0.5"
|
|
To="1"
|
|
Duration="0:0:0.187" />
|
|
</animations:Implicit.ShowAnimations>
|
|
<animations:Implicit.HideAnimations>
|
|
<animations:OpacityAnimation
|
|
EasingMode="EaseOut"
|
|
EasingType="Cubic"
|
|
From="1.0"
|
|
To="0"
|
|
Duration="0:0:0.187" />
|
|
<animations:ScaleAnimation
|
|
EasingMode="EaseOut"
|
|
EasingType="Cubic"
|
|
From="1"
|
|
To="0.5"
|
|
Duration="0:0:0.187" />
|
|
</animations:Implicit.HideAnimations>
|
|
</Image>
|
|
<Button
|
|
x:Name="BackButton"
|
|
x:Uid="BackButton"
|
|
Margin="4,0,4,0"
|
|
Padding="4"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center"
|
|
ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
|
|
Click="BackButton_Clicked"
|
|
Content="{ui:FontIcon Glyph=,
|
|
FontSize=14}"
|
|
FontSize="16"
|
|
Style="{StaticResource SubtleButtonStyle}"
|
|
Visibility="{x:Bind ViewModel.CurrentPage.IsNested, Mode=OneWay}">
|
|
<animations:Implicit.ShowAnimations>
|
|
<animations:OpacityAnimation
|
|
EasingMode="EaseIn"
|
|
EasingType="Cubic"
|
|
From="0"
|
|
To="1.0"
|
|
Duration="0:0:0.333" />
|
|
<animations:ScaleAnimation
|
|
From="0.5"
|
|
To="1"
|
|
Duration="0:0:0.333" />
|
|
<animations:TranslationAnimation
|
|
From="16,0,0"
|
|
To="0,0,0"
|
|
Duration="0:0:0.333" />
|
|
</animations:Implicit.ShowAnimations>
|
|
<animations:Implicit.HideAnimations>
|
|
<animations:OpacityAnimation
|
|
EasingMode="EaseOut"
|
|
EasingType="Cubic"
|
|
From="1.0"
|
|
To="0"
|
|
Duration="0:0:0.333" />
|
|
<animations:ScaleAnimation
|
|
EasingMode="EaseOut"
|
|
EasingType="Cubic"
|
|
From="1"
|
|
To="0.5"
|
|
Duration="0:0:0.333" />
|
|
<animations:TranslationAnimation
|
|
EasingMode="EaseOut"
|
|
EasingType="Cubic"
|
|
From="0,0,0"
|
|
To="16,0,0"
|
|
Duration="0:0:0.187" />
|
|
</animations:Implicit.HideAnimations>
|
|
</Button>
|
|
<cpcontrols:IconBox
|
|
Grid.Column="1"
|
|
Width="20"
|
|
Margin="4,0,4,0"
|
|
VerticalAlignment="Center"
|
|
ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
|
|
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
|
|
SourceKey="{x:Bind ViewModel.CurrentPage.Icon, Mode=OneWay}"
|
|
SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested}"
|
|
Visibility="{x:Bind ViewModel.CurrentPage.IsNested, Mode=OneWay}">
|
|
<animations:Implicit.ShowAnimations>
|
|
<animations:OpacityAnimation
|
|
From="0"
|
|
To="1.0"
|
|
Duration="0:0:0.333" />
|
|
<animations:ScaleAnimation
|
|
From="0.8"
|
|
To="1"
|
|
Duration="0:0:0.333" />
|
|
<animations:TranslationAnimation
|
|
From="8,0,0"
|
|
To="0,0,0"
|
|
Duration="0:0:0.187" />
|
|
</animations:Implicit.ShowAnimations>
|
|
<animations:Implicit.HideAnimations>
|
|
<animations:OpacityAnimation
|
|
From="1.0"
|
|
To="0"
|
|
Duration="0:0:0.333" />
|
|
<animations:ScaleAnimation
|
|
From="1"
|
|
To="0.8"
|
|
Duration="0:0:0.333" />
|
|
<animations:TranslationAnimation
|
|
From="0,0,0"
|
|
To="8,0,0"
|
|
Duration="0:0:0.187" />
|
|
</animations:Implicit.HideAnimations>
|
|
</cpcontrols:IconBox>
|
|
</StackPanel>
|
|
<!-- Search box: wrapped in a grid to enable RepositionThemeTransitions -->
|
|
<Grid Grid.Column="1" HorizontalAlignment="Stretch">
|
|
<cpcontrols:SearchBar
|
|
x:Name="SearchBox"
|
|
HorizontalAlignment="Stretch"
|
|
CurrentPageViewModel="{x:Bind ViewModel.CurrentPage, Mode=OneWay}" />
|
|
<Grid.Transitions>
|
|
<TransitionCollection>
|
|
<RepositionThemeTransition />
|
|
</TransitionCollection>
|
|
</Grid.Transitions>
|
|
</Grid>
|
|
<!-- Filter: wrapped in a grid to enable RepositionThemeTransitions -->
|
|
<Grid Grid.Column="2" HorizontalAlignment="Right">
|
|
<cpcontrols:FiltersDropDown
|
|
x:Name="FiltersDropDown"
|
|
HorizontalAlignment="Right"
|
|
CurrentPageViewModel="{x:Bind ViewModel.CurrentPage, Mode=OneWay}" />
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<ProgressBar
|
|
Grid.ColumnSpan="2"
|
|
VerticalAlignment="Bottom"
|
|
IsIndeterminate="True"
|
|
Visibility="{x:Bind ViewModel.CurrentPage.IsLoading, Mode=OneWay}">
|
|
<animations:Implicit.ShowAnimations>
|
|
<animations:OpacityAnimation
|
|
From="0"
|
|
To="1.0"
|
|
Duration="0:0:0.333" />
|
|
</animations:Implicit.ShowAnimations>
|
|
<animations:Implicit.HideAnimations>
|
|
<animations:OpacityAnimation
|
|
From="1.0"
|
|
To="0"
|
|
Duration="0:0:0.333" />
|
|
</animations:Implicit.HideAnimations>
|
|
</ProgressBar>
|
|
|
|
<Grid
|
|
x:Name="ContentGrid"
|
|
Grid.Row="1"
|
|
BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
|
|
BorderThickness="0,1,0,1">
|
|
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="3*" />
|
|
<ColumnDefinition x:Name="DetailsColumn" Width="Auto" />
|
|
</Grid.ColumnDefinitions>
|
|
|
|
<Frame
|
|
Name="RootFrame"
|
|
IsNavigationStackEnabled="True"
|
|
Navigated="RootFrame_Navigated" />
|
|
|
|
<ScrollViewer
|
|
x:Name="DetailsContent"
|
|
Grid.Column="1"
|
|
Margin="4"
|
|
HorizontalAlignment="Stretch"
|
|
ui:VisualExtensions.NormalizedCenterPoint="0.5,0.5"
|
|
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
|
|
BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
|
|
BorderThickness="1"
|
|
CornerRadius="{StaticResource ControlCornerRadius}"
|
|
Visibility="Collapsed">
|
|
<animations:Implicit.ShowAnimations>
|
|
<animations:OpacityAnimation
|
|
From="0"
|
|
To="1.0"
|
|
Duration="0:0:0.187" />
|
|
<animations:TranslationAnimation
|
|
From="24,0,0"
|
|
To="0,0,0"
|
|
Duration="0:0:0.187" />
|
|
</animations:Implicit.ShowAnimations>
|
|
<animations:Implicit.HideAnimations>
|
|
<animations:OpacityAnimation
|
|
From="1.0"
|
|
To="0"
|
|
Duration="0:0:0.187" />
|
|
<animations:TranslationAnimation
|
|
From="0,0,0"
|
|
To="24,0,0"
|
|
Duration="0:0:0.187" />
|
|
</animations:Implicit.HideAnimations>
|
|
<Grid Margin="16">
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="Auto" />
|
|
<RowDefinition Height="Auto" />
|
|
<RowDefinition Height="Auto" />
|
|
<RowDefinition Height="*" />
|
|
</Grid.RowDefinitions>
|
|
|
|
<cpcontrols:IconBox
|
|
x:Name="HeroImageBorder"
|
|
Width="64"
|
|
Margin="0,0,16,16"
|
|
HorizontalAlignment="Left"
|
|
AutomationProperties.AccessibilityView="Raw"
|
|
SourceKey="{x:Bind ViewModel.Details.HeroImage, Mode=OneWay}"
|
|
SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested}"
|
|
Visibility="{x:Bind HasHeroImage, Mode=OneWay}" />
|
|
|
|
<TextBlock
|
|
Grid.Row="1"
|
|
FontSize="18"
|
|
FontWeight="SemiBold"
|
|
Text="{x:Bind ViewModel.Details.Title, Mode=OneWay}"
|
|
TextWrapping="WrapWholeWords"
|
|
Visibility="{x:Bind ViewModel.Details.Title, Converter={StaticResource StringNotEmptyToVisibilityConverter}, Mode=OneWay}" />
|
|
|
|
<tkcontrols:MarkdownTextBlock
|
|
Grid.Row="2"
|
|
Margin="0,4,0,24"
|
|
Background="Transparent"
|
|
Config="{StaticResource DefaultMarkdownConfig}"
|
|
Text="{x:Bind ViewModel.Details.Body, Mode=OneWay}"
|
|
UseEmphasisExtras="True"
|
|
UsePipeTables="True" />
|
|
|
|
<ItemsRepeater
|
|
Grid.Row="3"
|
|
ItemTemplate="{StaticResource DetailsDataTemplateSelector}"
|
|
ItemsSource="{x:Bind ViewModel.Details.Metadata, Mode=OneWay}">
|
|
<ItemsRepeater.Layout>
|
|
<StackLayout Spacing="12" />
|
|
</ItemsRepeater.Layout>
|
|
</ItemsRepeater>
|
|
</Grid>
|
|
</ScrollViewer>
|
|
<!-- /DetailsContent -->
|
|
</Grid>
|
|
<ScrollView
|
|
Grid.Row="2"
|
|
Grid.ColumnSpan="2"
|
|
MaxHeight="120"
|
|
Background="{ThemeResource SystemControlErrorBackgroundColor}"
|
|
BorderBrush="{ThemeResource SystemControlErrorTextForegroundBrush}"
|
|
BorderThickness="0,1,0,1"
|
|
CornerRadius="0"
|
|
Visibility="{x:Bind ViewModel.CurrentPage.ErrorMessage, Converter={StaticResource StringNotEmptyToVisibilityConverter}, Mode=OneWay}">
|
|
<TextBlock Margin="16,8,16,16" IsTextSelectionEnabled="True">
|
|
<Run
|
|
FontWeight="SemiBold"
|
|
Foreground="{ThemeResource SystemErrorTextColor}"
|
|
Text="Error(s) on page:" />
|
|
<LineBreak /><Run Text="{x:Bind ViewModel.CurrentPage.ErrorMessage, Mode=OneWay}" />
|
|
</TextBlock>
|
|
</ScrollView>
|
|
</Grid>
|
|
|
|
<!--
|
|
Horrifying: You may ask yourself - why is there a Background on this InfoBar?
|
|
|
|
Well, as it turns out, the Informational InfoBar has a transparent
|
|
background. It just cannot be bothered. So, we need to manually give
|
|
it one to actually obscure the text beneath it. And you can't just give
|
|
the InfoBar itself a Background, because then the other Severity's
|
|
won't get colorized.
|
|
|
|
See https://github.com/microsoft/microsoft-ui-xaml/issues/5741
|
|
-->
|
|
<StackPanel
|
|
Grid.Row="0"
|
|
Margin="16,8,16,8"
|
|
HorizontalAlignment="Stretch"
|
|
VerticalAlignment="Bottom"
|
|
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
|
|
CornerRadius="{ThemeResource ControlCornerRadius}">
|
|
<InfoBar
|
|
CornerRadius="{ThemeResource ControlCornerRadius}"
|
|
IsOpen="{x:Bind ViewModel.CurrentPage.HasStatusMessage, Mode=OneWay}"
|
|
Message="{x:Bind ViewModel.CurrentPage.MostRecentStatusMessage.Message, Mode=OneWay}"
|
|
Severity="{x:Bind ViewModel.CurrentPage.MostRecentStatusMessage.State, Mode=OneWay, Converter={StaticResource MessageStateToSeverityConverter}}">
|
|
|
|
<InfoBar.Content>
|
|
<ProgressBar
|
|
Margin="0,-20,0,0"
|
|
IsIndeterminate="{x:Bind ViewModel.CurrentPage.MostRecentStatusMessage.Progress.IsIndeterminate, Mode=OneWay}"
|
|
Visibility="{x:Bind ViewModel.CurrentPage.MostRecentStatusMessage.HasProgress, Mode=OneWay}"
|
|
Value="{x:Bind ViewModel.CurrentPage.MostRecentStatusMessage.Progress.ProgressPercent, Mode=OneWay}" />
|
|
<!-- Margin="0,0,0,6" MaxWidth="200"/> -->
|
|
</InfoBar.Content>
|
|
</InfoBar>
|
|
</StackPanel>
|
|
|
|
<Grid Grid.Row="1" Background="{ThemeResource LayerOnAcrylicSecondaryBackgroundBrush}">
|
|
<cpcontrols:CommandBar CurrentPageViewModel="{x:Bind ViewModel.CurrentPage, Mode=OneWay}" />
|
|
</Grid>
|
|
|
|
<VisualStateManager.VisualStateGroups>
|
|
<VisualStateGroup>
|
|
<VisualState x:Name="DetailsCollapsed" />
|
|
<VisualState x:Name="DetailsVisible">
|
|
<VisualState.StateTriggers>
|
|
<StateTrigger IsActive="{x:Bind ViewModel.IsDetailsVisible, Mode=OneWay}" />
|
|
</VisualState.StateTriggers>
|
|
<VisualState.Setters>
|
|
<Setter Target="DetailsContent.Visibility" Value="Visible" />
|
|
<Setter Target="DetailsColumn.Width" Value="2*" />
|
|
</VisualState.Setters>
|
|
</VisualState>
|
|
</VisualStateGroup>
|
|
</VisualStateManager.VisualStateGroups>
|
|
</Grid>
|
|
</Page> |