I am using Xamarin forms Slider control in portable project.This is correctly showing minimum, maximum values.But i want to show tick marks in this control so that user can know number of steps.
This solutions supports Android as well as ios.
Below is the control I am using:-
<Slider x:Name="slider" HorizontalOptions="FillAndExpand"
Maximum="{Binding Maximum}"
Minimum="{Binding Minimum}" />
Can someone help me with links or code snippets ?
The slider which comes with Xamarin.Forms doesn't have any tick marks.
Basically you have three options:
1) Make a custom Xamarin Forms View with a grid that holds the slider and several BoxViews forming your tick marks and expose the needed values as BindableProperties.
Pro: Can be done quite fast, no need for custom renderers
Con: Not the most elegant solution
2) Make a custom renderer, rendering the slider the way you want it.
Pro: Better solution, since you only need to add your custom slider to the view
Con: You need to create a custom renderer for each target platform handling the drawing of the tick marks
3) Look for a suitable component or a nuGet Package that contains a slider suitable for your needs
So I finally ended with this solution for Android:-
protected override void OnElementChanged(ElementChangedEventArgs<Slider> e)
{
base.OnElementChanged(e);
if (this.Control != null)
{
var slider = (MySlider)this.Element;
this.Control.TickMark = Resources.GetDrawable(Resource.Drawable.Icon);//works by setting whole slider image
//this.Control.SetThumb(Resources.GetDrawable(Resource.Drawable.Icon));//works by setting thumbnail movable image
Control.Max = (int)(slider.Maximum - slider.Minimum);//shows RHS value plus one
Control.Progress = (int)slider.Value;
}
}
You can try this for xamarin forms slider with ticks
https://xamarinexperience.blogspot.com/2019/03/how-to-add-tick-marks-on-sliders-in.html
Related
I have a MediaPlayerElement that plays a video automatically and I want the user to be only able to seek in the video and press pause/stop/play.
It looks like I have to set AreTransportControlsEnabled to true and then hide all the controls I don't want one by one as per default all controls are visible.
So I did this:
<MediaPlayerElement x:Name="mediaPlayer" AreTransportControlsEnabled="True">
<MediaPlayerElement.TransportControls>
<MediaTransportControls
ShowAndHideAutomatically="True"
IsFullWindowButtonVisible="False"
IsNextTrackButtonVisible="False"
IsPreviousTrackButtonVisible="False"
IsVolumeButtonVisible="False"
IsZoomButtonVisible="False"
IsFastForwardButtonVisible="False"
IsFastRewindButtonVisible="False"
IsPlaybackRateButtonVisible="False"
IsRepeatButtonVisible="False"
IsSkipBackwardButtonVisible="False"
IsSkipForwardButtonVisible="False"
Windows10version1803:IsCompactOverlayButtonVisible="False"
IsSeekBarVisible="True"
IsSeekEnabled="True"
IsStopButtonVisible="True"
/>
</MediaPlayerElement.TransportControls>
</MediaPlayerElement>
For my taste this looks really cumbersome. Isn't there are setting like "hideall=true" and then I could only enable those I want. And for example, there seems to be no way to also hide the "cast to device" button, so with the current approach the user would always see this button, what I don't really like:
Any ideas?
Removing "CastButton" from generic.xaml didn't work out for me. I found a solution for removing Cast to Device button in another forum :
https://social.msdn.microsoft.com/Forums/windows/en-US/e3307864-f194-4197-9f0d-bb2b8cd7228c/uwp-custom-media-transport-controls-hide-custom-buttons
Here is the working code for removing "CastButton" AppBarButton from Mediaplayer at runtime.
public class CustomMediaTransportControls: MediaTransportControls
{
protected override void OnApplyTemplate()
{
AppBarButton CastButton = GetTemplateChild("CastButton") as AppBarButton;
var MediaControlsCommandBar = GetTemplateChild("MediaControlsCommandBar") as CommandBar;
MediaControlsCommandBar.PrimaryCommands.Remove(CastButton);
base.OnApplyTemplate();
}
}
You can create your own media transport controls by setting AreTransportControlsEnabled to false, and using the Play and Pause methods on MediaPlayer.
For more info and examples, see Create custom transport controls.
The official Media transport controls sample will be a good start.
For example, in the official sample, if you do not want to show the 'cast to device' button, you could directly remove the AppBarButton named as CastButton in the generic.xaml.
im using Xamarin with MvvmCross.
Ive done a FragmentDialog with a recyclerView inside, the list is populated via bindings on xml file, so i have no adapter and i should keep it this way.
If im not wrong, theres no built in way to make the recyclerView take only the size needed for its content, this should not be a problem, but in this case i need the list to start from bottom...
So i did this (its a custom fullscreen dialog) :
MvxRecyclerView list = Dialog.FindViewById<MvxRecyclerView>(Resource.Id.recyclerview);
list.LayoutChange += List_LayoutChange;
Then in layoutChange
private void List_LayoutChange(object sender, View.LayoutChangeEventArgs e)
{
MvxRecyclerView list = Dialog.FindViewById<MvxRecyclerView>(Resource.Id.recyclerview);
int itemHeight = list.GetChildAt(0).Height;
if (itemHeight != 0)
{
ViewGroup.LayoutParams prms = list.LayoutParameters;
prms.Height = itemHeight * list.GetAdapter().ItemCount;
list.LayoutParameters = prms;
list.LayoutChange -= List_LayoutChange;
list.RequestLayout();
}
}
That was working fine, the list get exactly the height needed and the list looks like it starts from bottom.
Now the client tell me that he doesnt like the fullscreen dialog and wants the status bar, i think that should be easy, just to remove this line at the dialog creation right?
dialog.Window.AddFlags(WindowManagerFlags.Fullscreen);
But looks like its not that easy, when the dialog its not fullscreen the layoutParams change seems to have no effect, it just dont do nothing.
My method is being called and i get the right item height, it just dont change the recyclerview height.
Notice that setting fullscreen at creation and clearing the flag after the recyclerview params change works
So looks like it only works during fullscreen mode.
Can someone throw some light at this?
Thanks in advance.
As you said, RecyclerView was not aware of its size.
Since last update to the support lib, it is !
http://android-developers.blogspot.fr/2016/02/android-support-library-232.html
The RecyclerView widget provides an advanced and flexible base for creating lists and grids as well as supporting animations. This release brings an exciting new feature to the LayoutManager API: auto-measurement! This allows a RecyclerView to size itself based on the size of its contents. This means that previously unavailable scenarios, such as using WRAP_CONTENT for a dimension of the RecyclerView, are now possible. You’ll find all built in LayoutManagers now support auto-measurement.
I would suggest to wait for the Xamarin wrapped lib (there is already a beta https://www.nuget.org/packages/Xamarin.Android.Support.v4/23.2.0-beta1)
In my application I use a ContentControl like this:
<ContentControl x:Name="Content">
<ContentControl.ContentTransitions>
<NavigationThemeTransition />
</ContentControl.ContentTransitions>
</ContentControl>
The problem is that the NavigationThemeTransition is not triggered when changing the Content property of the ContentControl. I think this is because it is only triggered in a Frame control when calling the Navigate() method.
I need this transition to be run when the Content of the ContentControl changes...
Is there a way to trigger the navigation-in and navigation-out animation manually?
Or is there some visual state to which the control can got to run the animation?
To achieve this You would be needed to have Custom Transition for the Control shown here custom transitions and for implementing Transition Effects in coding you can have Reference from here Using Page Transitions via Code
You could try to use a Frame control instead of a ContentControl. If that doesn't work - you'd need to create a custom control that has a Frame in its template and when its content change happens - it would navigate to a new page to display the new content.
I haven't seen a way to trigger the built-in transitions other than invoking an action that these transitions were created for. Personally - I would rather create my own transition than hack around to invoke the built-in one. You should be able to create one that looks exactly the same as the built-in one.
with the WP7 SDK it was possible to use a BlocksPan to prevent a Panorama control from sliding e.g. if you use a horizontal Slider control on it. This does not work anymore with the WP8 sdk. Microsoft says in there guideline: Just do not use a slider on the panorama. But our app (previously designed for wp7) does need it.
Is there any other way for preventing the panorama from sliding? Will our app fail the store verification if we do it regardless to the guidelines?
Please help ;)
best regards,
Chris
Actually is quite simple you should subscribe to the ManipulationStarted event of the panorama control
m_Panorama.ManipulationStarted += m_Panorama_ManipulationStarted;
void m_Panorama_ManipulationStarted(object sender, System.Windows.Input.ManipulationStartedEventArgs e)
{
m_Panorama.IsHitTestVisible = false;
}
maybe you will need and just one more boolean variable
There are lots of tips around Drag and Drop on the Windows Phone, but I am currently unable to put everything together. So I hope you can give me some advice to reach my goal: Display a scrollable list of items with good reordering and scroll experience.
I use a StackPanel to present a vertical list of controls. Let's say these controls are CheckBoxes displaying some information (in reality I created a bit more complex custom controls). There can be lots of items so I put a ScrollViewer around the StackPanel so the user can scroll up and down. But now I also want to give the user the opportunity to reorder the controls in the list via Drag and Drop.
Several things are unclear for me:
How do I enable Drag and Drop functionality in the StackPanel? (So it looks smooth and the items change position in an animated, nice to look at, way; they should keep making space for the item-to-be-inserted while the user drags it around.)
How can I achieve that the user can vertically scroll the list while still being able to Drag and Drop items? (I think there could be a special "drag spot" on every item the user has to drag at, so I can differentiate between dragging and scrolling.)
How do I auto-scroll the list when the user drags one item to the upper or lower border if the list is bigger than the screen?
Is this even the right combination of controls? Is there a better one? (But I don't want to calculate item positions manually.)
I'd love to hear your ideas on this topic, any help is greatly appreciated!
Hi you could check this out, might be what you're looking for:
http://blogs.msdn.com/b/jasongin/archive/2011/01/03/wp7-reorderlistbox-improvements-rearrange-animations-and-more.aspx
You can refer this link. This has a nice reordering of listbox with vertical scrolling. Hold the item to be dragged for 1 min and start dragging.
The answer you seek is the ReorderListBox control developed by Jason Ginchereau.
I'm going to show a quick implementation of it, but if you want a complete demo, then download the source from CodePlex here.
First, install the control from Nuget:
Tools >>> Library Package Manager >>> Manage NuGet Packages for Solution...
Search for ReorderListBox, and install the one created by Jason Ginchereau
Then, in the XAML of your app's start page (ie. MainPage.xaml), copy and paste the highlighted assembly reference into the phone:PhoneApplicationPage tag at the top where the other assembly references are located.
xmlns:rlb="clr-namespace:ReorderListBox;assembly=ReorderListBox"
Next, drop this into your XAML page
<rlb:ReorderListBox
x:Name="reorderListBox"
Grid.Row="2"
Margin="12,0,12,12"
IsReorderEnabled="True">
<rlb:ReorderListBox.ItemTemplate>
<DataTemplate>
<TextBlock
Margin="12,4,12,4"
FontSize="36"
Text="{Binding}" />
</DataTemplate>
</rlb:ReorderListBox.ItemTemplate>
</rlb:ReorderListBox>
Finally, in your code-behind (ie MainPage.xaml.cs), you want to define an ObservableCollection with your list of data and assign it to the reorderListBox.ItemsSource. You may also want to save the state of the list after it has been resorted for the next time the application is opened. Here's an example:
public partial class MainPage : PhoneApplicationPage
{
public ObservableCollection<string> SampleDataList { get; set; }
// Constructor
public MainPage()
{
InitializeComponent();
if (IsolatedStorageSettings.ApplicationSettings.Contains("SampleDataList"))
{
SampleDataList = IsolatedStorageSettings.ApplicationSettings["SampleDataList"] as ObservableCollection<string>;
}
else
{
SampleDataList = new ObservableCollection<string>();
SampleDataList.Add("Zero");
SampleDataList.Add("One");
SampleDataList.Add("Two");
SampleDataList.Add("Three");
SampleDataList.Add("Four");
SampleDataList.Add("Five");
SampleDataList.Add("Six");
SampleDataList.Add("Seven");
SampleDataList.Add("Eight");
SampleDataList.Add("Nine");
SampleDataList.Add("Ten");
SampleDataList.Add("Eleven");
SampleDataList.Add("Twelve");
SampleDataList.Add("Thirteen");
SampleDataList.Add("Fourteen");
}
reorderListBox.ItemsSource = SampleDataList;
}
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
base.OnNavigatedFrom(e);
IsolatedStorageSettings.ApplicationSettings["SampleDataList"] = SampleDataList;
IsolatedStorageSettings.ApplicationSettings.Save();
}
}