Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,014 questions
Hello,
Welcome to our Microsoft Q&A platform!
By the way how can I make the view in the VM ,I forgot to mention that I am using MVVM
If you use MVVM. We should put the controls from Dare page and Truth page to the <FlipView.BackView>, then use IsVisible to control it like following xaml.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:app125="clr-namespace:App129"
x:Class="App129.MainPage">
<StackLayout>
<StackLayout BackgroundColor="Blue">
<StackLayout HorizontalOptions="FillAndExpand" HeightRequest="200">
<Label Text="Number of cards" IsVisible="{Binding IsShowText}" TextColor="White" FontSize="Large" HorizontalOptions="Center"/>
<Label Text="40" IsVisible="{Binding IsShowText}" FontSize="Header" TextColor="White" HorizontalOptions="Center"/>
</StackLayout>
<app125:FlipView x:Name="FlipView1" HeightRequest="400" HorizontalOptions="Center" IsFlipped="{Binding IsViewFlipped}" >
<app125:FlipView.FrontView >
<Frame
HeightRequest="400"
Margin="10"
Padding="10,0,10,10"
BackgroundColor="White"
CornerRadius="10"
HasShadow="True">
<StackLayout VerticalOptions="Center">
<ImageButton
Command="{Binding TruthCommand}"
HorizontalOptions="Center"
Source="Truth.png"/>
<Label
FontAttributes="Bold"
FontSize="Large"
HorizontalTextAlignment="Center"
Text="Truth"
TextColor="Blue"
VerticalTextAlignment="Center" />
<ImageButton
Command="{Binding DareCommand}"
HorizontalOptions="Center"
Source="dare.png"/>
<Label
FontAttributes="Bold"
FontSize="Large"
HorizontalTextAlignment="Center"
Text="Dare"
TextColor="Blue"
VerticalTextAlignment="Center" />
</StackLayout>
</Frame>
</app125:FlipView.FrontView>
<app125:FlipView.BackView>
<Frame
HeightRequest="400"
Margin="10"
Padding="10,0,10,10"
BackgroundColor="White"
CornerRadius="10"
HasShadow="True">
<StackLayout x:Name="mysl">
<Label IsVisible="{Binding IsTruthShow}" Text="Verdad" FontSize="50" TextColor="Blue" HorizontalOptions="Center"/>
<Label IsVisible="{Binding IsTruthShow}" Text="this is verdad text" FontSize="20" TextColor="Blue" HorizontalOptions="Center"/>
<Editor IsVisible="{Binding IsTruthShow}" Placeholder="Entry your answer" PlaceholderColor="Olive" HeightRequest="200" HorizontalOptions="FillAndExpand" />
<Button IsVisible="{Binding IsTruthShow}" Command="{Binding BackCommand}" Text="send" CornerRadius="30" BackgroundColor="Purple"></Button>
<Label IsVisible="{Binding IsDareShow}" Text="Dare" FontSize="50" TextColor="Blue" HorizontalOptions="Center"/>
<Label IsVisible="{Binding IsDareShow}" Text="this is dare text" FontSize="20" TextColor="Blue" HorizontalOptions="Center"/>
<Button IsVisible="{Binding IsDareShow}" Command="{Binding BackCommand}" Text="Alla voy" CornerRadius="30" BackgroundColor="Purple" ></Button>
<Button IsVisible="{Binding IsDareShow}" Text="Mas tarde" CornerRadius="30" BackgroundColor="Purple" ></Button>
<Button IsVisible="{Binding IsDareShow}" Text="Ni de cona" CornerRadius="30" BackgroundColor="Purple" ></Button>
</StackLayout>
</Frame>
</app125:FlipView.BackView>
</app125:FlipView>
</StackLayout>
</StackLayout>
</ContentPage>
Here is layout's background code.
public MainPage()
{
InitializeComponent();
this.BindingContext = new MyViewModel();
}
Here is my ViewMode.
public class MyViewModel : INotifyPropertyChanged
{
private bool _isViewFlippedg = false;
public bool IsViewFlipped
{
get { return _isViewFlippedg; }
set
{
_isViewFlippedg = value;
IsShowText =! _isViewFlippedg;
OnPropertyChanged(nameof(IsViewFlipped));
}
}
private bool _isShowText = true;
public bool IsShowText
{
get { return _isShowText; }
set
{
_isShowText = value;
OnPropertyChanged(nameof(IsShowText));
}
}
private bool _isDareShow = false;
public bool IsDareShow
{
get { return _isDareShow; }
set
{
_isDareShow = value;
OnPropertyChanged(nameof(IsDareShow));
}
}
private bool _isTruthShow = false;
public bool IsTruthShow
{
get { return _isTruthShow; }
set
{
_isTruthShow = value;
OnPropertyChanged(nameof(IsTruthShow));
}
}
public ICommand TruthCommand { protected set; get; }
public ICommand DareCommand { protected set; get; }
public ICommand BackCommand { protected set; get; }
public MyViewModel(){
TruthCommand = new Command(() =>
{
IsViewFlipped = !IsViewFlipped;
IsDareShow = false;
IsTruthShow = true;
});
DareCommand = new Command(() =>
{
IsViewFlipped = !IsViewFlipped;
IsTruthShow = false;
IsDareShow = true;
});
BackCommand = new Command(() =>
{
IsViewFlipped = !IsViewFlipped;
});
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
I notifice you use FFimageLoad, it achieve click command by GestureRecognizers like following xaml. I
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ViewImageCommand}" />
</ffimageloading:CachedImage.GestureRecognizers>
Best Regards,
Leon Lu
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.
