Net maui visualstate for IsVisible not working ?

Sami 856

Net maui visualstate for IsVisible not working ? when backgroundcolor is working but when setter property as Isvisible is not working , can you help me thanks ..

<CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid BackgroundColor="{DynamicResource BackColor}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroupList>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" >
                                            <VisualState.Setters>
                                                <Setter Property="IsVisible" Value="false" TargetName="gridSelected"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="Selected">
                                            <VisualState.Setters>
                                                <Setter Property="IsVisible" Value="True" TargetName="gridSelected"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateGroupList>
                            </VisualStateManager.VisualStateGroups>

                            <Grid.RowDefinitions>
                                <RowDefinition Height="80"/>
                            </Grid.RowDefinitions>
                           
                            <Grid>
                                <Frame HasShadow="False" Padding="0" CornerRadius="3" BackgroundColor="{StaticResource White}" >
                                <Image Source="{Binding .}" Aspect="AspectFit"/>
                                </Frame>
                            
                            </Grid>
                            <Grid x:Name="gridSelected"  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

                            </Grid>
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>

Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Sami 856

still not working .. Thanks

<CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid BackgroundColor="{DynamicResource BackColor}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroupList>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" >
                                            <VisualState.Setters>
                                                <Setter Property="IsVisible" Value="false" TargetName="gridSelected"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="isSelected">
                                            <VisualState.Setters>
                                                <Setter Property="IsVisible" Value="True" TargetName="gridSelected"/>
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateGroupList>
                            </VisualStateManager.VisualStateGroups>

                            <Grid.RowDefinitions>
                                <RowDefinition Height="80"/>
                            </Grid.RowDefinitions>
                           
                            <Grid>
                                <Frame HasShadow="False" Padding="0" CornerRadius="3" BackgroundColor="{StaticResource White}" >
                                <Image Source="{Binding .}" Aspect="AspectFit"/>
                                </Frame>
                            
                            </Grid>
                            <Grid x:Name="gridSelected" IsVisible="{Binding isSelected}"  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

                            </Grid>
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>

Accepted answer

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,261 Microsoft Vendor

Hello,

Please remove <Frame> for <label> and <image> for testing, I found a related known issue about CollectionView does not select an element with a Frame as DataTemplate.

<CollectionView Grid.Row="2"  x:Name="publishPhotos"  ItemsSource="{Binding Images}" SelectionMode="Single"  HorizontalOptions="FillAndExpand" Margin="5,0" >
        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Vertical" Span="5" HorizontalItemSpacing="5" VerticalItemSpacing="5" />
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                    
                  <Grid BackgroundColor="{DynamicResource BackColor}" Height="80">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroupList>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" >
                                        <VisualState.Setters>
                                            <Setter Property="IsVisible" Value="false" TargetName="gridSelected"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <VisualState.Setters>
                                            <Setter Property="IsVisible" Value="True" TargetName="gridSelected"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateGroupList>
                    </VisualStateManager.VisualStateGroups>
                   <Grid.RowDefinitions>
                        <RowDefinition Height="80"/>
                    </Grid.RowDefinitions>
                       <Grid>
                             <Image Source="{Binding .}" Aspect="AspectFit"/>
                        </Grid>
                        <Grid x:Name="gridSelected"   HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                           
                        </Grid>
                   </Grid>                   
                </DataTemplate>
        </CollectionView.ItemTemplate>
   </CollectionView>

And change your <VisualState x:Name="isSelected"> to <VisualState x:Name="Selected">

Best Regards,

Leon Lu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,261 Reputation points Microsoft Vendor

2023-06-05T07:24:05.4566667+00:00

Sami Please see my updated answer.

Sami 856

 sorry still not working...

<CollectionView.ItemTemplate>
                        <DataTemplate>
                    <Grid BackgroundColor="{DynamicResource BackColor}" Height="80">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroupList>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" >
                                        <VisualState.Setters>
                                            <Setter Property="IsVisible" Value="false" TargetName="gridSelected"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <VisualState.Setters>
                                            <Setter Property="IsVisible" Value="True" TargetName="gridSelected"/>


                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateGroupList>
                        </VisualStateManager.VisualStateGroups>

                        <Grid.RowDefinitions>
                                    <RowDefinition Height="80"/>
                                </Grid.RowDefinitions>

                                <Grid>
                                    <Frame HasShadow="False" Padding="0" CornerRadius="3" BackgroundColor="{StaticResource White}" >
                                        <Image Source="{Binding .}" Aspect="AspectFit"/>
                                    </Frame>

                                </Grid>
                                <Grid x:Name="gridSelected" IsVisible="{Binding isSelected}"  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

                                    <Border   Stroke="{DynamicResource BorderColor}" BackgroundColor="{StaticResource White}" Padding="1" HeightRequest="20" WidthRequest="20"  Margin="3" HorizontalOptions="End" VerticalOptions="Start">
                                        <Border.StrokeShape>
                                            <RoundRectangle CornerRadius="50" />
                                        </Border.StrokeShape>
                                        <Label  FontSize="{StaticResource XSFontSize}" Style="{StaticResource ionIcon}"  Text="{x:Static icon:IonIcons.Checkmark}" TextColor="{StaticResource City}"  Background="Transparent"  />
                                    </Border>
                                    <Frame HasShadow="False" Padding="6,2" CornerRadius="3" HeightRequest="20" BackgroundColor="{StaticResource City}" VerticalOptions="End" HorizontalOptions="CenterAndExpand">
                                        <Label FontSize="{StaticResource XXXSFontSize}" TextColor="{StaticResource White}"  Text="Ana Resim" />
                                    </Frame>
                                </Grid>
                            </Grid>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,261 Microsoft Vendor

Please set WidthRequest and HeightRequest For the following Grid.

 <Grid WidthRequest="80" HeightRequest="80">
                                    <Frame HasShadow="False" Padding="0" CornerRadius="3" BackgroundColor="{StaticResource White}" >
                                        <Image Source="{Binding .}" Aspect="AspectFit"/>
                                    </Frame>

                                </Grid>

And set SelectionMode as well for your <CollectionView>, I set <CollectionView ItemsSource="{Binding Items}" SelectionMode="Single">

Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Sami 856

 <CollectionView Grid.Row="2" x:Name="publishPhotos"  ItemsSource="{Binding Images}" SelectionMode="Single"  HorizontalOptions="FillAndExpand" Margin="5,0" >
                    <CollectionView.ItemsLayout>
                        <GridItemsLayout Orientation="Vertical" Span="5" HorizontalItemSpacing="5" VerticalItemSpacing="5" />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                    <Grid BackgroundColor="{DynamicResource BackColor}" Height="80">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroupList>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" >
                                        <VisualState.Setters>
                                            <Setter Property="IsVisible" Value="false" TargetName="gridSelected"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <VisualState.Setters>
                                            <Setter Property="IsVisible" Value="True" TargetName="gridSelected"/>

                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateGroupList>
                        </VisualStateManager.VisualStateGroups>

                        <Grid.RowDefinitions>
                                    <RowDefinition Height="80"/>
                                </Grid.RowDefinitions>

                                <Grid>
                                    <Frame HasShadow="False" Padding="0" CornerRadius="3" BackgroundColor="{StaticResource White}" >
                                        <Image Source="{Binding .}" Aspect="AspectFit"/>
                                    </Frame>

                                </Grid>
                                <Grid x:Name="gridSelected" IsVisible="{Binding Selected}"  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

                                </Grid>
                            </Grid>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                  
                </CollectionView>

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,261 Microsoft Vendor

Is <Grid x:Name="gridSelected"> empty? If not, please copy following code to make a test. As note, I add label in <Grid x:Name="gridSelected"> for testing, label is invisible by default, when I click the image, this label is visible, Am I right?


<CollectionView Grid.Row="2"  x:Name="publishPhotos"  ItemsSource="{Binding Images}" SelectionMode="Single"  HorizontalOptions="FillAndExpand" Margin="5,0" >
        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Vertical" Span="5" HorizontalItemSpacing="5" VerticalItemSpacing="5" />
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                    
                  <Grid BackgroundColor="{DynamicResource BackColor}" Height="80">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroupList>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" >
                                        <VisualState.Setters>
                                            <Setter Property="IsVisible" Value="false" TargetName="gridSelected"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <VisualState.Setters>
                                            <Setter Property="IsVisible" Value="True" TargetName="gridSelected"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateGroupList>
                    </VisualStateManager.VisualStateGroups>





                   <Grid.RowDefinitions>
                        <RowDefinition Height="80"/>
                    </Grid.RowDefinitions>




                       <Grid>
                             <Image Source="{Binding .}" Aspect="AspectFit"/>
                        </Grid>
                        <Grid x:Name="gridSelected"   HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                           
                        </Grid>




                   </Grid>




                   
                </DataTemplate>
        </CollectionView.ItemTemplate>




   </CollectionView>

Sami 856

Yes you are right

  <Frame HasShadow="False" Padding="6,3" CornerRadius="3" HeightRequest="20" BackgroundColor="{StaticResource City}" VerticalOptions="End" HorizontalOptions="FillAndExpand">
                                        <Label FontSize="{StaticResource XXXSFontSize}" TextColor="{StaticResource White}"  Text="aaa" HorizontalTextAlignment="Center" />
                                    </Frame>

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,261 Reputation points Microsoft Vendor

2023-06-05T09:44:04.6366667+00:00

Please remove <Frame> for <label> and <image> for testing, I found a related known issue about CollectionView does not select an element with a Frame as DataTemplate
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,261 Reputation points Microsoft Vendor

2023-06-06T02:13:21.5066667+00:00

Sami May I know if you have got any chance to check my updated answer? I am glad to help if you have any other questions.

Sami 856

I am trying to create colectionview with product images after uploading product images which one is major image with selected ( on product image , check mark icon show and hide ) I don t understand why is not working on my project...I have tried with triggers or converter also not working.. for example first visualstate named normal Isvisible=False is working hiding grid but when clicked event is working as expected but not showing the grid content ( icon ) Is there another solution ?

converter sample ..... converter is working with all places that I have implemented but here is not 

<Grid.GestureRecognizers>
                                    <TapGestureRecognizer  Command="{Binding MainImageCommand}" />
                                </Grid.GestureRecognizers>
                                <Grid.IsVisible>
                                    <Binding Source="{x:Reference gridSelected}" Path="IsMainImage">
                                        <Binding.Converter>
                                            <conv:BoolToObjectConverter 
                                                         TrueObject="True"
                                                         FalseObject="False" />
                                        </Binding.Converter>
                                    </Binding>
                                </Grid.IsVisible>


trigger sample  .....


                                    <Grid.Triggers>
                                    <Trigger TargetType="Grid" Property="IsVisible" Value="False">
                                        <Setter Property="IsVisible" Value="True" />
                                    </Trigger>
                                </Grid.Triggers>

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,261 Reputation points Microsoft Vendor

2023-06-06T05:33:18.2666667+00:00

Please keep one thread for one question, If you have new issue, please create a new thread for it. Is maui visualstate for IsVisible not working issue solved in this thread?
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,261 Reputation points Microsoft Vendor

2023-06-07T06:17:25.36+00:00

for example first visualstate named normal Isvisible=False is working hiding grid but when clicked event is working as expected but not showing the grid content ( icon ) Is there another solution

Sami Please share detailed code with your Viewmodel and `` Source="{x:Reference gridSelected}" Path="IsMainImage"part code. I do not which controls that you set the reference,IsMainImage` is a property of Model?
Sami 856 Reputation points

2023-06-07T07:31:11.3333333+00:00

Is another model but is not working either but another pages converter is working well I don t understand problem here..
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,261 Reputation points Microsoft Vendor

2023-06-07T08:42:51.5666667+00:00

If it is inconvenient for you share this code, it is recommended to open a support ticket for this. Please contact our paid phone support at MS Support. You will get 1:1 support on that. Or could you open a new thread for the clicked event is working as expected but not showing the grid content issue? Please post these two models， layout code. Based on your description, I cannnot reproduce this issue.

1 additional answer

Sami 856

Finally I found the problem because of references that I have removed them now it is working... Thanks a lot..

xmlns:android="clr namespace:Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;assembly=Microsoft.Maui.Controls" // removed
android:Application.WindowSoftInputModeAdjust="Unspecified" // removed


<CollectionView.ItemTemplate>
                        <DataTemplate>
                    <Grid BackgroundColor="{DynamicResource BackColor}" IsVisible="{Binding isSelected}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroupList>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" >
                                        <VisualState.Setters>
                                            <Setter Property="IsVisible" Value="False" TargetName="gridSelected" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <VisualState.Setters>
                                            <Setter Property="IsVisible" Value="True" TargetName="gridSelected" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateGroupList>
                        </VisualStateManager.VisualStateGroups>
                        <Grid.RowDefinitions>
                                    <RowDefinition Height="105"/>
                                </Grid.RowDefinitions>

                        <Grid  HeightRequest="80" VerticalOptions="Start">
                            <Border  StrokeShape="RoundRectangle 3" BackgroundColor="{StaticResource BorderColor}"  >
                                        <Image Source="{Binding .}" Aspect="AspectFit"/>
                                    </Border>

                                </Grid>
                        <Grid x:Name="gridSelected"   HorizontalOptions="Center" VerticalOptions="FillAndExpand">
                          
                                    <Border   Stroke="{DynamicResource BorderColor}" BackgroundColor="{StaticResource White}" Padding="1" HeightRequest="20" WidthRequest="20"  Margin="3" HorizontalOptions="End" VerticalOptions="Start">
                                        <Border.StrokeShape>
                                            <RoundRectangle CornerRadius="50" />
                                        </Border.StrokeShape>
                                        <Label  FontSize="{StaticResource XSFontSize}" Style="{StaticResource ionIcon}"  Text="{x:Static icon:IonIcons.Checkmark}" TextColor="{StaticResource City}"  Background="Transparent"  />
                                    </Border>
                                    <Frame HasShadow="False" Padding="6,3" CornerRadius="3" HeightRequest="20" BackgroundColor="{StaticResource City}" VerticalOptions="End" HorizontalOptions="FillAndExpand">
                                        <Label FontSize="{StaticResource XXXSFontSize}" TextColor="{StaticResource White}"  Text="Ana Resim" HorizontalTextAlignment="Center" />
                                    </Frame>
                                </Grid>
                            </Grid>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,261 Reputation points Microsoft Vendor

2023-06-08T06:14:28.7+00:00

Thanks for your update. I convert your comment to answer.