Multiline button in Xamarin? is not working - xaml

Using
is not working. Instead my button only appears to say "First Line."
<Button Text="First Line
Second Line"/>
Am I doing this incorrectly? Is there another simple way to make the text go onto the second line?

I test it on Android,it works well,Did you run on ios ? I think this is mainly a problem with iOS because Android will wrap the text by default.
If you want run on ios,you could use customrenderer to achieve this.
[assembly: ExportRenderer(typeof(Button), typeof(iosbutton))]
namespace EntryCa.iOS
{
class iosbutton :ButtonRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.TitleLabel.LineBreakMode = UILineBreakMode.WordWrap;
Control.TitleLabel.Lines = 0;
Control.TitleLabel.TextAlignment = UITextAlignment.Center;
}
}
}
}

Related

javafx TabPane setSelection doesn't switch the tab

I want to control the TabPane and switch tabs with a Canvas, basically hide the tab headers and use canvas instead, the canvas displays different "Devices" and when user click on the device, the TabPane switch to show the content of that device.
fun canvasFlow_Click(mouseEvent: MouseEvent) {
val d = flowPresenter.click(mouseEvent)
if (d != null) {
flowPresenter.select(d)
logger.info("switch to ${d.position}")
tab.selectionModel.clearSelection()
tab.selectionModel.select(d.position)
}
}
Why select doesn't work? I don't see tab content changed. from log, I see "switch to 1", "switch to 2" correctly, just the tab doesn't switch! Why?
Note: this is plain javafx and might not be the exact solution in your case (hard to tell without example) - but actually I can reproduce the described behavior.
The problem seems to be calling clearSelection: TabPane with tabs should have exactly one selected tab - which is not specified. But every internal collaborator (skin, header, listener) goes to great lengths to guarantee that constraint - this assumption was wrong, in fact the skin gets confused if the selection changes to empty - the previously selected content is not removed. Might be a bug, either don't allow the selectionModel to be empty or improve the skin to cope with it (wondering how that would be supposed to look - hide the content?)
Anyway, here the solution is to not call that method before manually selecting a tab. There's no need to do so anyway, it's a SingleSelectionModel so takes care of allowing at most one item selected.
An example: un/comment the clearSelection and see how the content is not/ correctly updated with/out the call.
public class TabPaneSelection extends Application {
private Parent createContent() {
TabPane pane = new TabPane();
HBox headers = new HBox();
for (int i = 0; i < 3; i++) {
int index = i;
Tab tab = new Tab("header " + i, new Label("content " + i));
pane.getTabs().add(tab);
Button button = new Button(tab.getText());
button.setOnAction(e -> {
// do __not__ clear selection
//pane.getSelectionModel().clearSelection();
pane.getSelectionModel().select(index);
});
headers.getChildren().add(button);
}
BorderPane content = new BorderPane(pane);
content.setTop(headers);
return content;
}
#Override
public void start(Stage stage) throws Exception {
stage.setScene(new Scene(createContent(), 400, 300));
//stage.setTitle(FXUtils.fxVersion());
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}

Xamarin.Forms fontawesome works on UWP but shows square on Android

I have added fontawesome in my projects of Xamarin.Forms, on UWP font looks as expected but on android it is square. I have set build-action to AndroidAsset but it does not work.
On Android, it's a bit of a hassle use FontAwesome. This code behind post is about how to use Font Awesome in the simplest way possible. It's as easy as using a Label once set up.
We use a custom renderer that looks at the Label in question, determines if there is one character in the text field and if that character has the value of 0xf000 or higher. If so, we replace the font with FontAwesome.
Since the icons all begin at 0xf000 or higher, the custom renderer will make sure that the correct font is used
Reference article
[assembly: ExportRenderer(typeof(Label), typeof(AwesomeRenderer))]
namespace Awesome.Droid
{
public class AwesomeRenderer : LabelRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
{
base.OnElementChanged(e);
var label = (TextView)Control;
var text = label.Text;
if(text.Length > 1 || text[0] < 0xf000)
{
return;
}
var font = Typeface.CreateFromAsset(Xamarin.Forms.Forms.Context.ApplicationContext.Assets, "fontawesome.ttf");
label.Typeface = font;
}
}
}

How to animate SettingsFlyout on dismiss

In Windows 8.1, I'm using the new SettingsFlyout control. The flyout animates in correctly and will animate out if you use the control's built-in back button to return to the Settings Charm flyout. But if you light dismiss by clicking outside the flyout, it disappears without a transition animation.
How do you animate a transition out when you light dismiss the SettingsFlyout? (I don't want to return to the Settings Charm flyout, I just want it to slide out on a light dismiss.)
Matt, what you want to do should be easily achievable but is currently not supported by the XAML SettingsFlyout API out of the box. As Jerry points out, there are transitions that allow an animate out effect (in XAML you want EdgeUIThemeTransition). Unfortunately, there is no API support on SettingsFlyout to add this transition, but you can get it to work using your own private popup to host the SettingsFlyout (more on this below):
public sealed partial class SettingsFlyout1 : SettingsFlyout
{
Popup _p;
Border _b;
public SettingsFlyout1()
{
this.InitializeComponent();
BackClick += SettingsFlyout1_BackClick;
Unloaded += SettingsFlyout1_Unloaded;
Tapped += SettingsFlyout1_Tapped;
}
void SettingsFlyout1_BackClick(object sender, BackClickEventArgs e)
{
_b.Child = null;
SettingsPane.Show();
}
void SettingsFlyout1_Unloaded(object sender, RoutedEventArgs e)
{
if (_p != null)
{
_p.IsOpen = false;
}
}
void SettingsFlyout1_Tapped(object sender, TappedRoutedEventArgs e)
{
e.Handled = true;
}
public void ShowCustom()
{
_p = new Popup();
_b = new Border();
_b.ChildTransitions = new TransitionCollection();
// TODO: if you support right-to-left builds, make sure to test all combinations of RTL operating
// system build (charms on left) and RTL flow direction for XAML app. EdgeTransitionLocation.Left
// may need to be used for RTL (and HorizontalAlignment.Left on the SettingsFlyout below).
_b.ChildTransitions.Add(new EdgeUIThemeTransition() { Edge = EdgeTransitionLocation.Right });
_b.Background = new SolidColorBrush(Colors.Transparent);
_b.Width = Window.Current.Bounds.Width;
_b.Height = Window.Current.Bounds.Height;
_b.Tapped += b_Tapped;
this.HorizontalAlignment = HorizontalAlignment.Right;
_b.Child = this;
_p.Child = _b;
_p.IsOpen = true;
}
void b_Tapped(object sender, TappedRoutedEventArgs e)
{
Border b = (Border)sender;
b.Child = null;
}
}
Full solution for this sample: https://github.com/finnigantime/Samples/tree/master/examples/Win8Xaml/SettingsFlyout_AnimateOut
I think SettingsFlyout should have API support for your scenario, so I filed a work item on the XAML team. In the future, such requests/issues can be raised on the MSDN forum as well (moderated by MSFT folks). The limitation here is that SettingsFlyout is implemented on top of Popup with IsLightDismissEnabled="True", and the light-dismiss event currently closes the Popup immediately without allowing unloading child transitions to run. I think this can be overcome and transitions can be supported at the SettingsFlyout API level to enable your scenario.
You need to use the HideEdgeUI animation
Read this: http://msdn.microsoft.com/en-us/library/windows/apps/jj655412.aspx

Pivot detect when animation completes

Is there a way to detect when Pivot animation completes after swipe? I tried the PivotItemLoaded event, but it does not work. I also tried delaying another work for 1 second when SelectedIndex changes but it's not a very good solution.
you have to use gesture flick event.like below
XAML
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Flick="OnFlick"/>
</toolkit:GestureService.GestureListener>
C# Code
private void OnFlick(object sender, FlickGestureEventArgs e)
{
var vm = DataContext as SelectedCatalogViewModel;
if (vm != null)
{
// User flicked towards left
if (e.HorizontalVelocity < 0)
{
// Load the next image
LoadNextPage(null);
}
// User flicked towards right
if (e.HorizontalVelocity > 0)
{
// Load the previous image
LoadPreviousPage();
}
}
}
Hope it will help you ....

Force a view to refresh?

I'm trying to do a loading icon where once you tap on the icon, it will call the following handler:
private void refresh_btn_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
refresh_btn.Visibility = System.Windows.Visibility.Collapsed;
loading_icon.Visibility = System.Windows.Visibility.Visible;
refreshMix();
}
private void refreshMix()
{
...
refresh_btn.Visibility = System.Windows.Visibility.Collapsed;
loading_icon.Visibility = System.Windows.Visibility.Visible;
}
However, the view doesn't seem to auto-reload after I change the icon visibilities before calling refreshMix(). Is there a way to force the page to reload itself?
You are probably doing some lengthy work in refreshMix() in UI thread, right? Do this work in background thread and UI thread will be free to update page.
You need set Collapsed before Visible :
control.Visibility = System.Windows.Visibility.Collapsed;
control.Visibility = System.Windows.Visibility.Visible;
Within Silverlight there is no concept of page or view re-loading. When you change the properties of any visual element, this will be reflected on the screen the next time it is rendered.