question

Rajesh-3729 avatar image
0 Votes"
Rajesh-3729 asked Rajesh-3729 commented

Get the Frames inside CollectionView's Item Template

I have collectionview and a button outside collectionview i want to get the frame from ItemTemplate and make its property IsVisible =False; How to get the Frames inside CollectionView's Item Template

 <Button x:Name="btn_Language" Clicked="btn_Language_Clicked" Text="English" FontAttributes="Bold" HorizontalOptions="Start"></Button><CollectionView ItemsSource="{Binding Secservices}" SelectionMode="Single" x:Name="CVSecServices">
                 <CollectionView.ItemsLayout>
                     <GridItemsLayout Orientation="Vertical" Span="2" VerticalItemSpacing="12" HorizontalItemSpacing="6"></GridItemsLayout>
                 </CollectionView.ItemsLayout>
                 <CollectionView.ItemTemplate>
                     <DataTemplate>
                         <Grid>
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="*"></ColumnDefinition>
                                    
                             </Grid.ColumnDefinitions>
                             <Frame x:Name="f_AService" HasShadow="True" BorderColor="LightBlue"  CornerRadius="7" BackgroundColor="#202755">
                             <Label  Text="{Binding serviceA}" HeightRequest="80" TextColor="White"  HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="30"></Label>
                                
                             </Frame>
                             <Frame x:Name="f_EService" IsVisible="false" HasShadow="True" BorderColor="LightBlue"  CornerRadius="7" BackgroundColor="#202755">
                             <Label  Text="{Binding serviceE}" HeightRequest="80" TextColor="White"  HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="30"></Label>
                                
                             </Frame>
    
                         </Grid>
            
                     </DataTemplate>
                 </CollectionView.ItemTemplate>
             </CollectionView>


dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

KyleWang-MSFT avatar image
0 Votes"
KyleWang-MSFT answered Rajesh-3729 commented

Hi Rajesh-3729,

Welcome to our Microsoft Q&A platform!

Try to use MVVM pattern in your project and set a binding on the "Frame".

First, you need to create a viewmodel class for the view and define a property "FrameIsVisible" which binding to the "IsVisible" property of "Frame".
MainPageViewModel:

 class MainPageViewModel: INotifyPropertyChanged
 {
     // ...
    
     public ICommand HideFrameCommand { get; }
    
     public MainPageViewModel()
     {
         // ...
         HideFrameCommand = new Xamarin.Forms.Command(HideFrame);
     }
     bool frameIsVisible = true;
   
     public bool FrameIsVisible
     {
         get => frameIsVisible;
         set
         {
             frameIsVisible = value;
             OnPropertyChanged("FrameIsVisible");
         }
     }
    
     public void HideFrame()
     {
         FrameIsVisible = false;
     }

     public event PropertyChangedEventHandler PropertyChanged;
     private void OnPropertyChanged(string propertyName)
     {
         PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
     }
 }

Then set the BindingContext for the Page.
MainPage.xaml.cs:

 public partial class MainPage : ContentPage
 {
     public MainPage()
     {
         InitializeComponent();
         this.BindingContext = new MainPageViewModel();
     }
 }

Now set the data binding for the Frame in XAML.

 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="Demo.MainPage"
              x:Name="contentPage">
    
     <StackLayout>
         <Button x:Name="btn_Language" Command="{Binding HideFrameCommand}"></Button>
         <CollectionView ...>
             ...
                         <Frame x:Name="f_EService" 
                                   IsVisible="{Binding Source={x:Reference contentPage}, Path=BindingContext.FrameIsVisible}" ...>
                             ...
                         </Frame>
             ...
         </CollectionView>
     </StackLayout>
    
 </ContentPage>

Regards,
Kyle


If the response is helpful, please click "Accept Answer" and upvote it.

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.

· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@Rajesh-3729 Does this answer help you? Any update on this thread?

0 Votes 0 ·

Yes.It helped.Thanks alot. But when i implemented, ia m facing some issue..I thought instead of frames it would be better if i can change binding of

<Label Text="{Binding serviceA}" HeightRequest="80" TextColor="White" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="30"></Label>

If i click button first time change binding of text to Text="{Binding serviceE}" and if i click again change the bing back to Text="{Binding serviceA}" . Is there any way to achieve this?

0 Votes 0 ·
MichaTelus-1602 avatar image
0 Votes"
MichaTelus-1602 answered

Hi @Rajesh-3729,

I would suggest to separate logic for showing frame from the UI implementation. You already have in ViewModel list Secservices that is binded to the CollectionView and in that case you can create a Command that will be bind to the button.
When user click on the button you can iterate Secservices to set bool value that will indicate if the frame should be visible. Then in the frame you can just bind IsVisible to this boolean value.
Here you can find how to use ICommand with button
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/data-binding/commanding


5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.