I'm trying to add a child in .cs file to a Stack Layout created in the file .xaml
The Stack Layout in .xaml file is this:
<StackLayout Margin="10" x:Name="TypeStack">
While, in the .cs file I'm calling the StackLayout named TypeStack in this way:
TypeStack.BackgroundColor = Color.Red;
and it works because the background color is changed.
But when I try to add a child, the child is not appear:
var stack = new StackLayout {
BackgroundColor = Color.Green
};
TypeStack.Children.Add(stack);
Could you help me to solve this problem?
Reading the documentation, I've red that this is the way to add a child.
Waiting for you response,
thank you in advance.
Related
I am working on a Xamarin.forms project which has a ScrollView with a child of a StackLayout, whose child is a Label.
<ScrollView Grid.Row="0" Grid.Column="0"
x:Name="MessageScroll" BackgroundColor="Gainsboro">
<StackLayout BackgroundColor="Beige" Margin="2"
x:Name="MessageStack" Spacing="0">
<Label Text="Messages"/>
</StackLayout>
</ScrollView>
I want this to be a message window.
I will add onto this StackLayout new labels with messages.
I made a label with a new message(e.Message), added it onto Stacklayout, and then, scroll down the ScrollView show the last added label at the bottom of the ScollView.
Label newLabel = new Label();
newLabel.Text = e.Message;
MessageStack.Children.Add(newLabel);
await MessageScroll.ScrollToAsync(newLabel, ScrollToPosition.End, false);
the problem is ScrollToAsync doesn't ensure the last added label to be at the bottom when I added multiple message labels consecutively in a short period of time.
It seems because each call of ScrollToAsync is executed asynchronously so the last call for it wouldn't complete last.
How can I make this to work as what I want?
If you await the ScrollToAsync it will wait for scroll action to be completed. Anyway, here is a solution to scroll to bottom, you can give it a try.
async Task AddLabel(MessageEventArgs e)
{
Label newLabel = new Label();
newLabel.Text = e.Message;
MessageStack.Children.Add(newLabel);
await MessageScroll.ScrollToAsync(0, MessageStack.Height, false);
}
What I have
I want to achieve something like this:
This is the reference link that I have used to create radio button existing control: https://github.com/kirtisagar/XamarinFormsRadioButtonXAML
.Xaml Page:
<radio:BindableRadioGroup
Spacing="10"
x:Name="DeviceConditionRadio"
ItemsSource="{Binding DeviceConditionList}"/>
.CS page:
here I have added Item source of radio:
DeviceConditionList is a List<string>()
DeviceConditionList.Add("This device works well");
DeviceConditionList.Add("This device is not working properly");
How to get this kind of design?
Any help regarding this appreciated.!
Thanks.
from the shared link, the default style is Title right and Image left.And the project is based on Custom renderer to do that. You can find the renderer here.
so you can modify this style by renderer.In the shared project not custom RadioButton
in Android and Button in IOS.Then you need custom in each of them.
Android :you can modify xml to exchange the title and image of RadioButton like this:
<RadioButton
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:button="#null"//set null
android:checked="true"
android:drawableRight="#android:drawable/btn_radio"//reset the image
android:paddingLeft="10dp"
android:text="RadioButton" />
android:button="#null":This statement hides the original system's RadioButton icon.
android:drawableRight="#android:drawable/btn_radio":Add a btn_radio icon that comes with the system to the right of the original icon. I think the RadioButton is packaged on the btn_radio icon.
IOS:Just extend Uibutton to custom button,and modify like this:
CGFloat imageWidth = jumpBtn.imageView.bounds.size.width;
CGFloat labelWidth = jumpBtn.titleLabel.bounds.size.width;
jumpBtn.imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth, 0, -labelWidth);
jumpBtn.titleEdgeInsets = UIEdgeInsetsMake(0, -imageWidth, 0, imageWidth);
The titleEdgeInsets property and the imageEdgeInsets property are only used to adjust the image and label position properties when the button is drawn, and do not affect the size of the button itself.
If the image is to the right and the label is to the left, the left side of the image is shifted to the right of the labelWidth from the left side of the button, and the right side of the image is moved to the right by the labelWidth from the left side of the label.
I have a page created using Xamarin Forms. I want to add a toolbar at the bottom of the screen like an overlay but doesnt change the actual layout of the screen. It should just overlay above everything and always be at the bottom.
It should showup only when there is a particular event. SO it will be added dynamically.
Any ideas - or if you can send point me in the right direction. I do not want to use any nuget packages.
Have you tried to use AbsoluteLayout/Grid?
<Grid>
<StackLayout><Label Text="Your content"/></StackLayout>
<Button x:Name="toolbar" VerticalOptions="End" Text="Your toolbar" />
</Grid>
Show/hide the control based on your event.
If you could show the code of displayToolbar it would be easier to write a code that suits your needs, but it should be pretty easy even without the code :)
You could do this with a RelativeLayout, AbsoluteLayout or a Grid but I recommend doing it with a Grid because is much lighter than RelativeLayout and has a lot more functions than AbsoluteLayout.
So, make the root of every page that you want to use displayToolbar a Grid with one row and one column. Add the actual content of the page to that Grid as a child view.
Now comes the part that would be easier with your code. When you want to display the toolbar, add the toolbar view as a child of the root Grid with VerticalOptions set to LayoutOptions.End.
That's it. The toolbar will be added in front of every view of the page and if you want to dynamically remove the toolbar, remove the root Grid's last child.
The layout would be something like this:
Grid root;
internal SomePageConstructor()
{
root = new Grid
{
ColumnDefinitions =
{
new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }
},
RowDefinitions =
{
new RowDefinition { Height = new GridLength(1, GridUnitType.Star) }
}
};
root.Children.Add(actualPageContent, 0, 0);
Content = root;
}
void DisplayToolbar()
{
var toolbar = new StackLayout { VerticalOptions = LayoutOptions.End };
root.Children.Add(toolbar, 0, 0);
}
void RemoveToolbar()
{
root.Children.Remove(root.Children[1]);
}
Note: I did this directly on StackOverflow, code could need some corrections.
From this sample, you could do an animation of the toolbar coming from below the page or something like it. Just change the DisplayToolbar and the RemoveToolvar methods.
Obs. Method names on C# are PascalCased (every word is capitalized) so your displayToolbar is DisplayToolbar.
Hope it helps! :)
I have two nested StackLayouts:
<StackLayout>
<StackLayout>
</StackLayout>
</StackLayout>
I would like to add click event on outer StackLayout that will not be triggered when inner StackLayout is clicked. Is it possible in Xamarin Forms? If I can filter click event (with if block) I would also be happy.
I think you can take a look to Rg Plugin popup.
it has this property
CloseWhenBackgroundIsClicked: Close pop-up when click on the background
You can add what you want to this popup because you can add a ContentPage
// Use these methods in PopupNavigation globally or Navigation in your pages
// Open new PopupPage
Task PushAsync(PopupPage page, bool animate = true) // Navigation.PushPopupAsync
// Hide last PopupPage
Task PopAsync(bool animate = true) // Navigation.PopPopupAsync
// Hide all PopupPage with animations
Task PopAllAsync(bool animate = true) // Navigation.PopAllPopupAsync
// Remove one popup page in stack
Task RemovePageAsync(PopupPage page, bool animate = true) // Navigation.RemovePopupPageAsync
I'm into Xamarin since about week and have a question about the possibility of making loading icon inside a button.
I would like to achieve something similiar to this:
https://jsfiddle.net/mr8fwtcv/
I was trying to achieve this effect with FontAwesome but had a problem animating it, so it would be not bad to use Activity Indicator in the solution.
My button is placed inside Stack Layout, and here is the code:
var loginButton = new Button
{
BackgroundColor = Color.FromHex("689F38"),
TextColor = Color.White,
HeightRequest = 46,
Text = "Log in",
FontAttributes = FontAttributes.Bold,
FontSize = 18,
Margin = margin
};
I was already looking for some plugins / solutions but couldn't find any.
Thanks in advance.
You will have to use a Layout to have more than one control in it. If you are not looking for CustomRenderers then what you could do is have a RelativeLayout and inside that both the Button and the Activity Indicator. You will also have to write a Converter for the button text that will set the text to string.Empty when the IsBusy is true.
For example:
<StackLayout>
<ActivityIndicator IsVisible="{Binding IsBusy}" IsRunning="{Binding IsBusy}" />
<Button Text="{Binding ButtonText, Converter={StaticResource ButtonTextConverter}, ConverterParameter={Binding IsBusy}}" />
</StackLayout>
Also if you are planning to use this in multiple places you can create this as a custom control.
You can check out the custom control code here.
The full project is available here.