search

xamarin / Xamarin.Forms

Xamarin.Forms is no longer supported. Migrate your apps to .NET MAUI.
https://aka.ms/xamarin-upgrade
Other
5.64k stars 1.88k forks source link

[Bug] FlyoutItem.Icon Setters don't work in triggers - you have to use FlyoutItem.FlyoutIcon #13220

Open ScottSEA opened 3 years ago

ScottSEA commented 3 years ago

Description

While trying to change the displayed Icon for a FlyoutItem in a Trigger based on the IsChecked property, when targeting the Icon property, nothing changes in the UI. When targeting the FlyoutIcon property, everything works as expected.

Steps to Reproduce

  1. Create the default Flyout project
  2. Create a Style trigger for a FlyoutItem in AppShell.xaml: 
    <Style x:Key="FlyoutItemTrigger" TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}">
<Style.Triggers>
    <Trigger TargetType="FlyoutItem" Property="IsChecked" Value="True">
        <Setter Property="Icon" > 
         <!-- Setting the ^^^^ Icon property - but if you change it to FlyoutIcon it works -->
            <Setter.Value>
                <!-- These values can be anything - none of them change -->
                <FontImageSource FontFamily="MaterialDesignIconFont"
                                    Glyph="{StaticResource NewspaperGlyph}"
                                    Color="White" />
            </Setter.Value>
        </Setter>
    </Trigger>
</Style.Triggers>
</Style>
  3. Associate with a FlyoutItem 
    <FlyoutItem Title="About" Style="{StaticResource FlyoutItemTrigger}">
<FlyoutItem.Icon><!-- setting the Icon, not the FlyoutIcon -->
    <FontImageSource FontFamily="MaterialDesignIconFont"
                        Glyph="{StaticResource InformationOutlineGlyph}"
                        Color="Green" />
</FlyoutItem.Icon>
<ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
</FlyoutItem>

    Expected Behavior

    Rendered Icon changes when the trigger is fired.

    Actual Behavior

    Rendered Icon does not change.

    Basic Information

Environment

Show/Hide Visual Studio info ``` Microsoft Visual Studio Enterprise 2019 Version 16.8.3 VisualStudio.16.Release/16.8.3+30804.86 Microsoft .NET Framework Version 4.8.03752 Installed Version: Enterprise Visual C++ 2019 00435-60000-00000-AA025 Microsoft Visual C++ 2019 ADL Tools Service Provider 1.0 This package contains services used by Data Lake tools ASA Service Provider 1.0 ASP.NET and Web Tools 2019 16.8.554.20160 ASP.NET and Web Tools 2019 ASP.NET Core Razor Language Services 16.1.0.2052803+84e121f1403378489b842e1797df2f3f5a49ac3c Provides languages services for ASP.NET Core Razor. ASP.NET Web Frameworks and Tools 2019 16.8.554.20160 For additional information, visit https://www.asp.net/ Azure App Service Tools v3.0.0 16.8.554.20160 Azure App Service Tools v3.0.0 Azure Data Lake Node 1.0 This package contains the Data Lake integration nodes for Server Explorer. Azure Data Lake Tools for Visual Studio 2.6.3000.0 Microsoft Azure Data Lake Tools for Visual Studio Azure Functions and Web Jobs Tools 16.8.554.20160 Azure Functions and Web Jobs Tools Azure Stream Analytics Tools for Visual Studio 2.6.3000.0 Microsoft Azure Stream Analytics Tools for Visual Studio Bundler & Minifier 2.8.396 Adds support for bundling and minifying JavaScript, CSS and HTML files in any project. C# Tools 3.8.0-5.20604.10+9ed4b774d20940880de8df1ca8b07508aa01c8cd C# components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used. Common Azure Tools 1.10 Provides common services for use by Azure Mobile Services and Microsoft Azure Tools. CSS Tools 2019 1.1.4 Provides additional features to the CSS editor in Visual Studio. EditorConfig Language Service 1.17.284 Language service for .editorconfig files. EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs. Extensibility Message Bus 1.2.6 (master@34d6af2) Provides common messaging-based MEF services for loosely coupled Visual Studio extension components communication and integration. Fabric.DiagnosticEvents 1.0 Fabric Diagnostic Events File Icons 2.7 Adds icons for files that are not recognized by Solution Explorer File Nesting 2.6.85 Automatically nest files based on file name and enables developers to nest and unnest any file manually GitHub.VisualStudio 2.11.106.19330 A Visual Studio Extension that brings the GitHub Flow into Visual Studio. Image Optimizer 4.0.132 Uses industry standard tools to optimize any JPEG, PNG and Gifs - including animated Gifs. Can do both lossy and lossless optimization. Image Sprites 1.4.61 Boost your website's performance by creating image sprites to reduce the amount of HTTP requests needed. IntelliCode Extension 1.0 IntelliCode Visual Studio Extension Detailed Info Markdown Editor 1.12.253 A full featured Markdown editor with live preview and syntax highlighting. Supports GitHub flavored Markdown. Microsoft Azure HDInsight Azure Node 2.6.3000.0 HDInsight Node under Azure Node Microsoft Azure Hive Query Language Service 2.6.3000.0 Language service for Hive query Microsoft Azure Service Fabric Tools for Visual Studio 16.0 Microsoft Azure Service Fabric Tools for Visual Studio Microsoft Azure Stream Analytics Language Service 2.6.3000.0 Language service for Azure Stream Analytics Microsoft Azure Stream Analytics Node 1.0 Azure Stream Analytics Node under Azure Node Microsoft Azure Tools 2.9 Microsoft Azure Tools for Microsoft Visual Studio 2019 - v2.9.30924.1 Microsoft Continuous Delivery Tools for Visual Studio 0.4 Simplifying the configuration of Azure DevOps pipelines from within the Visual Studio IDE. Microsoft JVM Debugger 1.0 Provides support for connecting the Visual Studio debugger to JDWP compatible Java Virtual Machines Microsoft Library Manager 2.1.113+g422d40002e.RR Install client-side libraries easily to any web project Microsoft MI-Based Debugger 1.0 Provides support for connecting Visual Studio to MI compatible debuggers Microsoft Visual C++ Wizards 1.0 Microsoft Visual C++ Wizards Microsoft Visual Studio Tools for Containers 1.1 Develop, run, validate your ASP.NET Core applications in the target environment. F5 your application directly into a container with debugging, or CTRL + F5 to edit & refresh your app without having to rebuild the container. Microsoft Visual Studio VC Package 1.0 Microsoft Visual Studio VC Package Mono Debugging for Visual Studio 16.8.43 (00471f8) Support for debugging Mono processes with Visual Studio. Node.js Tools 1.5.20902.1 Commit Hash:b474efcb6f92db52a8f8e2e6a8cb9648476885cc Adds support for developing and debugging Node.js apps in Visual Studio NuGet Package Manager 5.8.0 NuGet Package Manager in Visual Studio. For more information about NuGet, visit https://docs.nuget.org/ Open Command Line 2.4.233 2.4.233 Package Installer 2.0.103 Makes it easier, faster and more convenient than ever to install Bower, npm, Yarn, JSPM, TSD, Typings and NuGet packages to any project Package Security Alerts 1.0.22 Identifies npm and Bower packages that contains known security vulnerabilities to ensure your project is always using the most secure package versions. Productivity Power Tools 2017/2019 16.0 Installs the individual extensions of Productivity Power Tools 2017/2019 ProjectServicesPackage Extension 1.0 ProjectServicesPackage Visual Studio Extension Detailed Info Snapshot Debugging Extension 1.0 Snapshot Debugging Visual Studio Extension Detailed Info SQL Server Data Tools 16.0.62010.06180 Microsoft SQL Server Data Tools SVG Viewer 1.0.9 Makes it much easier to work with SVG files by showing a live preview in the bottom-right corner of the code window ToolWindowHostedEditor 1.0 Hosting json editor into a tool window TypeScript Tools 16.0.21016.2001 TypeScript Tools for Microsoft Visual Studio Visual Basic Tools 3.8.0-5.20604.10+9ed4b774d20940880de8df1ca8b07508aa01c8cd Visual Basic components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used. Visual F# Tools 16.8.0-beta.20507.4+da6be68280c89131cdba2045525b80890401defd Microsoft Visual F# Tools Visual Studio Code Debug Adapter Host Package 1.0 Interop layer for hosting Visual Studio Code debug adapters in Visual Studio Visual Studio Container Tools Extensions 1.0 View, manage, and diagnose containers within Visual Studio. Visual Studio Tools for Containers 1.0 Visual Studio Tools for Containers Visual Studio Tools for Kubernetes 1.0 Visual Studio Tools for Kubernetes Visual Studio Tools for Unity 4.8.2.0 Visual Studio Tools for Unity VisualStudio.DeviceLog 1.0 Information about my package VisualStudio.Mac 1.0 Mac Extension for Visual Studio Web Accessibility Checker 1.5.58 The easiest way to perform accessibility checks on any ASP.NET web application. Fully customizable and support all the major international accessibility standards. Web Compiler 1.12.394 Compiler for LESS, Sass and CoffeeScript files Web Essentials 2019 0.5.10 The easiest way to set up Visual Studio for the ultimate web development experience. Xamarin 16.8.000.260 (d16-8@fd405a2) Visual Studio extension to enable development for Xamarin.iOS and Xamarin.Android. Xamarin Designer 16.8.0.507 (remotes/origin/d16-8@e87b24884) Visual Studio extension to enable Xamarin Designer tools in Visual Studio. Xamarin Templates 16.8.112 (86385a3) Templates for building iOS, Android, and Windows apps with Xamarin and Xamarin.Forms. Xamarin.Android SDK 11.1.0.17 (d16-8/c0e2b8e) Xamarin.Android Reference Assemblies and MSBuild support. Mono: be2226b Java.Interop: xamarin/java.interop/d16-8@79d9533 ProGuard: Guardsquare/proguard/proguard6.2.2@ebe9000 SQLite: xamarin/sqlite/3.32.1@1a3276b Xamarin.Android Tools: xamarin/xamarin-android-tools/d16-8@2fb1cbc Xamarin.iOS and Xamarin.Mac SDK 14.6.0.15 (87a1b18d8) Xamarin.iOS and Xamarin.Mac Reference Assemblies and MSBuild support. ZenCoding 1.2.12 Provides ZenCoding for the HTML Editor - full support for static HTML, Razor and WebForms. ```

Workaround

In the setter, target the FlyoutIcon property. Everything should work fine.

<Setter Property="FlyoutIcon" >
holecekp commented 3 years ago

I have encountered a similar issue a few months ago (https://github.com/xamarin/Xamarin.Forms/issues/11406#issuecomment-660507227). In my case, the Icon property could be used to set the icon for the first time, but it could not be used for changing it afterwards. The FlyoutIcon property worked for both operations correctly.