I am trying to create a popup using the Xamarin.CommunityToolkit package but the popup is rendering with extra spacing across the top. Because of hardware limitations I am forced to develop using a much older version of CommunityToolkit (1.2.0) and Xamarin.Forms (5.0) so the issue may be from this.
This is the sample popup I am trying to render.
<?xml version="1.0" encoding="utf-8" ?>
<xct:Popup xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xct="clr-namespace:Xamarin.CommunityToolkit.UI.Views;assembly=Xamarin.CommunityToolkit"
Size="300,300"
Color="Blue"
x:Class="floorplanner.Dialogs.RoomDetailsDialog"
xct:Clip="">
<Label Text="Hello World" BackgroundColor="Green"/>
</xct:Popup>
This is what the popup looks like when it's opened:
So far I have tried configuring my MainTheme to have:
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
I have also tried specifying the size in a child layout element instead of the popup itself but it still rendered with the top spacing.
I have tried setting the VerticalOptions of the label to "Fill" and it still rendered as shown in the image. Originally, I had the label inside of a StackLayout but I removed this nesting to simplify the example for this post.
From more experiments I found that the Label itself is still rendering with a height of 300 units and the bottom the the Label's region is being clipped off the bottom. So essentially, there are ~50 units of height that are being pushed off the bottom.
As a workaround the the problem I have set the background of popup to transparent and set the inner content of the popup to the height - 50.
As you set the Color="Blue", the whole background of popup is blue.
You add a label to in the popup layout however you haven't set the location of the label. You can set VerticalOptions and HorizontalOptions to set the location.
Here is the xaml code:
<xct:Popup xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xct="clr-namespace:Xamarin.CommunityToolkit.UI.Views;assembly=Xamarin.CommunityToolkit"
Size="300,300"
Color="Blue"
x:Class="floorplanner.Dialogs.RoomDetailsDialog"
xct:Clip="">
<Label Text="Hello World" BackgroundColor="Green" VerticalOptions="Start" HorizontalOptions="Start"/>
</xct:Popup>
Reference links:
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/layout-options
Related
I have a FlyoutPage in which I want to have a 'Popover' flyout layout on the left and the detail page on the right. In other words, I only want the flyout on the left to show up if I click a button, and for it to remain hidden otherwise.
I believe that's what should happen if I set FlyoutLayoutBehavior to Popover. But when I do that, no flyout menu shows up at all on the left (the detail page on the right continues working fine).
If I set FlyoutLayoutBehavior to Split instead of Popover, it works as it should (the flyout is always visible on the left, splitting the screen).
What is wrong?
This is my xaml code:
<?xml version="1.0" encoding="utf-8" ?>
<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyApp"
x:Class="MyApp.FlyoutPage"
FlyoutLayoutBehavior="Popover">
<FlyoutPage.Flyout>
<local:FlyoutMenu x:Name="menu" />
</FlyoutPage.Flyout>
<FlyoutPage.Detail>
<NavigationPage>
<x:Arguments>
<local:Contacts />
</x:Arguments>
</NavigationPage>
</FlyoutPage.Detail>
</FlyoutPage>
Thanks.
I would like to achieve the layout shown at the bottom in my app.
I got it sort of working by using the following structure
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<StackLayout>
<Image>
I currently have the problem that I want to control the image height so that, considering the screen size or screen orientation, there are 2 or 3 rows of images visible.
Things I tried:
setting a HeightRequest on the image. This seems to be ignored, probably because the scrollcontainer creates an "unlimited" canvas to paint on. The image scales up to the actual image size, which is too large.
set a hard value for the height of the Grid.Row. This clips the fullsize image.
I've seen this workaround in the demo of the flexgrid where they seem to get around this by downloading a image that is resized on the fly. But this does not seem like an ultimate fix for me.
blue lines = scrollview
black lines = view
red lines = image
Thx #Nick Kovalsky for telling me that it should work like that. I just found out that the cause seems to lie in the fact that I used a StackLayout around the image (containing the image and the image-label). This was something I left out when posting my original question. When I replaced this StackLayout with a Grid it worked as expected.
Old situation:
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<StackLayout Orientation="Vertical">
<Image>
<Label>
New situation:
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<Grid>
<Image>
<Label>
I am creating a master detail page in Xamarin Forms. I want to have Menu icon on top left, searcher on the right and another label on the menu bar.
Can some help help me with how I can be done? I added the menu icon. I want help with adding other controls on the toolbar/Menubar/Navigation bar what ever it is called. Its the bar on top of the master detail page.
Code:
<?xml version="1.0" encoding="UTF-8"?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
xmlns:local="clr-namespace:PCL.Core.Views;assembly=PCL.Core"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="PCL.Core.Views.RootPage" MasterBehavior="Popover" >
<MasterDetailPage.Master>
<local:MasterPage/>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage BarBackgroundColor="Maroon" >
<x:Arguments >
<local:DetailPage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Thanks.
If you talking about this kind of controls as on image than:
"Hamburger menu" image you set in MasterDetail page;
Icons (GPS and DATA on image) - are ToolbarItem's that you need to add to Detail Page
There is plenty of examples available:
https://forums.xamarin.com/discussion/17339/navigationpage-and-toolbaritems
https://forums.xamarin.com/discussion/17351/making-a-toolbar
I have the following UWP XAML:
<Button Content="Scan"
Command="{Binding CommandScan}" ToolTipService.ToolTip="Scan"
Style="{StaticResource ButtonIconStyle}">
<Button.Template>
<ControlTemplate TargetType="Button">
<resources:ScanIcon />
</ControlTemplate>
</Button.Template>
</Button>
ScanIcon is a user control that contains a vector image. What seems to be happening is that the icon is masking the clickable button area - that is, I can click in the drawn area of the icon only, the background of the button (whilst still within the border of the button) is not clickable.
So, my questions are: What is causing this behaviour, and how can I override it?
You can try to leave Button ControlTemplate alone and insert your image into Background of Button. I mean - you don't have to shoot big guns when you simple want to override style. If you need the Button to be exactly the shape of the image you can try DrawingBrush as described here: Painting with Images, Drawings, and Visuals
i am developing a Windows 8 "Metro" App. In this App I want to put an Image as a wallpaper.
The Image is 1600x900 Pixels big. Now, when i try a bigger Screen in the Simulator the Image
is not scaled to fill the whole Screen. How can i achieve this? I tried to follow the Microsoft
Guidelines for different Screen sizes, like for example putting the Image in a canvas, but it doesnt
work. Can someone help me?
Thank you very much
I am not sure what exactly what you have tried, or which guidelines your were looking at. But you can always add an ImageBrush to your Grid like this.
<Page
x:Class="App3.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App3"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<Grid.Background>
<ImageBrush ImageSource="Assets/img101.jpg"/>
</Grid.Background>
<TextBlock Name="txt1" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Hello World" FontFamily="Arial" FontSize="60" ></TextBlock>
</Grid>
</Page>
In one of my apps, I use a full-screen image as a background watermark, by using the following CSS:
.watermark {
position: absolute;
z-index: -1;
width: 100%;
height: 140%;
opacity: 0.05;
}
then, in the markup, I simply add an image tag, with the watermark class:
<img class="watermark" src="#" />
In my case, I'm setting the image source dynamically in the page's JS file, like so:
element.querySelector(".watermark").src = item.maptileUrl;
the above line grabs the URL for the image (a map tile) from the selected item that was passed to the page.
I tested my app in the simulator, and it works regardless of the screen size and resolution.
Be aware that depending on what your image is, using a width/height of 100% could result in your image being stretched vertically or horizontally.
Another possibly easier solution is to simply set the background-image style of the body tag to the desired image. You can read more about this property at http://www.w3schools.com/cssref/pr_background-image.asp (along with the background-repeat, background-size, etc.).