I am trying to simulate a XAML button with the use of a Frame (for border and background) and a Label (for button text). However, I need to add a TapGestureRecognizer for the simulated button to work when clicked. I am trying to do this within the confines of using ReactiveUI and MVVM, but can't seem to hook up the bindings properly.
I'm following this tutorial, which sets up the bindings in the XAML code behind as follows:
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class LoginPage : ContentPageBase<LoginViewModel>
{
public LoginPage()
{
InitializeComponent();
NavigationPage.SetHasNavigationBar(this, false);
}
protected override void OnAppearing()
{
base.OnAppearing();
this.WhenActivated(disposables =>
{
this.Bind(ViewModel, vm => vm.Username, c => c.UsernameEntry.Text)
.DisposeWith(disposables);
this.Bind(ViewModel, vm => vm.Password, c => c.PasswordEntry.Text)
.DisposeWith(disposables);
//this.OneWayBind(ViewModel, x => x.LoginCommand, x => x.LoginButton.LoginCommand)
// .DisposeWith(disposables);
this.OneWayBind(ViewModel, x => x.LoginCommand, x => x.SimulatedLoginButton.TapGestureCommandGoesHere)
.DisposeWith(disposables);
this.OneWayBind(ViewModel, x => x.IsLoading, x => x.LoginActivityIndicator.IsRunning)
.DisposeWith(disposables);
});
}
I've commented out the Button binding (above) and inserted the simulated Button code (which doesn't compile of course). The problem is the simulated Button (Frame) doesn't have a button.Command, and I'm not sure how to add the tapgesture command so that it's recognized.
I have seen/tried XAML with Frame.TapGestureRecognizer tag, but wasn't able to get the binding to work with XAML using this method.
Any ideas how I can get this working with an MVVM implementation?
In your XAML you have to have something like this:
<Frame>
<Frame.GestureRecognizers>
<TapGestureRecognizer x:Name="Gesture" />
</Frame.GestureRecognizers>
</Frame>
And in your code behind:
this.OneWayBind(ViewModel, x => x.LoginCommand, x => x.Gesture.Command)
.DisposeWith(disposables);
I hope this helps you
Related
I have two images to simulate the click on the button, but I want is when clicking the image and change call another screen. And the process does not happen because the application is stopping
<StackLayout>
<!-- Place new controls here -->
<Image Source="botaocadastrolivre.png">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnTapGestureRecognizerTapped"
NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
void OnTapGestureRecognizerTapped(object sender, EventArgs args)
{
tapCount++;
var imageSender = (Image)sender;
// watch the monkey go from color to black&white!
if (tapCount % 2 == 0)
{
imageSender.Source = "botaocadastrolivre.png";
}
else
{
imageSender.Source = "botaocadastroPresed.png";
Navigation.PushAsync(new Nova());
}
// Task.Delay(100)
//Navigation.PushAsync(new Nova());
}
Go to your App.xaml.cs file, find the line that says something like:
MainPage = new MainPage();
and change it into:
MainPage = new NavigationPage(new MainPage());
This will wrap your page into a navigation page and then the Navigation object will know how to navigate from one page to the other.
It might be wise to read up on navigation concepts in Xamarin.Forms: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/
For Windows 10 UWP app I have such XAML structure:
<ScrollViewer>
<StackPanel>
<Slider />
<Slider />
...
</StackPanel>
</ScrollViewer>
I would like to create such user experience:
When the user begins horizontal swipe gesture, the slider under the touch should receive the input and start changing its value, while vertical scrolling is completely disabled (even when the user continue draw circle motions)
When the user begins vertical swipe gesture, the scrollviewer should receive the input and start scrolling vertically, while sliders under the touch should stay intact (even when the user continue draw circle motions).
Is it possible to implement this behavior in pure XAML? I think I have tried all possible combinations of properties related to scroll... No luck. Any idea anybody?
After testing on mobile emulator with OS version 10586, I found that when the ScrollViewer is vertically scrolled, it won't effect the Slider inside even if I draw circle, and when the Slider is swiped horizontally, only when its value reaches the max value, the vertical scrolling of the ScrollViewer will be effected if I draw circle.
Is it possible to implement this behavior in pure XAML?
Yes, it is possible.
When the user begins horizontal swipe gesture, the slider under the touch should receive the input and start changing its value, while vertical scrolling is completely disabled (even when the user continue draw circle motions)
You can install the Microsoft.Xaml.Behaviors.Uwp.Managed package in your project, then use its DataTriggerBehavior for example like this:
<ScrollViewer x:Name="scrollViewer" HorizontalScrollMode="Disabled" VerticalScrollMode="Auto">
<Interactivity:Interaction.Behaviors>
<Core:DataTriggerBehavior Binding="{Binding ElementName=slider1,Path=FocusState}" ComparisonCondition="NotEqual" Value="Unfocused">
<Core:ChangePropertyAction PropertyName="VerticalScrollMode" Value="Disabled" />
</Core:DataTriggerBehavior>
<Core:DataTriggerBehavior Binding="{Binding ElementName=slider1,Path=FocusState}" ComparisonCondition="Equal" Value="Unfocused">
<Core:ChangePropertyAction PropertyName="VerticalScrollMode" Value="Auto" />
</Core:DataTriggerBehavior>
<Core:DataTriggerBehavior Binding="{Binding ElementName=slider2,Path=FocusState}" ComparisonCondition="NotEqual" Value="Unfocused">
<Core:ChangePropertyAction PropertyName="VerticalScrollMode" Value="Disabled" />
</Core:DataTriggerBehavior>
<Core:DataTriggerBehavior Binding="{Binding ElementName=slider2,Path=FocusState}" ComparisonCondition="Equal" Value="Unfocused">
<Core:ChangePropertyAction PropertyName="VerticalScrollMode" Value="Auto" />
</Core:DataTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<StackPanel Height="1300">
<Slider Margin="0,200" x:Name="slider1" />
<Slider x:Name="slider2" />
</StackPanel>
</ScrollViewer>
When using this package in xaml, you will need to declare it in the header for example like this:
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
xmlns:Media="using:Microsoft.Xaml.Interactions.Media"
As you can see in my code, I compared FocusState property of the Slider, if its value is Unfocused, then the vertical scroll mode of the ScrollViewer is enabled. So when user interact with this layout, after swiping on the Slider, he will need to click on the blank part to make the Slider lost focus first, then the vertical scroll mode can be enabled.
When the user begins vertical swipe gesture, the scrollviewer should receive the input and start scrolling vertically, while sliders under the touch should stay intact (even when the user continue draw circle motions).
Base on my test, I think this gesture is ensured by default, so I didn't code for this. If it is not by your side, please leave a comment and provide your device type and OS version so can I have a test.
I have a very similar issue and was able to resolve it with the following custom control. This is a CommandSlider that also allows you to send commands like a button after the sliding is complete (not what you need) but the ScrollViewer manipulation code is in there also. See if this helps your situation. It allows you to do all the work in complete XAML like you've requested.
NOTE: The slider must have ManipulationMode="TranslateX" or "TranslateY"depending on the orientation for this to work also.
public sealed class CommandSlider : Slider
{
public CommandSlider()
{
IsThumbToolTipEnabled = false;
PointerCaptureLost += (s, e) => (Command?.CanExecute(CommandParameter)).GetValueOrDefault().Switch(() => Command?.Execute(CommandParameter));
Loaded += (s, e) => ParentScrollViewer = this.GetParent<ScrollViewer>();
}
private ScrollViewer ParentScrollViewer { get; set; }
protected override void OnManipulationDelta(ManipulationDeltaRoutedEventArgs e)
{
base.OnManipulationDelta(e);
if (ParentScrollViewer != null)
{
var scrollX = Orientation == Orientation.Vertical
? e.Position.X * -1 + ParentScrollViewer.HorizontalOffset
: ParentScrollViewer.HorizontalOffset;
var scrollY = Orientation == Orientation.Horizontal
? e.Position.Y * -1 + ParentScrollViewer.VerticalOffset
: ParentScrollViewer.VerticalOffset;
var zoom = ParentScrollViewer.ZoomFactor;
ParentScrollViewer.ChangeView(scrollX, scrollY, zoom);
}
}
public object CommandParameter
{
get => GetValue(CommandParameterProperty);
set => SetValue(CommandParameterProperty, value);
}
public static readonly DependencyProperty CommandParameterProperty =
DependencyProperty.Register(nameof(CommandParameter), typeof(object), typeof(CommandSlider), new PropertyMetadata(null));
public ICommand Command
{
get => (ICommand)GetValue(CommandProperty);
set => SetValue(CommandProperty, value);
}
public static readonly DependencyProperty CommandProperty =
DependencyProperty.Register(nameof(Command), typeof(ICommand), typeof(CommandSlider), new PropertyMetadata(null));
public double SourceValue
{
get => (double)GetValue(SourceValueProperty);
set => SetValue(SourceValueProperty, value);
}
public static readonly DependencyProperty SourceValueProperty =
DependencyProperty.Register(nameof(SourceValue), typeof(double), typeof(CommandSlider), new PropertyMetadata(0d,
(s, e) => (s as CommandSlider).Value = (double)e.NewValue));
}
Custom Extension Method
public static class XAMLExtensions
{
public static T GetParent<T>(this DependencyObject dependencyObject) where T : DependencyObject
{
var parentDependencyObject = VisualTreeHelper.GetParent(dependencyObject);
switch (parentDependencyObject)
{
case null:
return null;
case T parent:
return parent;
default:
return GetParent<T>(parentDependencyObject);
}
}
}
I'm extending a control to be able to reuse it across my current Xamarin project. As part of this control, I need to create a DataTemplate programmatically. I have this part figured out and it works ok.
The DataTemplate has a Label in it. I need to bind the Label's BindingContext property to {Binding Source}. I need to bind the Label's Text property to {Binding Path=Name}.
This works in XAML, but I don't want to have to copy it to a million different places in the code base.
<dxGrid:TemplateColumn FieldName="MyPropertyName"
Caption="MyColumn">
<dxGrid:TemplateColumn.DisplayTemplate>
<DataTemplate>
<Label BindingContext="{Binding Source}"
Text="{Binding Source, Path=MyPropertyName}" />
</DataTemplate>
</dxGrid:TemplateColumn.DisplayTemplate>
My extended control looks like this right now:
public class MyColumn : TemplateColumn
{
public MyColumn()
{
DataTemplate displayTemplate = new DataTemplate(() =>
{
BindingBase textBinding = new Binding(FieldName);
Label label = new Label();
// TODO: Bind BindingContextProperty to {Binding Source}
//label.SetBinding(BindingContextProperty, binding);
label.SetBinding(Label.TextProperty, textBinding);
return new ViewCell
{
View = label
};
});
DisplayTemplate = displayTemplate;
}
}
I'm getting hung up in the binding because I'm not sure how to do the equivalent of {Binding Source} in code. Any help would be appreciated.
#Eugene - Thanks for the response. Unfortunately this does not work and binding to "Source" like that throws a Null Reference Exception. I made another pass at it this morning and got it working this way:
public MyColumn()
{
DataTemplate displayTemplate = new DataTemplate(() =>
{
Grid grid = new Grid();
grid.SetBinding(Grid.BindingContextProperty, "Source");
Label label = new Label();
label.SetBinding(Label.TextProperty,FieldName);
grid.Children.Add(label);
return grid;
});
this.DisplayTemplate = displayTemplate;
}
It's simple, use name of property
label.SetBinding(BindingContextProperty, "Source");
I realised that storyboard only working with silverlight Wp 8.1 apps. So what about non-silverlight? I've want to make an animation of smooth appearing elements of listview after page transition. How can i make it? I check VisualStateGroup, but to make animation like that i should make a code behind. Is it possible to make only by XAML?
If you want to use XAML you can use the built in transitions which you can choose from already predefined ones. One drawback is that you can't create your own transitions this way.
To change the item transitions change the ItemContainerTransitions property on your ListView:
<ListView x:Name="MyListView">
<ListView.ItemContainerTransitions>
<TransitionCollection>
<!--<ContentThemeTransition HorizontalOffset="0"/>-->
<!--<EntranceThemeTransition />-->
<!-- <AddDeleteThemeTransition /> -->
<!-- <RepositionThemeTransition/> -->
<!-- <ReorderThemeTransition /> -->
<!-- <PopupThemeTransition/> -->
<!-- <EdgeUIThemeTransition Edge="Top"/> -->
</TransitionCollection>
</ListView.ItemContainerTransitions>
</ListView>
You can combine them if you want. Just uncomment any of the above code and use which suits you best.
You can create custom item animations when you extend ListView and override the GetContainerForItemOverride or PrepareContainerForItemOverride methods. You can use XAML if you want for example a Storyboard defined in as a StaticResource. Here is an example:
public class MyListView : ListView
{
protected override DependencyObject GetContainerForItemOverride()
{
var container = base.GetContainerForItemOverride();
var da = new DoubleAnimation();
// init da...
var sb = new Storyboard();
// initi sb with container
sb.Begin();
return container;
}
protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
{
base.PrepareContainerForItemOverride(element, item);
var da = new DoubleAnimation();
// init da...
var sb = new Storyboard();
// initi sb with element
sb.Begin();
}
}
I have created a content dialog for my UWP app which involves a centralized UI Element and a surrounding blank area.But content dialog does not have a property like "IsLightDismissEnabled" to close the dialog on click on an area except the UIELEMENT area.How can I achieve it?
In the code behind your content dialog:
public sealed partial class CustomDialog : ContentDialog
{
public CustomDialog()
{
this.InitializeComponent();
Boolean isHide;
Window.Current.CoreWindow.PointerPressed += (s, e) =>
{
if (isHide)
Hide();
};
PointerExited += (s, e) => isHide = true;
PointerEntered += (s, e) => isHide = false;
}
}
There are few options that I can think of:
Use popup (like uruk suggested) and add your controls inside, create the popup at desired location (you could also use binding here if you want to show the popup at location depending on user input at runtime Popup has HorizontalOffset and VerticalOffset properties)
Create a parent view that is taking up the whole page but is transparent, then add your UI elements at the center and attach tap/click events to the transparent view. These events are going to just close remove/collapse the transparent view which contains the other elements inside (Either by binding of values or by setting the values to the UI elements).
Example or popup usage:
<Popup x:Name="MenuPopUp"
IsLightDismissEnabled="True"
HorizontalOffset="{Binding HorizontalOffset}"
VerticalOffset="{Binding VerticalOffset}"
IsOpen="{Binding IsOpen, Mode=TwoWay}">
<Grid>
YOUR ELEMENTS HERE
</Grid>
</Popup>
Content dialog is a modal dialog. Why don't you use a Popup or a child class of it? It's non-modal, and it already has the IsLightDismissEnabled property you just mentioned.
<Popup x:Name="MenuPopUp"
IsLightDismissEnabled="True"
LostFocus="MenuPopUp_LostFocus"/>
In CS
private void MenuPopUp_LostFocus(object sender, RoutedEventArgs e)
{
MenuPopup.IsOpen = false;
}