I want to set a background image to my Grid in code behind. I found in internet that we can do using XAML 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="Pages.PhotoPage">
<Grid >
<Image Source="background.png" Aspect="AspectFit" />
<!-- Place here the rest of the layout for the page. -->
</Grid >
But how can I set this in code behind. I cannot see anyImage or BackgroundImage property for Grid. Please help me.
Thanks
You can just create an empty Image element in the Grid and set it.
<Grid>
<Image x:Name="BackgroundImage" Aspect="AspectFit" />
<!-- Place here the rest of the layout for the page. -->
</Grid>
And now set it in code:
backgroundImage.Source = ...;
If you are building the whole UI in code, you can do this as well:
var myGrid = new Grid();
var backgroundImage = new Image();
backgroundImage.Source = ...;
myGrid.Children.Add( backgroundImage );
If your Grid has multiple rows and columns, you will want to set the Grid.ColumnSpan and Grid.RowSpan properties on the image to make it span the whole grid.
Related
I've created a tabbedpage to create a horizontal menu at the bottom of the page, but I can't set the scroll property.
This is my code:
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GET_SOUND.Views.MenuPage"
xmlns:local="clr-namespace:GET_SOUND.Views"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:TabbedPage.ToolbarPlacement="Bottom"
android:TabbedPage.IsSmoothScrollEnabled="True"
BarBackgroundColor="{StaticResource Primary}"
SelectedTabColor="Orange"
UnselectedTabColor="#95FFFFFF">
<!--Pages can be added as references or inline-->
<local:Dashboard Title="Dashboard" Icon="dashboard" />
<local:Marchi Title="Marchi" Icon="marchi" />
<local:Isrc Title="Isrc" Icon="matrici" />
<local:Documenti Title="Documenti" Icon="documenti" />
<local:Documenti Title="Impostazioni" Icon="imp" />
<local:Anagrafica Title="Anagrafica" Icon="anagrafica" />
<local:OpereTutelate Title="Opere Tutelate" Icon="opere" />
I tried to insert -> App: tabmode = "Scrollable" and the assembly, as suggested in this question, but it gives me an error and I don't understand why
As a suggestion, you can try use
Shell Tab,As it says in documents:
When there are more than five tabs on a TabBar, a More tab will
appear, which can be used to access the additional tabs
And Xamarin.Community is also an option, you can set the scrollable tab on the bottom with TabStripPlacement="Bottom".you can see more in https://github.com/xamarin/XamarinCommunityToolkit/blob/main/samples/XCT.Sample/Pages/Views/TabView/ScrollTabsPage.xaml
Hi i have spend some days searching for the answer how to solve this
This is what i want, just made a image how it should look like
What is the best solution to use to solve this?
I tryed to do this with a Frame but it just allowed be to use 1 content .
Can i use more then one content in some way
( Content can just have one setup of fontcolor and fontsize and so on. )
I just get to this part
Here i try to put a label with margin with - so it go above.
But this is really bad to to. because i need to have the implementation under the frams. like this.
_stack.Children.Add(frame);
_stack.Children.Add(bordertext);
and when i fill the frame with content the lable apear in another position because how it relate to the margin when the Frame get higher.
But if i put the lable implementation above the Frame then it appear in the background of the frame
_stack.Children.Add(bordertext);
_stack.Children.Add(frame);
And the label get weard with the shadow that i cant figure out how to get rid of.
C#
Frame frame = new Frame
{
BorderColor = Color.Brown,
CornerRadius = 10,
HasShadow = false,
Margin = 10,
BackgroundColor = Color.White,
};
Label bordertext = new Label( );
bordertext.Text = "BorderText";
bordertext.Margin = new Thickness(40, -65,0 , 0);
bordertext.BackgroundColor = Color.White;
_stack.Children.Add(frame);
_stack.Children.Add(bordertext);
PART OF THE SOLUTION
#Jason 's solution to put
the Content in a Stacklayout and then put it in a Frame Solves the problem with having more then one text with different font,sizes and stuff.
But i put a text outside the Stacklayout so i can have the Text on the border. But because i put the Bordertext first and then the Frame. Then the Border text gets in the background.
If i put it after the Frame then i gets in the front. But then i have a big problem with dynamic text that the BorderText will appear very strange depending on how much text.
How i cant put the BorderText in front even if i implement in before so i cant move it down a little bit.
_stack.Children.Add(new Label { Text = "Bordertext", Margin = new Thickness(0, 0, 0, -25) });
_stack.Children.Add(_frame);
To compose a layout, first determine what boxes (rectangles) you need inside other boxes. Each "box" is some container (layout) type.
I see one box "A", the size of the parent-container, containing the border lines "B", overlaid by a box "C" that blocks part of one line, and contains a text "D".
I see a second box "E", inset slightly from the parent-container, which contains additional content "F".
To overlay multiple items, use a one-cell Grid, with children at (row,column) of 0,0 - which can be omitted because is default:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FormsApp1.MainPage">
<Grid BackgroundColor="Violet">
<!-- Border lines formed by one box visually "inside" another, via margins.
Instead use "Rectangle" if need rounded corners. -->
<BoxView BackgroundColor="Red" Margin="10"/>
<BoxView BackgroundColor="LightCoral" Margin="16"/>
<!-- Text "box" given size by putting inside a StackLayout. -->
<!-- Some of these dimensions may not be needed. -->
<StackLayout WidthRequest="300" HeightRequest="30">
<Label Text="Header Text" TextColor="Black" BackgroundColor="White" FontSize="18"
HorizontalOptions="Start"
WidthRequest="150" HeightRequest="30" Margin="20,0" Padding="20,0,0,0"/>
</StackLayout>
<!-- this contains your contents. -->
<StackLayout BackgroundColor="#2196F3" Padding="10" Margin="40">
<Label Text="Content line 1" HorizontalTextAlignment="Center" TextColor="White"/>
<Label Text="Content line 2" HorizontalTextAlignment="Center" TextColor="White"/>
</StackLayout>
</Grid>
</ContentPage>
"Positioning" is done via "Margin" and "Padding" properties.
I've used various colors, so you can see the parts of this layout. "ContentPage" wrapper might not be needed; use whatever your app expects as topmost container.
layout of group' frame' with header text:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="LeaveManagerApp.UpcomingLeavesPage"
xmlns:controls="clr- namespace:XamForms.Controls;assembly=XamForms.Controls.Calendar"
>
<Grid >
<controls:Calendar
x:Name="MyLeaveCalendar"
ShowNumberOfWeek="false"
StartDay="Sunday"
WeekdaysBackgroundColor="DarkBlue"
TitleLabelTextColor="DarkBlue"
SelectedDate="{Binding Date}"
SpecialDates="{Binding Attendances}"
DateCommand="{Binding DateChosen}"
>
</controls:Calendar>
</Grid>
How to fit calendar to screen size in xamarin form ,
i am using calendar control of xamarin form ,tried HeightRequest but its not working.
This is not a default Xamarin.Forms control, it originates from here: https://github.com/rebeccaXam/XamForms.Controls.Calendar
It looks like the control is rendered with a fixed height. Searching through the issues, I found this one: https://github.com/rebeccaXam/XamForms.Controls.Calendar/issues/54
You can influence the height of a row with this code:
yourCalendar.OnEndRenderCalendar += (sender, e) =>
{
(calendar.Content as StackLayout).Children.Last().HeightRequest = 500;
};
The only thing you need to do is determine the right height, build something yourself for it or open an issue on the repo.
You should post a full XAML code but as per Xamarin standard how to expand full view of child control. Check the below code.
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<controls:Calendar
x:Name="MyLeaveCalendar"
ShowNumberOfWeek="false"
StartDay="Sunday"
WeekdaysBackgroundColor="DarkBlue"
TitleLabelTextColor="DarkBlue"
SelectedDate="{Binding Date}"
SpecialDates="{Binding Attendances}"
DateCommand="{Binding DateChosen}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
</controls:Calendar>
</Grid>
And also it's depend on Xamarin Layout which layout you are using for XAML design. And how to use XAML extensible language in Xamarin form Please check the link.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/xaml/
In a ContentPage I have a ListView inside a StackLayout inside a ScrollView. The ListView is populated (ItemSource is set) in the ContentPage when OnAppearing gets called and I can see that the list is populated in the emulator. The StackLayouts orientation is Vertical and below the ListView I have a Button.
My problem is that no matter how many elements the ListView has, it gets the height of 53.33. I would like the height of the ListView to match the total height of the items in it. By setting HeightRequest I can set the height of the ListView to anything I want, but since I do not know the height of the items inside the ListView the result is most often that the distance to the button below it is incorrect and therefore looks ugly. I have tried to set VerticalOptions on both the ListView and the StackLayout to Startand other settings, but this does not change the height from 53.33 (and if I try to combine using HeightRequest and Start it turns out that HeightRequest wins out).
How can I solve this?
(please excuse the cross posting from Xamarin forum)
With the new BindableLayout feature in Xamarin Forms 3.5 you can easily use the ItemsSource on StackPanel.
So, basically you can write something like this:
<StackLayout BindableLayout.ItemsSource="{Binding list}">
<BindableLayout.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
You can read more about it here: https://blog.xamarin.com/xamarin-forms-3-5-a-little-bindable-love/
The solution in my case was to put the ListView inside a StackLayout and then put that StackLayout inside the main StackLayout. Then I could set the VerticalOptions = LayoutOptions.FillAndExpand on the inner StackLayout (the one containing the ListView) with the result that the ListView got the space it needed (which of course varies depending on the data).
Here is the main code:
listView.ItemsSource = alternativeCells;
listView.ItemSelected += ListViewOnItemSelected;
var listStackLayout = new StackLayout
{
VerticalOptions = LayoutOptions.FillAndExpand,
Orientation = StackOrientation.Vertical
};
listStackLayout.Children.Add(listView);
_stackLayout.Children.Add(listStackLayout);
As you see, I added a new StackLayout with the only purpose of putting the ListView inside it. Then I put that listStackLayout inside the main _stackLayout.
See the post on this Xamarin forum post for more information
I ran into the same problem, and for me this worked like a charm:
listView.HasUnevenRows = true;
(http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/listview/#Display_Rows_with_Variable_Heights)
I had the same problem, and this was the only thing I did that solved for me (in XAML):
<StackLayout Orientation="Vertical"
VerticalOptions="Fill"
HorizontalOptions="StartAndExpand">
<ListView VerticalOptions="FillAndExpand"
RowHeight="<some row height>">
</ListView>
</StackLayout>
Hope it works!
Below code worked for me,
protected override void OnAppearing()
{
base.OnAppearing();
listViewOrderCloths.HeightRequest = model.ListOrderedCloths.Count*100)/2 ;
}
I had a similar struggle, with a slightly different solution. First, setting a RowHeight on the ListView seemed to be pivotal. Second, I was running into a binding + timing issue. If the ListView was displayed and had no contents, it was set to a default height (showing the empty space). If I moved away from this page and came back, the size was fine.
So my approach was to bind the ListView's visibility to the presence (or lack of) something being bound to. Then when data came back, the ListView became visible and had the proper size.
<ListView x:Name="lvSettlements" ItemsSource="{Binding RecentSettlements}" VerticalOptions="FillAndExpand" RowHeight="25" IsVisible="{Binding RecentSettlements, Converter={StaticResource nullConverter}}">
...SNIP...
</ListView>
On Android, my table created in code was leaving gaps above and below it.
This fixed it...
HeightRequest="1000000"
I think I have the hackiest solution.
The accepted answer wasn't applicable to my situation, where my ListView might be longer then the length of the display, hence it needs be placed within a ScrollView, which brings back the empty space.
They way I solved this, was to have top level StackLayout and then place the ListView in an immediate ScrollView, like the following XAML:
<?xml version="1.0" encoding="utf-8" ?>
<local:ContentPage>
<StackLayout x:Name="entirePage">
<ScrollView VerticalOptions="FillAndExpand"
Orientation="Vertical">
<ListView x:Name="listView" ItemsSource="{Binding Items}"
Margin="0">
<!-- ListView Stuff -->
</ListView>
</ScrollView>
</StackLayout><!--entirePage-->
</local:ContentPage >
I'm new in Windows phone 8 development and I have problem to add button on MapLayer.
I'd like to display a button over a map so I just draw it on the map widget like this:
<Grid x:Name="MyMapGrid" Margin="10,-15,15,0" VerticalAlignment="Top" Height="296" >
<maps:Map x:Name="MyMapi" Center="31.765537,35.106812" ZoomLevel="7" Margin="0,0,0,0" VerticalAlignment="Top" Height="296" Width="442" />
<Button x:Name="myCustomButton" Visibility="Visible" Content="" HorizontalAlignment="Left" Margin="347,0,0,0" VerticalAlignment="Top" Width="84" Height="84" BorderThickness="0">
<Button.Background>
<ImageBrush ImageSource="/myZoom.png"/>
</Button.Background>
</Button>
</Grid>
After this action I need to put some icons on the map so I used MapOverlay and MapLayer like this:
Map MyMap = new Map();
MapOverlay overlay = new MapOverlay
{
GeoCoordinate = MyMap.Center,
Content = new Image()
{
Source = new BitmapImage(new Uri("customIcon.png", UriKind.Relative)),
}
};
MapLayer layer = new MapLayer();
layer.Add(overlay);
MyMap.Layers.Add(layer);
MyMapGrid.Children.Add(MyMap);
I also need my button (myCustomButton) will stay visible - but it disappear.
how can I still have some button over the map and also view some icons on it?
Thank you all!
For button Change the path to definite like ImageSource="/Assets/Icon/location.png" with the folder name and make sure that BuildAction is set to content for that image
For icon also try the same.