0

I'm trying to bind my icon to a property in my appshell viewmodel. This works for the first time, and I am watching the "flyoutispresented" property change to update the icon - I'm switching between two different png's. The event fires every time, and I can see the property in the viewmodel is updating, but the flyout image is not changing. It seems to stay the way it was when first rendered. In my appshell constructor, I am doing the following:

model = new AppShellViewModel(); this.BindingContext = model;

        this.PropertyChanged +=
        (obj, args) => model.Shell_PropertyChanged(obj, args);

so I am using the single instance of the view model, and that method is being called properly. Has anyone had luck displaying different icons like this? What am I missing that even though I'm changing the icon property, it's not showing the change?

Cheesebaron
  • 24,131
  • 15
  • 66
  • 118
kiman44
  • 21
  • 2

1 Answers1

0

We could modefy the icon source via VisualStateManager status selected and normal.

<Shell.ItemTemplate>
    <DataTemplate >
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.2*" />
                <ColumnDefinition Width="0.8*" />
            </Grid.ColumnDefinitions>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter TargetName="FlyoutItemIcon" Property="Image.Source" Value="icon_about.png"></Setter>
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter TargetName="FlyoutItemIcon" Property="Image.Source" Value="cactus_24px.png"></Setter>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </VisualStateManager.VisualStateGroups>
            <Image x:Name="FlyoutItemIcon" Source="{Binding FlyoutIcon}"
                   Margin="5"
                   HeightRequest="45" >
            </Image>
            <Label  Grid.Column="1"
                   Text="{Binding Title}"
                   FontAttributes="Italic"
                   VerticalTextAlignment="Center" />
        </Grid>
    </DataTemplate>
</Shell.ItemTemplate>

Update:

 <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <ShellContent  Title="About" Icon="icon_about.png"  Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
    
</FlyoutItem>
Wendy Zang - MSFT
  • 10,509
  • 1
  • 7
  • 17
  • I need to change the icon dynamically for one specific menu item, which will indicate if there are unread items in the list. Not sure VisualState will help there? I'm manipulating the icon as follows: the problem is that it doesn't update after initial creation, despite me successfully changing the icon value. – kiman44 Nov 15 '21 at 21:53
  • Check the update. The code works for the template. – Wendy Zang - MSFT Nov 16 '21 at 08:10
  • Thanks. How would I use this for something other than Selected, which appears to be a default state? If I create my own custom state, how would I change the state in the code-behind? – kiman44 Nov 17 '21 at 20:38
  • Also, you are binding the image to "FlyoutIcon" but I don't see that anywhere else – kiman44 Nov 17 '21 at 22:50
  • You could set the properties in Normal VisualState as default state. The FlyoutIcon is the icon property name in Shell FlyoutItem Template. It matches the `Icon` i set in ShellContent of my update. – Wendy Zang - MSFT Nov 19 '21 at 06:46