Heyho developers,
I'm experiencing an interesting problem with my Xamarin.Forms Android application.
My XAML looks like this:
<Label>
<Label.FormattedText>
<FormattedString>
<Span TextColor="red">This sentence contains </Span>
<Span FontAttributes="Bold">a whole lot of </Span>
<Span TextDecorations="Underline">formatted strings!</Span>
</FormattedString>
</Label.FormattedText>
</Label>
As you see, I've solved the problem of XAML ignoring spaces in front of end tags by simply using the Unicode value of .
The problem here is, once I rebuild the whole application (it works via Hot Reload while it's running) these spaces are being ignored. It keeps producing the output:
This sentence containsa whole lot offormated strings!
Using xml:space="preserve" didn't have any effect on that, furthermore this led to another error.
Hope you got any ideas on how to solve this.
Thanks in advance!
How to preserve spaces
For this you will have to use the Text property of Span as follows
<Span TextColor="red" Text="This sentence contains "/>
Why works in HotReload?
I could reproduce your interesting issue. My guess is that the problem is with the HotReload and how it is implemented behind the scenes. If you have time, it would be great if you post the issue in github.
Related
I think the title says it all. When I try to use the <Separator /> tag to put a line in between elements in a stack panel in a UWP XAML app, I get this:
When I hover over the separator elements it says that The type Separator cannot be found and gives the error code XLS0414.
Any ideas?
I've looked at many websites and they all say that I need to use the separator tag for what I'm trying to do, but I can't use it...
There is no such thing as a Separator UIElement in UWP. Separator is a WPF construct, so if you're looking at many websites that all say you need to use the separator flag, they're probably referring to a WPF application or using some toolkit nuget package.
However, you can mimic a Separator using a couple of workarounds.
Use a Border that has a thickness defined on only one edge.
<Border BorderThickness="0,1,0,0" ... />
Use a Rectangle that is shaped like a separator
<Rectangle HorizontalAlignment="Stretch" Height="1" Fill="Black" />
Out of nowhere, PhpStorm has decided to misunderstand custom tags are and as a result doesn't format the code correctly.
I'm editing a .vue file - here's a short snippet of what it should be formatted like:
<template>
<auth-layout>
<h2>{{ __('register.content.heading') }}</h2>
<p>{{ __('register.content.copy') }}</p>
</auth-layout>
</template>
However, PhpStorm complains that the auth-layout tag is never closed. Then when running the reformat action, anything underneath </auth-layout> gets messed up.
Does anyone know why this is happening and is there a way to fix it?
Ok as is tradition, I have solved this immediately after posting this question. My auth-layout tag has a lang="" attribute which was completely confusing PhpStorm. Removing it fixes it.
I am relatively new to the world of Xamarin.Forms and have a question with regard to Xamarin TableView.
I want to create a layout similar to the one shown below.
Question is, can I use TableView for this or is there an another option for this? Can anyone show this with XAML code please?
Thanks in advance.
Edit: Tabs in the bottom are not required.
I don't mean to be rude, but this is very easy to retrieve from the documentation pages and a bit of trying yourself.
To get you started, try this:
<TableView Intent="Settings">
<TableView.Root>
<TableView.Section>
<ImageCell Text="Invoice Customization" Source="Invoice_image.png" />
<ImageCell Text="Invoice Defaults" Source="Invoice_image.png" />
</TableView.Section>
<TableView.Section Title="Security">
<SwitchCell Text="Use Touch ID" />
</TableView.Section>
... etc.
</TableView.Root>
</TableView>
The arrows at the end of the cells and the footer text underneath the Security section are not possible with Xamarin.Forms out of the box, this will probably require you to write a custom renderer.
Specifically, I am building an app using Vuetify. I attempted to add an image to a card via v-card-media and using src. Checking the console, I can see that the .jpg I am using is listed, but the image does not show up. I admit I am new to Vue.js and JS so it may be some inexperience on my part, but I am quite lost and perplexed on this.
I am under the impression that with JS alone, there are some extra steps I must take to have an image be properly "read". Am I correct in my assumption that Vuetify removes those extra steps? That is to say, can I post and this will give the desired result without me having to create an additional function or am I horribly wrong? Any help is appreciated.
Inexperience strikes but tenacity saves the day. The issue I was having was that I was using:
<img src="src/assets/apple.jpg" alt="">
And instead I should have been using:
<img src="#/assets/apple.jpg" alt="">
Taking note of the "#" instead of src. I had searched many places but looked at the original demo site and saw the variation which is probably what I should have done from the start. C'est la vie.
Try this is for vuetify
<v-img src="#/assets/logo.png"></v-img>
I've used the Multilingual Toolkit to translate my app and have been testing it using pseudo-language. It works fine for strings I have translated in code (C#) but I can't work out how to make it so that the tag in XAML is automatically translated.
I've been using http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh965329.aspx as a tutorial but I can't figure it out. I've also searched on Google but still no luck.
For example, I created a "Watermark" text box (which inherits from TextBox which shows some text in by default it the user has not entered any text and the item does not have focus. The XAML looks like this (I replaced generic positioning stuff with '...'):
<local:WatermarkTextbox x:Name="TitleTextBox" Watermark="MainPage_EnterATitle" ... Style="{StaticResource TextBoxStyle1}" />
As you can see it is setting a property called Watermark with a 'tag' of the resource name that is being translated using the Multilingual tool. I'm not sure how to get this to automatically translate.
Another example is using the bottom app bar buttons:
<Button x:Name="bottomAppBar_unpinFromStartButton" AutomationProperties.Name="MainPage_UnpinFromStart" Style="{StaticResource UnPinAppBarButtonStyle}" Click="bottomAppBar_unpinFromStartButton_Click"/>
And I can see in the link above that it says:
MediumButton.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name
But I'm not really sure where this is meant to go.
Even with a button, which seems like it would be the simplest to translate I can't get it to work. The XAML is:
<Button x:Name="RemovePhotoButton" x:Uid="MainPage_RemovePhoto" Content="" HorizontalAlignment="Center" Margin="222,0,974,78" Grid.Row="1" VerticalAlignment="Bottom" Width="170" Height="45"/>
But when ran in the app or viewed in the designed the button stays blank, with no text on it.
The Resources are set up like this:
And it is filling the translated documents fine:
I am able to translate it in C# using the code from the link above, just not using XAML.
Just wondering if anybody could help me out or point me in the right direction to solve this.
Thanks
First what i think is missing in the name of your resources is the property that you want to set. While never used it myself, i would understand it like this:
Your xaml needs to be changed to
<local:WatermarkTextbox x:Name="TitleTextBox" x:Uid="MainPage_EnterATitle" Watermark="" ... Style="{StaticResource TextBoxStyle1}" />
And your resource needs an entry with the key
MainPage_EnterATitle.Watermark
And about the part with the
MediumButton.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name
This is only used if the referenced property is an attached property. Like if your Watermark property would be attached not part of the control. But in your case its not important.