Fix: Workaround for Segmented

README.md

@@ -2,12 +2,12 @@
 # WinUI Essentials
 A repo dedicated for simplifying C++ development with WinUI2 (Universal Windows Platform) and WinUI3 (Windows App SDK).
 
-![](https://img.shields.io/nuget/v/WinUIEssential.UWP?label=UWP)
-![](https://img.shields.io/nuget/v/WinUIEssential.WinUI3?label=winui3)
+[![](https://img.shields.io/nuget/v/WinUIEssential.UWP?label=WinUIEssential.UWP)](https://www.nuget.org/packages/WinUIEssential.UWP)
+[![](https://img.shields.io/nuget/v/WinUIEssential.WinUI3?label=WinUIEssential.WinUI3)](https://www.nuget.org/packages/WinUIEssential.WinUI3)
 
 Example project build status:
 
-[![Build example Debug_86](https://github.com/HO-COOH/WinUIEssentials/actions/workflows/msbuild_Debug_x86.yml/badge.svg)](https://github.com/HO-COOH/WinUIEssentials/actions/workflows/msbuild_Debug_x86.yml)
+[![Build example Debug_x86](https://github.com/HO-COOH/WinUIEssentials/actions/workflows/msbuild_Debug_x86.yml/badge.svg)](https://github.com/HO-COOH/WinUIEssentials/actions/workflows/msbuild_Debug_x86.yml)
 
 [![Build example Debug_x64](https://github.com/HO-COOH/WinUIEssentials/actions/workflows/msbuild_Debug_x64.yml/badge.svg)](https://github.com/HO-COOH/WinUIEssentials/actions/workflows/msbuild_Debug_x64.yml)
 

UWPPackage/.nuspec

@@ -2,7 +2,7 @@
 <package xmlns="http://schemas.microsoft.com/packaging/2010/07/nuspec.xsd">
     <metadata>
         <id>WinUIEssential.UWP</id>
-        <version>1.2.8</version>
+        <version>1.2.9</version>
         <title>WinUIEssential(UWP)</title>
         <authors>Peter</authors>
         <owners></owners>

UWPPackage/ListViewBaseWorkaround.hpp

@@ -0,0 +1,52 @@
+#pragma once
+
+/**
+ * @brief This is a workaround for `ListViewBase` incorrect `SelectedIndex`, the issue is recorded here: https://github.com/microsoft/microsoft-ui-xaml/issues/8257.
+ * To use this workaround, inherit from this class in the implementation, see Segmented.h
+ * @tparam DerivedT
+ */
+template<typename DerivedT>
+struct ListViewBaseWorkaround : DerivedT
+{
+private:
+    int m_internalSelectedIndex = -1;
+    bool m_templateApplied{};
+public:
+    int SelectedIndex()
+    {
+        return m_internalSelectedIndex;
+    }
+
+    /**
+     * @brief call this on the last line of `OnApplyTemplate()`
+     *
+     * @details We already know that `SelectedIndex` is correct when the first `onSelectedIndexChanged` is called,
+     * and then become incorrect when `OnApplyTemplate()` is called. So We just record the first correct `SelectedIndex`
+     * (this is achieved by this `onSelectedIndexChanged()`, and then set it in `OnApplyTemplate`
+     */
+    void TemplateApplied()
+    {
+        //This is the workaround
+        if (!m_templateApplied)
+        {
+            DerivedT::SelectedIndex(m_internalSelectedIndex);
+        }
+        m_templateApplied = true;
+
+
+        /*
+            When this bug get fixed by WinUI, comment the above workaround,
+            and uncomment below to apply the `SelectedIndex` to highlight the correct `SegmentedItem`
+        */
+        //DerivedT::onSelectedIndexChanged(nullptr, nullptr);
+    }
+
+    /**
+     * @brief Call this on the first line of `onSelectedIndexChanged` in `Segmented::onSelectedIndexChanged`
+     */
+    void onSelectedIndexChanged()
+    {
+        if (auto const selectedIndex = DerivedT::SelectedIndex(); ((m_internalSelectedIndex == -1 && selectedIndex > -1) || m_templateApplied))
+            m_internalSelectedIndex = selectedIndex;
+    }
+};

UWPPackage/Segmented.cpp

@@ -49,6 +49,8 @@ namespace winrt::UWPPackage::implementation
 
 		if (m_isMultiSelect = (SelectionMode() == winrt::Windows::UI::Xaml::Controls::ListViewSelectionMode::Multiple))
 			setMultiSelectStyle(m_isMultiSelect);
+
+		TemplateApplied();
 	}
 
 	winrt::Windows::Foundation::Numerics::float2 Segmented::SelectedItemActualWidth()
@@ -70,6 +72,7 @@ namespace winrt::UWPPackage::implementation
 
 	void Segmented::onSelectedIndexChanged(winrt::Windows::UI::Xaml::DependencyObject const& sender, winrt::Windows::UI::Xaml::DependencyProperty const& indexProperty)
 	{
+		ListViewBaseWorkaround::onSelectedIndexChanged();
 		if (!m_knob)
 			return;
 

UWPPackage/Segmented.h

@@ -2,11 +2,11 @@
 
 #include "Segmented.g.h"
 #include "include/TemplateControlHelper.hpp"
-
+#include "ListViewBaseWorkaround.hpp"
 
 namespace winrt::UWPPackage::implementation
 {
-    struct Segmented : SegmentedT<Segmented>, TemplateControlHelper<Segmented>
+    struct Segmented : ListViewBaseWorkaround<SegmentedT<Segmented>>, TemplateControlHelper<Segmented>
     {
         Segmented();
 

UWPPackage/UWPPackage.vcxproj

@@ -468,6 +468,7 @@
     <ClInclude Include="include\ToastTemplates.hpp" />
     <ClInclude Include="include\WindowHelper.hpp" />
     <ClInclude Include="include\WinUIIncludes.hpp" />
+    <ClInclude Include="ListViewBaseWorkaround.hpp" />
     <ClInclude Include="MarqueeText.h">
       <DependentUpon>MarqueeText.idl</DependentUpon>
       <SubType>Code</SubType>

UWPPackage/UWPPackage.vcxproj.filters

@@ -90,6 +90,9 @@
     <ClInclude Include="UnsupportedImageTypeError.hpp">
       <Filter>Controls\ImageExtension</Filter>
     </ClInclude>
+    <ClInclude Include="ListViewBaseWorkaround.hpp">
+      <Filter>Controls\Segmented</Filter>
+    </ClInclude>
   </ItemGroup>
   <ItemGroup>
     <None Include="UWPPackage.def" />

WinUI3Example/SegmentedPage.idl

@@ -5,18 +5,6 @@ namespace WinUI3Example
     {
         SegmentedPage();
 
-        /*BasicSegmentedExample*/
-        Microsoft.UI.Xaml.Controls.ToggleSwitch EnabledSwitch1{ get; };
-        Microsoft.UI.Xaml.Controls.ToggleSwitch ReorderingSwitch1{ get; };
-        Microsoft.UI.Xaml.Controls.ComboBox SelectionModeComboBox1{ get; };
-        Microsoft.UI.Xaml.Controls.ComboBox HorizontalAlignmenmtComboBox1{ get; };
-
-
-        Microsoft.UI.Xaml.Controls.ToggleSwitch EnabledSwitch2{ get; };
-        Microsoft.UI.Xaml.Controls.ToggleSwitch ReorderingSwitch2{ get; };
-        Microsoft.UI.Xaml.Controls.ComboBox SelectionModeComboBox2{ get; };
-        Microsoft.UI.Xaml.Controls.ComboBox HorizontalAlignmenmtComboBox2{ get; };
-
         static Microsoft.UI.Xaml.Controls.ListViewSelectionMode ConvertToSelectionMode(Object selectionMode);
         static Microsoft.UI.Xaml.HorizontalAlignment ConvertToHorizontalAlignment(Object horizontalAlignment);
     }