Access Controls outside the Picker's Viewmodal

[Jassim Rahma]

Hi,

I have the following in my XAML:

<Grid Grid.Row="1" Margin="10" x:Name="GridDate" Opacity="0" IsVisible="False">

    <Grid.RowDefinitions>

        <RowDefinition Height="*" />

    </Grid.RowDefinitions>

    <SyncfusionPicker:SfDatePicker Grid.Row="0" x:Name="PickerServiceDate" HeaderText="Select a Date" PickerMode="Dialog" PickerHeight="300" PickerWidth="300" ShowFooter="True">

        <SyncfusionPicker:SfDatePicker.FooterView>

            <Grid>

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="*" />

                    <ColumnDefinition Width="*" />

                </Grid.ColumnDefinitions>

                <SyncfusionButtons:SfButton Grid.Column="0" Margin="5" BackgroundColor="Blue" Text="Previous" CornerRadius="10" Command="{Binding Path=BindingContext.BackToServices}" />

                <SyncfusionButtons:SfButton Grid.Column="1" Margin="5" BackgroundColor="Red" Text="Next" CornerRadius="10" Command="{Binding Path=BindingContext.GoToTime}" />

            </Grid>

        </SyncfusionPicker:SfDatePicker.FooterView>

    </SyncfusionPicker:SfDatePicker>

</Grid>

<Grid Grid.Row="1" Margin="10" x:Name="GridTime" Opacity="0" IsVisible="False">

    <Grid.RowDefinitions>

        <RowDefinition Height="*" />

        <RowDefinition Height="Auto" />

    </Grid.RowDefinitions>

    <SyncfusionPicker:SfTimePicker Grid.Row="0" x:Name="PickerServiceTime" HeaderText="Select a Time" PickerMode="Dialog" PickerHeight="300" PickerWidth="300" />

    <Grid Grid.Row="1">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="*" />

            <ColumnDefinition Width="*" />

        </Grid.ColumnDefinitions>

        <SyncfusionButtons:SfButton x:Name="ButtonBackToDate" Grid.Column="0" Margin="5" BackgroundColor="Blue" Text="Previous" CornerRadius="10" Clicked="ButtonBackToDate_Clicked" />

        <SyncfusionButtons:SfButton x:Name="ButtonGoToXXXX" Grid.Column="1" Margin="5" BackgroundColor="Red" Text="Next" CornerRadius="10" Clicked="ButtonGoToXXXX_Clicked" />

    </Grid>

</Grid>

and the Command ViewModal is like this:

public class HomePageViewModel : INotifyPropertyChanged

{

    public Command<object> BackToServices { get; set; }

    public Command<object> GoToTime { get; set; }

    public HomePageViewModel()

    {

        BackToServices = new Command<object>(OnBackToServices);

        GoToTime = new Command<object>(OnGoToTime);

    }

    private void OnBackToServices(object obj)

    {

        App.Current.MainPage.DisplayAlert("Message", "Item Deleted :", "Ok");

    }

    private void OnGoToTime(object obj)

    {

        GridDate.FadeTo(0, 1000);

        GridDate.IsVisible = false;

        GridTime.IsVisible = true;

        GridTime.FadeTo(1, 1000);

        PickerServiceTime.IsOpen = true;

    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged(string name)

    {

        if (this.PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(name));

    }

}

How can I access the GridTime from the SfDatePicker's Command when the user clicks on the button (higlighted above)?

Thanks,

Jassim

[Ramya Soundar Rajan]

Hi Jassim, 

 

Greetings from Syncfusion. 

 

We have analyzed the code snippet and prepared a sample based on your requirement. Please find the sample from the below link, 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PIckerDemo_2_(1)-1468522520 

 

Please check with the above sample and let us know if you have any concern. 

 

Regards, 

Ramya S 

[Jassim Rahma]

Hi,

Is it possible to refer to the control is this case by name?

For example,  what if I want to do some animation for hiding the SfDatePicker and showing the SfTimePicker? and want to get the value of the SfDatePicker? so it will be easier to refer to it ByName?

Something like this:

DateTime selected_date = GridDate.SelectedDate;

GridDate.FadeTo(0, 1000);

GridDate.IsVisible = false;

GridTime.IsVisible = true;

GridTime.FadeTo(1, 1000);

PickerServiceTime.IsOpen = true;

[Ramya Soundar Rajan]

Hi Jassim, 

 

We would like to let you know that we could access the XAML UIElement only using the MainPage in ViewModel. Please find the below code snippet and sample, 

 

Code Snippet: 

 

 private void OnGoToTime(object obj) 

 { 

            Page.GridDate.FadeTo(0, 1000); 

            Page.GridDate.IsVisible = false; 

 

            Page.GridTime.IsVisible = true; 

            Page.GridTime.FadeTo(1, 1000); 

 

            Page.PickerServiceTime.IsOpen = true; 

 } 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PIckerDemo_3112056944 

 

Please check with the above sample and let us know if you have any concern. 

 

Regards, 

Ramya S