I am developing in Xamarin forms, and I have a Label that can contain a varying amount of text.
The platforms I use in forms are primarily: Android and UWP (no need for iOS ATM).
I want to give this label a background that is not rectangular and that is something more like this: (chat/message bubble style)
I have read about some possible solutions but I'm confused from all the options that are available.
From what I understand of my research around this and from my work with other platforms there are basically two options:
Set an image background.
Use Custom graphic controls to create the shape I want.
I'm not sure how to implement any of these options in Xamarin Forms, I'll be glad to get some help.
The easy solution would be to host the Label inside a View and set have an Image behind the label:
<Grid>
<Image Source="message_background.png">
<Label Text="{Binding Message}">
</Grid>
This is not very performant if you're going to have a lot of these on screen. The best solution would then be to use a custom renderer for each platform an implement it natively. This would give much better performance much more flexibility. It's more maintenance and initial work though.
You can read up on custom renderers here
Related
I used Factor of RelativeLayout in Xamarin.Forms a lot, this way my app UI scaled properly on any device. RelativeLayout is not recommended for use anymore and no replacement offered, so I wonder what would be techniques to indicate for example I want the xaml element to occupy 80% of it's parent element (container)? Should I calculate real width/height of the container in the runtime, depending on the device resolution? Or there is a better solution? I just can find nothing close in .Net Maui to what RelativeLayout+Factor allowed me to do in Xamarin.Forms.
I fear right now there is no way except Creating your own derivate of a Relative Layout. I've got the same problem of converting a Xamarin App to MAUI. There we did use a relative Layout to display various machines at their respective positions inside a building.
I found a few examples on how to create a custom layout here.
I would not recommend using the compatibility namespace. For me it makes problems and upon activating it, some of my page content is no longer displayed.
Hope this helps at least a little.
One option is to use the Grid layout with ColumnDefinitions="*,8*,*".
Place the content in Column 1.
AbsoluteLayout and RelativeLayout now exist only in the compatibility namespace, you can update your code to use them by adding the new namespace, and prefixing your XAML references:
<ContentPage
xmlns:cmp="clr-namespace:Microsoft.Maui.Controls.Compatibility;assembly=Microsoft.Maui.Controls"
...
>
<cmp:AbsoluteLayout>
<BoxView
Color="Red"
cmp:RelativeLayout.XConstraint="{cmp:ConstraintExpression Type=Constant, Constant=0}"
cmp:RelativeLayout.YConstraint="{cmp:ConstraintExpression Type=Constant, Constant=0}" />
</cmp:AbsoluteLayout>
</ContentPage>
In my login UI, I have a footer image, which is showing perfectly in small devices. But on big screen devices (mainly on iPad) it is not showing fully.
I tried all Aspect property of Image, but not worked.
Screenshot:
I try a lot to fix this but didn't get a solution.
Attaching the LoginPage.xaml file with this question. Please suggest a solution for this issue. :)
Make sure (in the iOS project -> Assets) your image set has 3 different sizes xxx.png,xxx.png#2x and xxx.png#3x .
Which image will be used for your app? That depends on the device your app is viewed on. Higher resolution devices (larger and newer devices) have more pixels on their screens. Thus they need higher resolution images to display properly without any blurring.
If you don’t supply the higher resolution (#2x or #3x) images, your app will automatically try to scale the #1x image up. This is not good and can result in a distorted or blurry image!
Based on the file you linked in the comments, I think it would suffice to remove the bottom StackLayout wrapping the Image, and instead put Grid.Row="1" & VerticalOptions="End" to the bottom Image.
Please update your question with the relevant code to make the question and answers more helpful to others.
Remove latest StackLayout with image and add it after StackLayout with Grid.Row="1" like this
<Grid Grid.Row="1"
BackgroundColor="#c0eefb">
<Image
Source="ic_footer_image_xx.png"
Aspect="AspectFill"
HorizontalOptions="FillAndExpand"/>
</Grid>
I am fairly new to an app Development. One of the things that I am struggling with is to make sure my app looks the same on devices with different screen sizes.
Here is the logic that I use:
public MainPage()
{
this.InitializeComponent();
placeUI();
}
The placeUI() method is a method where I measure the width and the height of the screen. From there for instance if I need to place my component 10% from the left I just multiply its x position on a coordinate by 0.1.
My question is - if its the standard way of making UI responsive to diffirent screen sizes or is there an easier way? Thank you!
See Define page layouts with XAML for an several techniques to use for responsive design. That page targets Universal Windows apps (Windows 10), but other than the RelativePanel and AdaptiveTriggers everything applies to Windows Phone 8.1 Runtime apps as well.
If you just want a lightly responsive design such as your example of placing an item at a constant 10% from the edge then you can set your layout in a Grid control with a column set to take 10% of the Window:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="9*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1">This is 10% from the left</TextBlock>
</Grid>
While this seems like a lot for a single item, it usually works out well for a typical layout with multiple elements.
For busier designs with many more controls you may want to move them around based on the size of the screen. 50% of a wide screen may be plenty for a given chunk of text while 50% of a narrow screen may be much too small for the same text. The app may want to switch from a horizontal layout on the wide screen to a vertical layout on narrow screens. The app can use visual states to move controls around or switch the controls completely (e.g. a GridView for wide screens and a ListView for narrow screens, both bound to the same underlying data).
I've spent 2 hours looking for a solution. I need to make a design
like the Youtube UI (Tablet UI) where it shows a vertical scroll, but
in each row there are 4 videos (landscape view). I've tried to do
something similar, but i couldn't =(
Is there any place where i can get the source code of the youtube
application for Tablet? Or maybe some resource to solve this? :(
BTW, my try was designing UI with scrollView, LinearLayout and my_item.xml, i tried to inflate my_item.xml adding programmatically into the linearlayout (horizontal orientation), but it doesn't work in the way that i want. I need something like a linearlayout but with horizontal and vertical orientation at the same time (something like a div).
I was thinking to use a ListView and a custom adapter (with my_item.xml), but i'm not sure if this can be the best solution.
Thxs
You should create seperate resources for each layout.
For example if the user is in Portrait mode you would have the correct layout in.
layout-port: layout for portrait orientation
layout-land: layout for landscape orientation
Read more on providing alternative resources here
Also i would recommend to read more on Handling runtime changes
This will help you with recognizing when the user changes orientation. You could actually use this guide and when the user flips the devices orientation you could then change the layout. Keep in mind hard coding this can be dangerous though. I would recommend using the layout folders.
Good luck!
Finally i solve my problem.
It works with a linearLayout(vertical) and adding linearlayout(horizontal) for each row. And obviously managing my scrollview.
BTW, i still think android should have a layout like a "div".
Thxs all
WP7 Office hub panorama header looks like this:
What is it?
one solid image
two images (one for logo, one for "microsoft Office")
all vector elements
The answer interests me only because I know how to achieve this only in the first two cases.
Basically I need to create a TextBlock in PanoramaHeaderTemplate, that would be like this:
<TextBlock Foreground="Black"><Run Text="smallBold" FontWeight="Bold"/><Run Text="Normal"></TextBlock>
So the resulting panorama should have a look:
If I use FontWeight directive in the PanoramaHeaderTemplate - it for some reason has no effect.
If I use PanoramaTitleTemplate, I get the controllable text weight, but I have a panorama header element appear for some reason, that only displays a x:Key element name of the PanoramaItem, that results in an appearance of a header I don't need at all. This happens even if I don't define the panorama header.
So which is the correct way to achieve the look on the Panorama "upper element", whether it is Title or Header, that is shown on the smallBold.Normal figure?
I don't know what Office uses but it's irrelevant because, as a native app, it wasn't created with Silverlight.
You can create the same effect by changing the Panorama.TitleTemplate to contain whatever you want (TextBlocks, images, etc.). You may also have to adjust the defautl Style applied to the template to set a Height and Width for the PanningTitleLayer.
It's an image, straight across the panorama. It's very simple, as the panorama view was set up to display long images to support a better scrolling feel for the user.
So i would look into using images, as it's easier to achieve, what you are trying to do, with images, rather than a background image.
Some useful related questions/articles:
May Help, StackOverflow
UI Concepts For Windows Phone 7
How I made the ‘myChannel9' wp7 app
Capturing Windows Phone 7 Panorama Images