I like implement htmleditor in xamarin forms, I have found one package like TEditor and TEditor.VK. Both are not giving a xaml code, Please provide link for htmleditor or else give me a suggestion to resolve the issue
You could download the source file from from the GitHub.
https://github.com/XAM-Consulting/TEditor
It provide a code sample with c# TEditorHtmlView. https://github.com/XAM-Consulting/TEditor/blob/master/Sample/TEditor.Forms.Sample/TEditorHtmlView.cs
You could check the xaml below.
<ContentPage.Content>
<StackLayout Orientation="Vertical">
<Button
Clicked="Button_Clicked"
HeightRequest="100"
Text="HTML Editor" />
<WebView x:Name="_displayWebView" HeightRequest="500" />
</StackLayout>
</ContentPage.Content>
Code Behind:
async void Button_Clicked(object sender, EventArgs e)
{
await ShowTEditor();
}
async Task ShowTEditor()
{
TEditorResponse response = await CrossTEditor.Current.ShowTEditor("<!-- This is an HTML comment --><p>This is a test of the <strong style=\"font-size:20px\">TEditor</strong> by <a title=\"XAM consulting\" href=\"http://www.xam-consulting.com\">XAM consulting</a></p>");
if (response.IsSave)
{
if (response.HTML != null)
{
_displayWebView.Source = new HtmlWebViewSource() { Html = response.HTML };
}
}
}
Related
I am using xamarin forms for my project. I need to set custom font family(Montserrat-Medium.ttf) for the following alert messages for both android and iOS.
var ans = await App.Current.MainPage.DisplayAlert("", "Are you want to leave the application?", "Yes", "No");
Anyone help me to resolve this issue.
This is not possible in shared Xamarin project, but you can simply create a custom alert, and do what ever you want with it, like this:
Add your font to the solution
Add the font somewhere in shared project and then right click on it and choose Properties.
In Properties, choose Embedded resource as a Build Action.
Add this line
[assembly: ExportFont("Montserrat-Medium.ttf", Alias = "MyMontserrat")]
to the AssemblyInfo.cs
Create custom popup view like this
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyApp.MainPage">
<AbsoluteLayout Padding="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Button Text="Display Alert!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Clicked="OnButtonClicked" />
</StackLayout>
<!--Here's the custom popupView-->
<ContentView x:Name="popupView" BackgroundColor="#C0808080" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<StackLayout Orientation="Vertical" HeightRequest="150" WidthRequest="200" BackgroundColor="White">
<Label x:Name="myLabel" FontSize="16" FontFamily="MyMontserrat" Text="Are you want to leave the application?" />
<Button Text="Yes" FontSize="16" FontFamily="MyMontserrat" BackgroundColor="White" TextTransform="None" Clicked="Yes_Clicked" />
<Button Text="No" FontSize="16" FontFamily="MyMontserrat" BackgroundColor="White" TextTransform="None" Clicked="No_Clicked" />
</StackLayout>
</StackLayout>
</ContentView>
</AbsoluteLayout>
</ContentPage>
Use your popup in .cs
void OnButtonClicked(object sender, EventArgs args)
{
//This will show the pop up
popupView.IsVisible = true;
}
private void Yes_Clicked(object sender, EventArgs e)
{
popupView.IsVisible = false;
//Your stuff here
}
private void No_Clicked(object sender, EventArgs e)
{
popupView.IsVisible = false;
//Your stuff here
}
You could use DependencyService to call the native dialog,and define the font in the native dialog.
Here is a simple sample for Android (ios is similar to this,you could refer to this):
define a interface in your forms project:
public interface ICustomAlert
{
void Show(string message);
}
then in your Android project:
public class CustomAlert : ICustomAlert
{
public void Show(string message)
{
AndroidX.AppCompat.App.AlertDialog.Builder alertdialogbuilder = new AndroidX.AppCompat.App.AlertDialog.Builder(MainActivity.Instance);
alertdialogbuilder.SetMessage(message);
alertdialogbuilder.SetPositiveButton("Yes",OkEvent);
alertdialogbuilder.SetNeutralButton("No", NoEvent);
AndroidX.AppCompat.App.AlertDialog alertdialog = alertdialogbuilder.Create();
alertdialog.Show();
TextView textView = alertdialog.FindViewById<TextView>(Android.Resource.Id.Message);
textView.SetTextColor(Android.Graphics.Color.Red);
Typeface face = Typeface.CreateFromAsset(MainActivity.Instance.Assets, "fonts/Montserrat-Medium.tff");
textView.SetTypeface(face, TypefaceStyle.Normal);
}
private void NoEvent(object sender, DialogClickEventArgs e)
{
}
private void OkEvent(object sender, DialogClickEventArgs e)
{
}
}
then you could call like
DependencyService.Get<ICustomAlert>().Show("your message");
I have a case of using a CarouselView that is displayed based on certain data brought from an API, the point is that I need to see a certain view or at least text while the API data is being downloaded and another one in case That there is no data.
I tried to get to this using RefreshView and EmptyView but I cannot achieve the required behavior, I can make an EmptyView appear immediately the data begins to load since at that moment the ItemSource is null, then when the data reaches the app the Carousel appears , which seems to me quite ugly, the ideal would be to show some view that next to the RefreshView indicator shows that the data is loading and then in case of not bringing any data show a view that of the feedback that API data did not return .
I hope I have made myself understood and I hope someone can give me an idea on how to achieve this behavior.
MyViewModel:
public MyViewModel()
{
IsRefreshing = true;
Things = new ObservableCollection<Things>();
var t = Task.Run(async () =>
{
await LoadThings();
});
Task.WhenAll(t);
IsRefreshing = false;
}
private async Task LoadThings()
{
Things = new List<Thing>(await App.WebApiManager.GetThingsAsync(Id));
}
My IsRefreshing property is linked to the IsRefreshing property in the RefreshView that encompasses my CarouselView
I think you could use two empty view and switch between them when the refreshing status changes, and here is the code:
add two content view in in XAML and set default empty view to LoadingData:
<ContentPage.Resources>
<ContentView x:Key="LoadingData">
<StackLayout>
<Label Text="Loading data..."
Margin="10,25,10,10"
FontAttributes="Bold"
FontSize="18"
HorizontalOptions="Fill"
HorizontalTextAlignment="Center" />
</StackLayout>
</ContentView>
<ContentView x:Key="NoDataLoaded">
<StackLayout>
<Label Text="No items to display."
Margin="10,25,10,10"
FontAttributes="Bold"
FontSize="18"
HorizontalOptions="Fill"
HorizontalTextAlignment="Center" />
</StackLayout>
</ContentView>
</ContentPage.Resources>
<StackLayout Margin="20">
<RefreshView IsRefreshing="{Binding IsRefreshing}"
Command="{Binding RefreshCommand}">
<CarouselView x:Name="carouselView"
EmptyView="{StaticResource LoadingData}">
... ...
and in code, show different empty view accordingly:
public partial class HorizontalPullToRefreshPage : ContentPage
{
AnimalsViewModel viewModel;
public HorizontalPullToRefreshPage()
{
InitializeComponent();
viewModel = new AnimalsViewModel();
this.BindingContext = viewModel;
viewModel.PropertyChanged += ViewModel_PropertyChanged;
}
private void ViewModel_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
if (e.PropertyName.Equals("IsRefreshing"))
{
if (viewModel.IsRefreshing && viewModel.Animals.Count==0)
{
carouselView.EmptyView = Resources["LoadingData"];
}
else if (!viewModel.IsRefreshing && viewModel.Animals.Count == 0)
{
carouselView.EmptyView = Resources["NoDataLoaded"];
}
}
}
protected override async void OnAppearing()
{
base.OnAppearing();
await Task.Delay(2000);
carouselView.ItemsSource = viewModel.Animals;
}
}
then, every time the property IsRefreshing changed, you got a chance to switch the empty view.
Hope it helps.
I am using Stepper and Slider. My code is as below.
It works well on android and ios, but on uwp it has a display error.
(1) MainPage.xaml
<ContentPage.Content>
<StackLayout Padding="12,12,12,12">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Slider x:Name="Slider1" Maximum="100" Minimum="1" ValueChanged="SliderChanged" HorizontalOptions="FillAndExpand"
MinimumTrackColor="LightPink" MaximumTrackColor="LightPink"/>
<Stepper x:Name="Stepper1" Maximum="100" Minimum="1" Increment="1"
ValueChanged="StepperChanged" HorizontalOptions="End"/>
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label Text="Value:" FontSize="Large"/>
<Label x:Name="ShowValue" FontSize="Large"/>
</StackLayout>
</StackLayout>
</ContentPage.Content>
(2) MainPage.xaml.cs
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
Stepper1.Value = 50;
Slider1.Value = 50;
}
protected override void OnAppearing()
{
base.OnAppearing();
}
private void SliderChanged(object sender, ValueChangedEventArgs e)
{
Stepper1.Value = e.NewValue;
ShowValue.Text = e.NewValue.ToString();
}
private void StepperChanged(object sender, ValueChangedEventArgs e)
{
Slider1.Value = e.NewValue;
ShowValue.Text = e.NewValue.ToString();
}
}
Steps to Reproduce:
Build UWP project.
Using Slider to Max
Using Slider to Min
Using Slider to Center
Expected Behavior:
Stepper shall be displayed like the following image.
Actual Behavior:
Stepper display error is occured. It looks like the value is Maximum and Minimum.
I can push "+" and "-" to change value, but the backcolor cannot be changed after the error.
Basic Information
Xamarin.Forms: 4.2.0.709249
Platform;UWP
Windows:10
Could you please tell me how to fix my code? Or this is an error on Xamarin forms uwp?
Please consider the following issue.
In my Xamarin.Forms app I have a custom render for UWP that allows for a button to have two lines, and be centralised.
The buttons in questions are items in a Listview that are bound to objects. When they are initially generated, they display correctly with both lines of text in the center of the button, however if I update the text, it updates, but seems to bypass the custom renders "be in the center" code.
Please see the below code snippets and images to explain the situation further.
Custom Render
[assembly: ExportRenderer(typeof(TwoLinedButton), typeof(TwoLinedButtonUWP))]
namespace aphiresawesomeproject.UWP
{
public class TwoLinedButtonUWP : ButtonRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);
if (Control != null && e.NewElement.Text != null)
{
var textBlock = new Windows.UI.Xaml.Controls.TextBlock
{
Text = e.NewElement.Text,
TextAlignment = Windows.UI.Xaml.TextAlignment.Center,
TextWrapping = TextWrapping.WrapWholeWords
};
Control.Content = textBlock;
}
}
}
}
XAML
<ListView x:Name="AphiresListView" CachingStrategy="RecycleElement" ItemsSource="{Binding ListViewItems}" Margin="0,20,0,0" RowHeight="130" SeparatorVisibility="None" VerticalOptions="FillAndExpand" Grid.Column="1" Grid.Row ="3" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<local:TwoLinedButton Command="{Binding ClickedCommand}" Margin="5,10,5,10" HorizontalOptions ="FillAndExpand" BackgroundColor="{Binding color_hex}" Grid.Column="1" TextColor="{StaticResource LightTextColor}" FontSize="Medium" Text="{Binding problem_title}"></local:TwoLinedButton>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Update in Viewmodel
foreach (AphiresObject ViewItem in ListViewItems)
{
ViewItem.problem_title = ViewItem.problem_title.Replace("Line 2", "Updated Line 2");
}
Before
After
I think all you need to do is override OnElementPropertyChanged in your renderer and set the textBlock properties again when your text property changes.
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName == TwoLinedButton.TextProperty.PropertyName)
{
//Set text block properties
}
}
You may also need to tell the view to re-render itself.
iOS: this.SetNeedsDisplay();
Android: this.Invalidate();
I'm developing a cross platform application with Xamarin. The framework used for MVVM is Prism.
In my user interface there is an image, I need that it raise an action when it's tapped.
I tried with TapGestureRecognizer but it doesn't work. Where is the error? There is another way to do that?
XAML:
...<Frame Grid.Row="0" Grid.Column="0" OutlineColor="Black" Padding="5">
<Image x:Name="imgSynch" Source="synch.png" >
<Image.GestureRecognizers>
<TapGestureRecognizer Command="Binding TapCommand" />
</Image.GestureRecognizers>
</Image>
</Frame>...
ViewModel:
... ICommand tapCommand;
public ICommand TapCommand
{
get { return tapCommand; }
}
public MainPageViewModel()
{
var tapImageSynch = new TapGestureRecognizer();
tapCommand = new Command(Synch);
void Synch()
{
_pageDialogService.DisplayAlertAsync("Title", "It works!", "OK");
} ...
Thanks!
You've got a syntax error in your code:
Command="Binding TapCommand"
should be:
Command="{Binding TapCommand}"
if your Binding is specified as an instance of MainPageViewMode