Only include a margin if there is text to separate from the icon. (#41851)

<!-- 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
Implemented conditional margin for tags with icons that do not included
text.

<!-- Please review the items on the PR checklist before submitting-->
## PR Checklist

- [ X ] Closes: #41828
- [ ] **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
Created a new IValueConverter for icon margin to conditionally remove
margin when Text is empty.

<!-- Describe how you validated the behavior. Add automated tests
wherever possible, but list manual validation steps taken as well -->
## Validation Steps Performed
Below is a screenshot of the previous behavior.
<img width="1331" height="824" alt="image"
src="https://github.com/user-attachments/assets/9c9f4816-e9b9-429a-af26-65a614c350eb"
/>

Below is a screenshot of the new behavior.
<img width="1314" height="791" alt="image"
src="https://github.com/user-attachments/assets/c02f84ab-23f3-4a18-a5c8-d987e6d26ac7"
/>
This commit is contained in:
Sam Rueby
2025-09-22 10:20:39 -04:00
committed by GitHub
parent 2ce76b861f
commit bb706fb5f1
2 changed files with 23 additions and 1 deletions

View File

@@ -0,0 +1,20 @@
// 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.UI.Xaml;
using Microsoft.UI.Xaml.Data;
namespace Microsoft.CmdPal.UI.Controls;
public sealed class IconMarginConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
// Only include a margin if there is text to separate from the icon.
var text = value as string;
return string.IsNullOrEmpty(text) ? new Thickness(0) : new Thickness(0, 0, 4, 0);
}
public object ConvertBack(object value, Type targetType, object parameter, string language) => throw new NotImplementedException();
}

View File

@@ -27,6 +27,8 @@
<Thickness x:Key="TagPadding">4,2,4,2</Thickness>
<Thickness x:Key="TagBorderThickness">1</Thickness>
<local:IconMarginConverter x:Key="IconMarginConverter" />
<Style BasedOn="{StaticResource DefaultTagStyle}" TargetType="local:Tag" />
<Style x:Key="DefaultTagStyle" TargetType="local:Tag">
@@ -71,7 +73,7 @@
x:Name="PART_Icon"
Grid.Column="0"
Height="12"
Margin="0,0,4,0"
Margin="{Binding Text, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource IconMarginConverter}}"
SourceKey="{TemplateBinding Icon}" />
<TextBlock
Grid.Column="1"