mirror of
https://github.com/microsoft/PowerToys.git
synced 2026-04-06 11:16:51 +02:00
[CmdPal] Introduce Small, Medium, and Large sizing options for Details (#43956)
<!-- 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 This PR introduces 3 new sizing options to the Details Panel in the Extensions API. - `Small` (Default) - `Medium` - `Large` <!-- Please review the items on the PR checklist before submitting--> ## PR Checklist - [x] Closes: #43251 <!-- - [ ] Closes: #yyy (add separate lines for additional resolved issues) --> - [ ] **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 Here's how it looks like: ```csharp new ListItem(new NoOpCommand()) { Title = "Details on ListItems (Medium)", Details = new Details() { Title = "This item has medium details size", Body = "Each of these items can have a `Body` formatted with **Markdown**", Size = ContentSize.Medium, }, }, ``` ### Moving Pictures  <!-- Describe how you validated the behavior. Add automated tests wherever possible, but list manual validation steps taken as well --> ## Validation Steps Performed
This commit is contained in:
@@ -0,0 +1,39 @@
|
||||
// Copyright (c) Microsoft Corporation
|
||||
// The Microsoft Corporation licenses this file to you under the MIT license.
|
||||
// See the LICENSE file in the project root for more information.
|
||||
|
||||
using Microsoft.CommandPalette.Extensions;
|
||||
using Microsoft.UI.Xaml;
|
||||
using Microsoft.UI.Xaml.Data;
|
||||
|
||||
namespace Microsoft.CmdPal.UI;
|
||||
|
||||
public partial class DetailsSizeToGridLengthConverter : IValueConverter
|
||||
{
|
||||
public object Convert(object value, Type targetType, object parameter, string language)
|
||||
{
|
||||
if (value is ContentSize size)
|
||||
{
|
||||
// This converter calculates the Star width for the LIST.
|
||||
//
|
||||
// The input 'size' (ContentSize) represents the TARGET WIDTH desired for the DETAILS PANEL.
|
||||
//
|
||||
// To ensure the Details Panel achieves its target size (e.g. ContentSize.Large),
|
||||
// we must shrink the List and let the Details fill the available space.
|
||||
// (e.g., A larger target size for Details results in a smaller Star value for the List).
|
||||
var starValue = size switch
|
||||
{
|
||||
ContentSize.Small => 3.0,
|
||||
ContentSize.Medium => 2.0,
|
||||
ContentSize.Large => 1.0,
|
||||
_ => 3.0,
|
||||
};
|
||||
|
||||
return new GridLength(starValue, GridUnitType.Star);
|
||||
}
|
||||
|
||||
return new GridLength(3.0, GridUnitType.Star);
|
||||
}
|
||||
|
||||
public object ConvertBack(object value, Type targetType, object parameter, string language) => throw new NotImplementedException();
|
||||
}
|
||||
@@ -26,6 +26,7 @@
|
||||
EmptyValue="Collapsed"
|
||||
NotEmptyValue="Visible" />
|
||||
|
||||
<cmdpalUI:DetailsSizeToGridLengthConverter x:Key="SizeToWidthConverter" />
|
||||
<cmdpalUI:MessageStateToSeverityConverter x:Key="MessageStateToSeverityConverter" />
|
||||
|
||||
<cmdpalUI:DetailsDataTemplateSelector
|
||||
@@ -370,7 +371,7 @@
|
||||
<Grid x:Name="ContentGrid" Grid.Row="1">
|
||||
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="3*" />
|
||||
<ColumnDefinition Width="{x:Bind ViewModel.Details.Size, Mode=OneWay, Converter={StaticResource SizeToWidthConverter}}" />
|
||||
<ColumnDefinition x:Name="DetailsColumn" Width="Auto" />
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user