In my Xamarin.Forms application, I have an Image and a Label:
<Image x:Name="myImg"/>
<Label x:Name="myLabel"/>
I want the width of the Image to be the same as the width of the Label (the text of the Label is determined at runtime). How can I do this?
You should be able to accomplish this by binding the Image's WidthRequest to the Label's Width property.
<Image x:Name="myImg" WidthRequest="{Binding Source={x:Reference myLabel}, Path=Width}" />
<Label x:Name="myLabel" />
Related
I have a control in Xamarin Forms where I have a bunch of labels that are visible or invisible based on a few factors.
I want the layout I'm calling the control from to wrap the height based on the labels that are visible. So if the labels are 100dp tall for example (I don't actually know how tall they are) and there are 3 visible, I want the height of the control/layout to be 300dp. Right now the layout is just stretching out to what it would look like if all the labels were visible.
This is my control:
<controls:cardDetail>
<Label Text="hi1" IsVisible="{Binding maybe1}">
<Label Text="hi2" IsVisible="{Binding maybe2}">
<Label Text="hi3" IsVisible="{Binding maybe3}">
<Label Text="hi4" IsVisible="{Binding maybe4}">
<Label Text="hi5" IsVisible="{Binding maybe5}">
<Label Text="hi6" IsVisible="{Binding maybe6}">
</controls:cardDetail>
I call this control from a carousel view inside a stacklayout in another xaml page:
<StackLayout orientation="Horizontal">
<CarouselView x:Name="carView">
<controls:cardDetail/>
</CarouselView>
</StackLayout>
What do I have to do to which page/layout to make this happen? Do I need to use C# or can I just add an attribute in xaml??
Thanks!
I want to make a absolutelayout in the corner of the screen,and set the size of it:widhtrequest=60 and heightrequest =60
inside the absolute is a frame and label.
but it seems the absolutelayout is autosized according the Image size inside it.
How can I size it?
You can refer to the following code:
<AbsoluteLayout x:Name="absLayout">
<AbsoluteLayout x:Name="box" BackgroundColor="Blue" WidthRequest="60" HeightRequest="60" >
<Image BackgroundColor="Olive" AbsoluteLayout.LayoutBounds="0,0, 50, 50" Source="test.jpg"
AbsoluteLayout.LayoutFlags="PositionProportional" />
</AbsoluteLayout>
</AbsoluteLayout>
I'm developing the DMS windows UWP application In which I want to show a user information on DataGrid. For this I am using MyToolkit.Controls.DataGrid. I want to change the header size and give the border for header. I also want to change the list items font size. so any one have a full style for DataGrid. how to hide the DataGrid column ?
the header size and give the border for header.
The header is object type that mean you could custom it's content. If you want to add border you could refer the following code. But MyToolkit does not support modify the header size.
<controls:DataGridTextColumn
Width="200"
Binding="{Binding Lastname}"
IsAscendingDefault="False"
>
<controls:DataGridTextColumn.Header>
<Border BorderThickness="1" Padding="5,5,5,5" BorderBrush="Red" CornerRadius="5">
<TextBlock Foreground="Green" Text="Lastname" />
</Border>
</controls:DataGridTextColumn.Header>
</controls:DataGridTextColumn>
change the list items font size
If you just want to change the list items font size, you could edit DataGridTextColumn FontSize property.
<controls:DataGridTextColumn
Width="200"
Binding="{Binding Firstname}"
FontSize="25"
Header="Firstname"
/>
how to hide the DataGrid column ?
Just set with property as 0.
<controls:DataGridTextColumn
Width="0"
Binding="{Binding Firstname}"
FontSize="25"
Header="Firstname"
/>
I'm trying to add a floating button in the bottom right corner of my page inside the StackLayout
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:fab="clr-namespace:FAB.Forms;assembly=FAB.Forms"
x:Class="Hura.Pages.LatestNews"
Title="Latest news">
<StackLayout Spacing="10" Padding="5">
<Label Text="Latest news" FontSize="Medium"/>
<ListView x:Name="lsvNews"/>
<Label Text="Latest activities" FontSize="Medium"/>
<ListView x:Name="lsvActivities"/>
<Label Text="Good Mording" FontSize="Large" HorizontalOptions="Center"/>
<AbsoluteLayout x:Name="xyz"
BackgroundColor="Transparent"
HorizontalOptions="End"
VerticalOptions="End">
<Button Text="gggggg"/>
</AbsoluteLayout>
</StackLayout>
</ContentPage>
but the button appears bellow the label. But I want it to appear above the label and not below it.
How can I position the button in the bottom-left corner above the label?
Your issue here is that the StackLayout is simply going to position items in the order that you add them. So since you added the AbsoluteLayout after adding your Label, your Button is going to show up lower than your Label.
Obviously you could move the Label beneath your AbsoluteLayout and get the effect you are asking for like so:
...
<AbsoluteLayout x:Name="xyz"
BackgroundColor="Transparent"
HorizontalOptions="End"
VerticalOptions="End">
<Button Text="gggggg"/>
</AbsoluteLayout>
<Label Text="Good Mording" FontSize="Large" HorizontalOptions="Center"/>
...
But the whole point of a floating button is for it to actually float above other content. In the example that you show, your Button would never float above anything. In order to get the Button to float over other items you would need to add the entire StackLayout to your AbsoluteLayout. Something like this (note that I have not tested this code so you may need to play with it a bit):
<AbsoluteLayout VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<StackLayout Spacing="10"
Padding="5"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1">
...
</StackLayout>
<Button Text="gggggg"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="1,1,AutoSize,AutoSize"/>
</AbsoluteLayout>
The important bits above are that everything is within the AbsoluteLayout, which means you are able to stack your controls correctly. The other important items are the AbsoluteLayout.LayoutFlags and AbsoluteLayout.LayoutBounds. The LayoutFlags and LayoutBounds on the StackLayout basically just tell the StackLayout that it can take up the entire screen. The LayoutFlags and LayoutBounds on the Button say that the Button needs to be in the bottom right corner and that it can size itself.
Make it reverse put Stack Layout inside Absolute Layout to work like expected
Here is sample code
Button btnPlus = new Button()
{
Text = "FAB"
HeightRequest = 50,
WidthRequest = 50
};
StackLayout stackLayout = new StackLayout
{
Children = { STACK_CHILDRENS }
};
AbsoluteLayout absoluteLayout = new AbsoluteLayout();
AbsoluteLayout.SetLayoutFlags(btnPlus, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(btnPlus, new Rectangle(0.5, 0.95, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
AbsoluteLayout.SetLayoutFlags(stackLayout, AbsoluteLayoutFlags.All);
AbsoluteLayout.SetLayoutBounds(stackLayout, new Rectangle(0f, 0f, 1f, 1f));
absoluteLayout.Children.Add(btnPlus);
absoluteLayout.Children.Add(stackLayout);
Content = absoluteLayout;
<ScrollView id="scrollGeneric" height ='auto' visible='false'>
<View id="formView" height='auto'>
<View id='distSlider' top='0' height='100'>
<Label id="lblGeneric" >
Search Distance:
</Label>
<Slider id="sliderDistance" top="50" min="2" max="80" width="50%"/>
<Label id="sliderDistanceText" width='auto' top="50" right="40" />
<Label id="sliderDistanceTextMeasure" width='auto' top="50" right="10" text="km" />
</View>
</View>
</ScrollView>
I have set the height auto for scrollView and formView. However whenever I add more views inside of the formView the size of the window does not expand vertically with it. It will eventually crop out the views that exceed the window height.
The only way to solve this is to manually specify the height of each view within the form view div.
Is there anyway I can avoid doing this, thanks
Have you tried using Ti.UI.SIZE instead for the height? As per the documentation, "height:auto is not recommended for new development and will be deprecated in the future."