Skip to content

Add RadioMenuFlyoutSubItemStyle #4865

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Apr 30, 2021
Merged

Add RadioMenuFlyoutSubItemStyle #4865

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
1948589
Partly working, that's always nice.
teaP Mar 31, 2021
b3eff27
whoa it works now
teaP Apr 1, 2021
924a6cb
Rename attached property, cleanup, fix the UI to match other items.
teaP Apr 20, 2021
ba8c4d1
Make sure icons also still work.
teaP Apr 20, 2021
08b65f5
Some cleanup.
teaP Apr 20, 2021
256d523
Added test, PR comments.
teaP Apr 26, 2021
32a4960
Disabled failing tests, fixed leaking menu items
teaP Apr 29, 2021
3beb3e5
Update tag in idl
teaP Apr 29, 2021
2b97a69
Update RadioMenuFlyoutItem.idl
ranjeshj Apr 30, 2021
99a41af
Merge branch 'main' into user/teaP/RadioMenuFlyoutSubItem
ranjeshj Apr 30, 2021
1ee2ef1
Merge branch 'main' into user/teaP/RadioMenuFlyoutSubItem
ranjeshj Apr 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Partly working, that's always nice.
  • Loading branch information
@teaP
teaP committed Mar 31, 2021
commit 19485894cc16a21dab8503e844586f0072307fe5
24 changes: 24 additions & 0 deletions dev/Generated/RadioMenuFlyoutItem.properties.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ namespace winrt::Microsoft::UI::Xaml::Controls

#include "RadioMenuFlyoutItem.g.cpp"

GlobalDependencyProperty RadioMenuFlyoutItemProperties::s_ContainsRadioMenuFlyoutItemsProperty{ nullptr };
GlobalDependencyProperty RadioMenuFlyoutItemProperties::s_GroupNameProperty{ nullptr };
GlobalDependencyProperty RadioMenuFlyoutItemProperties::s_IsCheckedProperty{ nullptr };

Expand All @@ -23,6 +24,17 @@ RadioMenuFlyoutItemProperties::RadioMenuFlyoutItemProperties()

void RadioMenuFlyoutItemProperties::EnsureProperties()
{
if (!s_ContainsRadioMenuFlyoutItemsProperty)
{
s_ContainsRadioMenuFlyoutItemsProperty =
InitializeDependencyProperty(
L"ContainsRadioMenuFlyoutItems",
winrt::name_of<bool>(),
winrt::name_of<winrt::RadioMenuFlyoutItem>(),
true /* isAttached */,
ValueHelper<bool>::BoxValueIfNecessary(false),
&RadioMenuFlyoutItem::OnContainsRadioMenuFlyoutItemsPropertyChanged);
}
if (!s_GroupNameProperty)
{
s_GroupNameProperty =
Expand All @@ -49,6 +61,7 @@ void RadioMenuFlyoutItemProperties::EnsureProperties()

void RadioMenuFlyoutItemProperties::ClearProperties()
{
s_ContainsRadioMenuFlyoutItemsProperty = nullptr;
s_GroupNameProperty = nullptr;
s_IsCheckedProperty = nullptr;
}
Expand All @@ -69,6 +82,17 @@ void RadioMenuFlyoutItemProperties::OnIsCheckedPropertyChanged(
winrt::get_self<RadioMenuFlyoutItem>(owner)->OnPropertyChanged(args);
}


void RadioMenuFlyoutItemProperties::SetContainsRadioMenuFlyoutItems(winrt::DependencyObject const& target, bool value)
{
target.SetValue(s_ContainsRadioMenuFlyoutItemsProperty, ValueHelper<bool>::BoxValueIfNecessary(value));
}

bool RadioMenuFlyoutItemProperties::GetContainsRadioMenuFlyoutItems(winrt::DependencyObject const& target)
{
return ValueHelper<bool>::CastOrUnbox(target.GetValue(s_ContainsRadioMenuFlyoutItemsProperty));
}

void RadioMenuFlyoutItemProperties::GroupName(winrt::hstring const& value)
{
[[gsl::suppress(con)]]
Expand Down
5 changes: 5 additions & 0 deletions dev/Generated/RadioMenuFlyoutItem.properties.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,20 @@ class RadioMenuFlyoutItemProperties
public:
RadioMenuFlyoutItemProperties();

static void SetContainsRadioMenuFlyoutItems(winrt::DependencyObject const& target, bool value);
static bool GetContainsRadioMenuFlyoutItems(winrt::DependencyObject const& target);

void GroupName(winrt::hstring const& value);
winrt::hstring GroupName();

void IsChecked(bool value);
bool IsChecked();

static winrt::DependencyProperty ContainsRadioMenuFlyoutItemsProperty() { return s_ContainsRadioMenuFlyoutItemsProperty; }
static winrt::DependencyProperty GroupNameProperty() { return s_GroupNameProperty; }
static winrt::DependencyProperty IsCheckedProperty() { return s_IsCheckedProperty; }

static GlobalDependencyProperty s_ContainsRadioMenuFlyoutItemsProperty;
static GlobalDependencyProperty s_GroupNameProperty;
static GlobalDependencyProperty s_IsCheckedProperty;

Expand Down
47 changes: 47 additions & 0 deletions dev/RadioMenuFlyoutItem/RadioMenuFlyoutItem.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,27 @@
#include "RuntimeProfiler.h"
#include "ResourceAccessor.h"

winrt::IObservableMap<winrt::hstring, winrt::hstring> RadioMenuFlyoutItem::s_selectionMap = nullptr;

RadioMenuFlyoutItem::RadioMenuFlyoutItem()
{
__RP_Marker_ClassById(RuntimeProfiler::ProfId_RadioMenuFlyoutItem);

m_InternalIsCheckedChangedRevoker = RegisterPropertyChanged(*this, winrt::ToggleMenuFlyoutItem::IsCheckedProperty(), { this, &RadioMenuFlyoutItem::OnInternalIsCheckedChanged });

// ### probably not here -- make an ensure method or something
if (!s_selectionMap)
{
//single_threaded_map
s_selectionMap = winrt::single_threaded_observable_map<winrt::hstring, winrt::hstring>();
// ### or this? winrt::make<HashMap<winrt::hstring, winrt::DataTemplate>>());

// ### so like... if I can observe it, is that better? I don't really need a different type of object then, do I?
//s_selectionMap.MapChanged();

//winrt::Windows::Foundation::Collections::IObservableMap
}

SetDefaultStyleKey(this);
}

Expand Down Expand Up @@ -75,6 +90,38 @@ void RadioMenuFlyoutItem::UpdateSiblings()
}
}
}
}
}

//-----------------------------

//### this should probably actually be the GroupName string or something like that.
void RadioMenuFlyoutItem::OnContainsRadioMenuFlyoutItemsPropertyChanged(const winrt::DependencyObject& sender, const winrt::DependencyPropertyChangedEventArgs& args)
{
OutputDebugString(L"I see this property!\n");

if (auto const& subMenu = sender.try_as<winrt::MenuFlyoutSubItem>())
{
subMenu.Loaded(
{
[subMenu](winrt::IInspectable const& sender, auto const&)
{
OutputDebugString(L"Loaded now!\n");

bool isAnyItemChecked = false;
for (auto const& item : subMenu.Items())
{
// ### and check the group name?
if (auto const& radioItem = item.try_as<winrt::RadioMenuFlyoutItem>())
{
OutputDebugString(radioItem.IsChecked() ? L"Item is checked\n" : L"Item is unchecked\n");
isAnyItemChecked = isAnyItemChecked || radioItem.IsChecked();
}
}
OutputDebugString(isAnyItemChecked ? L"I should be checked\n" : L"I should be unchecked\n");
winrt::VisualStateManager::GoToState(subMenu, isAnyItemChecked ? L"Checked" : L"Unchecked", false);
}
});

}
}
5 changes: 5 additions & 0 deletions dev/RadioMenuFlyoutItem/RadioMenuFlyoutItem.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,8 @@ class RadioMenuFlyoutItem :

void OnPropertyChanged(const winrt::DependencyPropertyChangedEventArgs& args);

static void OnContainsRadioMenuFlyoutItemsPropertyChanged(const winrt::DependencyObject& sender, const winrt::DependencyPropertyChangedEventArgs& args);

private:
void OnInternalIsCheckedChanged(const winrt::DependencyObject& sender, const winrt::DependencyProperty& args);

Expand All @@ -59,4 +61,7 @@ class RadioMenuFlyoutItem :
bool m_isSafeUncheck{ false };

PropertyChanged_revoker m_InternalIsCheckedChangedRevoker{};

//static winrt::IMap<winrt::hstring, winrt::hstring> s_selectionMap;
static winrt::IObservableMap<winrt::hstring, winrt::hstring> s_selectionMap;
};
8 changes: 7 additions & 1 deletion dev/RadioMenuFlyoutItem/RadioMenuFlyoutItem.idl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,12 @@ unsealed runtimeclass RadioMenuFlyoutItem : Windows.UI.Xaml.Controls.MenuFlyoutI

static Windows.UI.Xaml.DependencyProperty IsCheckedProperty{ get; };
static Windows.UI.Xaml.DependencyProperty GroupNameProperty{ get; };

[MUX_DEFAULT_VALUE("false")]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New APIs need to be added in [MUX_PUBLIC_V2] block

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok, done

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not quite -- this makes the attribute apply only to the next member. You need to put it in { } around the thing:

        [MUX_PUBLIC_V2]
        {
            [MUX_DEFAULT_VALUE("winrt::ControlsResourcesVersion::Version1")]
            ControlsResourcesVersion ControlsResourcesVersion{ get; set; };

            static Windows.UI.Xaml.DependencyProperty ControlsResourcesVersionProperty{ get; };
        }

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jevansaks I've updated this. We need to add the metadata test to catch these type of issues.

[MUX_PROPERTY_CHANGED_CALLBACK_METHODNAME("OnContainsRadioMenuFlyoutItemsPropertyChanged")]
static Windows.UI.Xaml.DependencyProperty ContainsRadioMenuFlyoutItemsProperty{ get; };
static void SetContainsRadioMenuFlyoutItems(Windows.UI.Xaml.DependencyObject object, Boolean value);
static Boolean GetContainsRadioMenuFlyoutItems(Windows.UI.Xaml.DependencyObject object);
}

}
}
119 changes: 119 additions & 0 deletions dev/RadioMenuFlyoutItem/RadioMenuFlyoutItem_themeresources.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,4 +152,123 @@
</Setter.Value>
</Setter>
</Style>

<Style TargetType="MenuFlyoutSubItem" x:Key="RadioMenuFlyoutSubItemStyle" BasedOn="{StaticResource DefaultMenuFlyoutSubItemStyle}">
<Setter Property="controls:RadioMenuFlyoutItem.ContainsRadioMenuFlyoutItems" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuFlyoutSubItem">
<Grid
x:Name="LayoutRoot"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Margin="{StaticResource MenuFlyoutItemMargin}"
contract7Present:CornerRadius="{TemplateBinding CornerRadius}">

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />

<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource MenuFlyoutSubItemBackgroundPointerOver}"/>
<Setter Target="TextBlock.Foreground" Value="{ThemeResource MenuFlyoutSubItemForegroundPointerOver}"/>
<Setter Target="SubItemChevron.Foreground" Value="{ThemeResource MenuFlyoutSubItemChevronPointerOver}"/>
<Setter Target="IconContent.Foreground" Value="{ThemeResource MenuFlyoutSubItemForegroundPointerOver}"/>
</VisualState.Setters>
</VisualState>

<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource MenuFlyoutSubItemBackgroundPressed}"/>
<Setter Target="TextBlock.Foreground" Value="{ThemeResource MenuFlyoutSubItemForegroundPressed}"/>
<Setter Target="SubItemChevron.Foreground" Value="{ThemeResource MenuFlyoutSubItemChevronPressed}"/>
<Setter Target="IconContent.Foreground" Value="{ThemeResource MenuFlyoutSubItemForegroundPressed}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="SubMenuOpened">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource MenuFlyoutSubItemBackgroundSubMenuOpened}"/>
<Setter Target="TextBlock.Foreground" Value="{ThemeResource MenuFlyoutSubItemForegroundSubMenuOpened}"/>
<Setter Target="SubItemChevron.Foreground" Value="{ThemeResource MenuFlyoutSubItemChevronSubMenuOpened}"/>
<Setter Target="IconContent.Foreground" Value="{ThemeResource MenuFlyoutSubItemForegroundSubMenuOpened}"/>
</VisualState.Setters>
</VisualState>

<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource MenuFlyoutSubItemBackgroundDisabled}"/>
<Setter Target="TextBlock.Foreground" Value="{ThemeResource MenuFlyoutSubItemForegroundDisabled}"/>
<Setter Target="SubItemChevron.Foreground" Value="{ThemeResource MenuFlyoutSubItemChevronDisabled}"/>
<Setter Target="IconContent.Foreground" Value="{ThemeResource MenuFlyoutSubItemForegroundDisabled}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>

<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Target="IconRoot.Visibility" Value="Visible"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>

<VisualStateGroup x:Name="PaddingSizeStates">
<VisualState x:Name="DefaultPadding" />
<VisualState x:Name="NarrowPadding">

<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Padding">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MenuFlyoutItemThemePaddingNarrow}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>

</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Viewbox x:Name="IconRoot"
Grid.Column="0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Width="16"
Height="16"
Visibility="Collapsed">
<TextBlock x:Name="IconContent"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
Text="&#xE915;"
FontSize="12"
AutomationProperties.AccessibilityView="Raw" />
</Viewbox>
<TextBlock x:Name="TextBlock"
Grid.Column="0"
Foreground="{TemplateBinding Foreground}"
Text="{TemplateBinding Text}"
TextTrimming="Clip"
Margin="{StaticResource MenuFlyoutItemPlaceholderThemeThickness}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
<FontIcon x:Name="SubItemChevron"
Grid.Column="1"
Glyph="&#xE0E3;"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="12"
AutomationProperties.AccessibilityView="Raw"
Foreground="{ThemeResource MenuFlyoutSubItemChevron}"
Margin="{StaticResource MenuFlyoutItemChevronMargin}"
MirroredWhenRightToLeft="True" />
</Grid>

</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
16 changes: 16 additions & 0 deletions dev/RadioMenuFlyoutItem/TestUI/RadioMenuFlyoutItemPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,22 @@
</Button.Flyout>
</Button>

<Button AutomationProperties.Name="SubMenuFlyoutButton" Content="I have a sub menu" Margin="12">
<Button.Flyout>
<MenuFlyout x:Name="ButtonSubMenuFlyout">
<controls:RadioMenuFlyoutItem GroupName="SortGroup" AutomationProperties.Name="NameItem" Text="Name" IsChecked="true"/>
<controls:RadioMenuFlyoutItem GroupName="SortGroup" AutomationProperties.Name="DateItem" Text="Date"/>
<controls:RadioMenuFlyoutItem GroupName="SortGroup" AutomationProperties.Name="SizeItem" Text="Size"/>

<MenuFlyoutSubItem Text="Other" Style="{StaticResource RadioMenuFlyoutSubItemStyle}">
<controls:RadioMenuFlyoutItem GroupName="SortGroup" AutomationProperties.Name="AlbumNameItem" Text="Album Name"/>
<controls:RadioMenuFlyoutItem GroupName="SortGroup" AutomationProperties.Name="ArtistNameItem" Text="Artist Name"/>
<controls:RadioMenuFlyoutItem GroupName="SortGroup" AutomationProperties.Name="GenreItem" Text="Genre"/>
</MenuFlyoutSubItem>
</MenuFlyout>
</Button.Flyout>
</Button>

<Button Content="I have icons" Margin="12">
<Button.Flyout>
<MenuFlyout>
Expand Down