Why is there a jitter on Editor resizing on a new line?
<StackLayout>
<Editor AutoSize="TextChanges"/>
</StackLayout>
Also the case when I try manually resize it inside OnTextChanged (previously removing AutoSize="TextChanges"). It might be eliminated by waiting for a while:
protected override void OnTextChanged(string oldValue, string newValue)
{
base.OnTextChanged(oldValue, newValue);
HeightRequest += 10;
System.Threading.Thread.Sleep(100);
}
Also there is no such problem for a regular UWP project using corresponding TextBox class with AcceptsReturn="True".
Smooth textbox resizing in regular UWP project:
Jittering editor from xamarin UWP project:
How can I fix this?
Additional:
With AutoSize and Sleep (HeightRequest removed):
Related
.net maui app.
Dragging value element along the slider bar does not work if the the slider put into CarouselView's template like this:
<CarouselView ItemsSource="{Binding Items}">
<CarouselView.ItemTemplate>
<DataTemplate>
<Slider Minimum="0" Maximum="30" WidthRequest="200" />
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
CarouselView takes over the swipe event for scrolling through the items, and Slider does not get the event (DragStarted is not even called). You can actually click along the slider bar to change its value, so it's not completely frozen, but not how it's supposed to work. Drag & drop is main way user deal with slider control.
Could anyone advise any workaround? I want users to be able scroll through carousel view items also. It's just if they swipe inside the control, event should not handed over to its parent container, if it's possible to do so.
If I add it outside of the corouselview, combine both in Grid and use padding to align slider inside the corouselview, it works as expected, but I need to add lots of additional code, calculate the desirable location and redirect all bindings, which ends up to be an awkward workaround.
At first, I don't suggest you use the slider in the CarouselView. Becasue you want the same behavior has two effects. There is a conflict between them.
But for the android, you can use the custom handler to deal with the swipe event.
Put the Handler class in the /Platform/Android:
public class MySliderHander : SliderHandler
{
protected override void ConnectHandler(SeekBar platformView)
{
base.ConnectHandler(platformView);
platformView.SetOnTouchListener(new SliderListener());
// the listener will make the slider deal with the swip event not the CarouselView.
}
}
Put the SliderListener class in the /Platform/Android
public class SliderListener : Java.Lang.Object, IOnTouchListener
{
public bool OnTouch(global::Android.Views.View v, MotionEvent e)
{
if (e.Action == MotionEventActions.Down || e.Action == MotionEventActions.Move)
{
v.Parent.RequestDisallowInterceptTouchEvent(true);
}
else
{
v.Parent.RequestDisallowInterceptTouchEvent(false);
}
return false;
}
}
And in the MauiProgram.cs:
builder
.UseMauiApp<App>()
.ConfigureMauiHandlers(handlers => {
#if ANDROID
handlers.AddHandler(typeof(Slider), typeof(YourProjectName.Platforms.Android.MySliderHander));
#endif
})
In addition, the Slider's height is same as the CarouselView. So you can use a frame to contain the Slider and swipe the CarouselView by swiping the frame.
I'm struggling to create the UI I have in my head and to date have been fairly unsuccessful.
I'm trying to create a Main Page which hosts my NavView and inside of by NavView I wish to have a command bar which will control which NavViewItems are visible. I have created a quick image of what I'm trying to achieve.
In my example I have the home button in the command bar activated which displays
Nav Item Header
Navigation Item 1
etc...
I want to be able to click documents and have the indicator switch to documents and hide the navigation items corresponding to Home and show the navigation items corresponding to Documents.
Finally, I want the command bar to collapse when the NavView pane is compact but the user should be able to click the Command bar button and expand the command bar to change between Home, Documents etc.
Really looking for any help/advice for the best places to start.
I'm still learning the UWP controls and Xaml.
I think you should use a SplitView instead of NavigationView outside, and then,
inside the Pane of the Splitview, use a NavigationView with some trick to achieve what you desired.
Key points are:
Keep the NavigationView's PaneDisplayMode LeftComact
don't use the PaneToggleButton in the NavigationView to prevent
user from changing PaneDisplayMode by clicking it, use a custom one instead to open and close pane.
Change the PaneDisplayMode of the NavigationView to Top when
pane opens, and backt to LeftComact again when pane closes.
Here is what I have achieved with NavigationView inside Splitview.Pane:
You can decorate it and make it more visually satisfying, like adding an AutoSuggestBox or Setting button, but that's the basic. Btw, don't use the NavigationView's Setting button, as I have seen it behaving strangely here.
XAML:
<SplitView
x:Name="Split"
DisplayMode="CompactInline"
CompactPaneLength="40">
<SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<Button
Click="Button_Click">
<SymbolIcon Symbol="List"/>
</Button>
<NavigationView
Grid.Row="1"
x:Name="NavView"
PaneDisplayMode="LeftCompact"
CompactPaneLength="{x:Bind Split.CompactPaneLength}"
IsBackButtonVisible="Collapsed"
IsPaneToggleButtonVisible="False"
IsSettingsVisible="False"
SelectionChanged="NavView_SelectionChanged">
<NavigationView.MenuItems>
<NavigationViewItem x:Name="HomeItem" Icon="Home" VerticalAlignment="Stretch"/>
<NavigationViewItem x:Name="DocumentItem" Icon="Document" />
<NavigationViewItem x:Name="PeopleItem" Icon="People" />
</NavigationView.MenuItems>
<ContentControl>
<ListView
x:Name="ItemList"/>
</ContentControl>
</NavigationView>
</Grid>
</SplitView.Pane>
</SplitView>
Code behind:
public sealed partial class MainPage : Page
{
public List<string> HomeItemList;
public List<string> DocumentItemList;
public List<string> PeopleItemList;
public MainPage()
{
InitializeComponent();
HomeItemList = new List<string> { "HomeItem1", "HomeItem2", "HomeItem3" };
DocumentItemList = new List<string> { "DocumentItem1", "DocumentItem2", "DocumentItem3" };
PeopleItemList = new List<string> { "PeopleItem1", "PeopleItem2", "PeopleItem3" };
}
private void Button_Click(object sender, RoutedEventArgs e)
{
Split.IsPaneOpen = !Split.IsPaneOpen;
if (Split.IsPaneOpen)
{
NavView.PaneDisplayMode = NavigationViewPaneDisplayMode.Top;
}
else NavView.PaneDisplayMode = NavigationViewPaneDisplayMode.LeftCompact;
}
private void NavView_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
{
if (args.SelectedItem != null)
{
Split.IsPaneOpen = true;
NavView.PaneDisplayMode = NavigationViewPaneDisplayMode.Top;
if (sender.SelectedItem == HomeItem)
ItemList.ItemsSource = HomeItemList;
else if(sender.SelectedItem == DocumentItem)
ItemList.ItemsSource = DocumentItemList;
else if(sender.SelectedItem == PeopleItem)
ItemList.ItemsSource = PeopleItemList;
}
}
}
Hope that helps.
First thing is to decide if you want to use NavigationView. In XAML controls are defined by their behavior (properties and methods that they implement), while the visual appearance is irrelevant and can be altered completely. If NavigationView is right for your task then you can alter its style partially or completely - in XAML editor right click on it, then click Edit Template > Edit a Copy. Now you'll get the XAML style definition that defines appearance of NavigationView, that's the place to start.
But it might be very well that you can't use NavigationView and that starting with SplitView might be a better idea as #Muzib said.
Not sure if this is a good idea for learning XAML, but you'll learn one thing - XAML can be customized to the great extent, but doing it may also be a very complex task.
I think there are a few problems from the UX perspective.
Not all the navigation items are shown at once and a used must expand the menu to change between the sets of items.
The positions of the navigation items changes when the navigation pane is expanded. Currently the way the control works it is though the pane is expanding to show the text of the button. With your suggested approach it would like the items jump down on open.
I wonder if would be easier to have a fixed side pane with the controls laid out like you want and no hamburger button etc. This is not so unusual, the Settings app does it.
If you do go with a fixed width pane, I recommend looking at the XAML that defines the NavigationView control, which can be found inside C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.17763.0\Generic\generic.xaml
(according to the version of your SDK). Then you can make sure to use the theme resources used by the Windows so that your custom control has a similar look and feel.
After updating the Xamarin Library and MAC OS to latest system, facing issue in Picker Background color and color of item that is selected/focused in picker for MAC Platform in my visual studio 2017.
Picker that is filled with multiple values
On opening the picker can not able to set the background color and the item that is selected is also not visible because of its color
How can I set the background color of that picker and the color of that focused/selected item of picker?
This seems to be caused for the new Theme used by Mojave.
One way to overcome this issue is by setting a value that will be visible on both Light and Dark them, for me it worked the Green.
Adding this to your XAML should be sufficient
<Picker.TextColor>
<OnPlatform x:TypeArguments="Color">
<On Platform="macOS" Value="Green"/>
</OnPlatform>
</Picker.TextColor>
Making the change only on your MacOs project leaving the others as they are.
<Picker HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
<Picker.Items>
<x:String>Dell</x:String>
<x:String>HP</x:String>
<x:String>Mac</x:String>
<x:String>Asus</x:String>
<x:String>Lenovo</x:String>
<x:String>Acer</x:String>
<x:String>Micrsoft</x:String>
</Picker.Items>
<Picker.TextColor>
<OnPlatform x:TypeArguments="Color">
<On Platform="macOS" Value="Green"/>
</OnPlatform>
</Picker.TextColor>
</Picker>
Note: The TextColor will only affect the selected item text color.
Hope this helps.-
To change BackGroundColor of all Picker items for iOS you need to use custom renderer.
Your Picker in shared project
<StackLayout>
<Picker x:Name="picCities" ></Picker>
</StackLayout>
In your ContentPage cs file assign ItemsSource to Picker
public MainPage()
{
InitializeComponent();
picCities.ItemsSource = new List<string> { "Hyderabad", "Bhopal", "Indore", "Jabalpur", "Mumbai", "Ahmedabad" };
picCities.SelectedIndex = 0;
}
Now in your iOS project add one .cs file name PickerCustomRenderer & add this code
[assembly: ExportRendererAttribute(typeof(Picker), typeof(PickerCustomRenderer))]
namespace picker.iOS
{
public class PickerCustomRenderer : PickerRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
{
base.OnElementChanged(e);
UITextField textField = Control;
UIPickerView pickerView = textField.InputView as UIPickerView;
pickerView.BackgroundColor = UIColor.Red;
}
}
}
Output
I am working on a Xamarin.Forms project with a ListView and each item has a Frame with a white background. My problem is I recently noticed when I tap the Item it makes the Frame's background white. It still shows all the other objects but the frame goes transparent.
The frame is simply
<Frame CornerRadius="10" Padding="0" Margin="10, 10, 10, 5" BackgroundColor="White">...</Frame>
Promoting above comments-answer to real-answer for readability sake:
The behavior you are seeing is specific to iOS. You can solve it by overriding the default behavior using an effect, like so:
[assembly: ResolutionGroupName("MyEffects")]
[assembly: ExportEffect(typeof(ListViewHighlightEffect), nameof(ListViewHighlightEffect))]
namespace MyProject.iOS.Effects
{
public class ListViewHighlightEffect : PlatformEffect
{
protected override void OnAttached()
{
var listView = (UIKit.UITableView)Control;
listView.AllowsSelection = false;
}
protected override void OnDetached()
{
}
}
}
Then, you can apply it in your view code-behind:
MyListView.Effects.Add(Effect.Resolve($"MyEffects.ListViewHighlightEffect"));
I did a short write-up on the full solution here
Alternatively, if you want to maintain the ability to select an item, one possible fix would be to add an ItemTapped handler in your code behind and null out
MyListView.SelectedItem = null;
I have a text editor in iOS and with Done button so when i tap it after typing something for edit the editor covers the whole area of the app and unable to edit.
I want to fix the height of the editor so that will be able to edit and save it.
I have used custom renderer for this and tried setting the height and width but not working as expected
my xaml code
<controls:XEditor x:Name="Editor" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" />
my custom renderer
public class XEditorRenderer:EditorRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
{
base.OnElementChanged(e);
Control.SelectAll(Self);
//this.Control.InputAccessoryView = null;
}
}
This is and Editor issue so i have tweaked it to creating a custom renderer and fix it