I'm using Xamarin.Forms. I tried this code but it has not worked; how can I resize the buttons?
<ContentView.Content>
<StackLayout>
<Button Text="1" WidthRequest="50"></Button>
<Button Text="2" WidthRequest="50"></Button>
</StackLayout>
</ContentView.Content>
Thank you.
<StackLayout >
<Button Text="1" WidthRequest="50"
HorizontalOptions="Center"></Button>
<Button Text="2" WidthRequest="50"
HorizontalOptions="Center"></Button>
</StackLayout>
You can use HorizontalOptions attribute to make the width or height be as large as needed to contain the elements within it.
<Button HorizontalOptions="Center" Text="Retry" />
<StackLayout>
<!--I am wider but shorter-->
<Button Text="1" WidthRequest="100" HeightRequest="50"></Button>
<!--I am narrower but longer-->
<Button Text="2" WidthRequest="50" HeightRequest="100"></Button>
<!--I fill the whole width. See also VerticalOptions-->
<Button Text="3" HorizontalOptions="FillAndExpand"></Button>
</StackLayout>
Just Size parent View, for example if it's in a StackLayout, it'll be same size with parent.
<Grid HeightRequest="120" WidthRequest="120" HorizontalOptions="Center">
<Button Text="Hello!" BackgroundColor="Red"/>
</Grid>
It'll be shown 120 x 120,
Because, Button's Default HorizontalOptions is Fill, VerticalOptions is Start. But some Controls like buttons, ignores Height or Width request and prefer to fill parent. Other elements in the same Layout effects button. Just resize parent of button and leave it.
Can you try the below mentioned method:
<StackPanel>
<Button Content = "Button1" Height = "30" Width = "80" Foreground = "Blue" FontSize = "12" Margin = "10"/>
<Button Content = "Button2" Height = "30" Width = "80" Foreground = "Blue" FontSize = "12" Margin = "10"/>
<Button Content = "Button3" Height = "30" Width = "80" Foreground = "Blue" FontSize = "12" Margin = "10"/>
</StackPanel>
Related
How do you stop a ScrollViewer's scrollbar from overlapping content like this?
I have a RichTextBlock containing text and no matter how wide I make the RichTextBlock, or how I change the Margin and Padding values, I cannot get the scrollbar to move further to the right to stop this overlap from happening. I'm running Windows 10 and it is configured to hide scrollbars until the mouse pointer hovers over them.
Below is the XAML for my app.
<Page
x:Class="PaulWinPOS1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PaulWinPOS1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Margin="0,26,0,0">
<Button x:Name="butConnect" Content="Connect" Margin="0,38,48,0" VerticalAlignment="Top" RenderTransformOrigin="-3.274,0.344" HorizontalAlignment="Right" Height="32" Click="ButConnect_Click" Width="92"/>
<Button x:Name="butLogin" Content="Login" Margin="0,92,48,0" VerticalAlignment="Top" RenderTransformOrigin="-3.274,0.344" HorizontalAlignment="Right" Height="32" Width="92" IsEnabled="False" Click="ButLogin_Click"/>
<Button x:Name="butAdd" Content="Add Item" Margin="0,143,48,0" VerticalAlignment="Top" RenderTransformOrigin="-3.274,0.344" HorizontalAlignment="Right" Width="92" IsEnabled="False" Click="ButAdd_Click"/>
<ScrollViewer x:Name="scrollViewerWeb"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
HorizontalAlignment="Left"
Width="350"
Padding="16,0"
Grid.RowSpan="10"
FontFamily="Segoe UI" RequestedTheme="Dark" ZoomMode="Enabled"
Margin="669,304,0,0" >
<WebView x:Name="webviewReceipt"
Margin="10,10,50,10"
HorizontalAlignment="Left"
Height="333" Width="300"
VerticalAlignment="Top"
ScrollViewer.VerticalScrollMode="Enabled"
ScrollViewer.VerticalScrollBarVisibility="Visible" />
</ScrollViewer>
<Button x:Name="butDisconnect" Content="Disconnect" Margin="0,244,48,0" VerticalAlignment="Top" RenderTransformOrigin="-3.274,0.344" HorizontalAlignment="Right" Height="32" Width="92" Click="ButDisconnect_Click"/>
</Grid>
</Page>
The scroll bar of WebView is special and cannot be solved by the conventional ScrollViewer additional properties, but the scroll bar of the WebView can be disabled through the CSS of the web page.
body {
-ms-overflow-style: none;
}
If you cannot modify the source code of the webpage, you can perform the following operations after the WebView content is loaded:
private async void webviewReceipt_DOMContentLoaded(WebView sender, WebViewDOMContentLoadedEventArgs args)
{
string js = "var style = document.createElement('style');" +
"style.type = 'text/css';" +
"style.innerHTML = \"body{ -ms-overflow-style: none !important; }\";" +
"document.getElementsByTagName('Head').item(0).appendChild(style); ";
await webviewReceipt.InvokeScriptAsync("eval", new string[] { js });
}
Update
If we need to display a scroll bar, we can add a padding-right to the body so that the scroll bar does not block the content.
private async void webviewReceipt_DOMContentLoaded(WebView sender, WebViewDOMContentLoadedEventArgs args)
{
string js = "var style = document.createElement('style');" +
"style.type = 'text/css';" +
"style.innerHTML = \"body{ padding-right: 24px; }\";" +
"document.getElementsByTagName('Head').item(0).appendChild(style); ";
await webviewReceipt.InvokeScriptAsync("eval", new string[] { js });
}
You need to add a Padding to ScrollViewer.
<ScrollViewer Padding="18, 0">
<RichTextBlock />
</ScrollViewer>
Usually the ScrollBar Width is 18.
It looks like you have the scroll bars enabled on both the web view and scroll viewer. You can try disabling the scroll bars on one of them to see if it makes a difference.
The listview is so slow when scrolling. It hits the bottom and bounces like it has run out of items to display. If you retry, it lets you scroll further. The same thing happens on the way back up the list.
I load in my array of only 40 items using a vuex getter.
computed: {
history () {
return this.$store.getters.allHistory;
}
},
Then the ListView is simply
<ListView ref="listView" for="item in history">
<v-template>
<StackLayout height="60" padding="10">
<Label :text="item.title" textWrap="true"></Label>
</StackLayout>/>
</v-template>
</ListView>
Removing the fixed height and padding seemed to fix. This is working...
<ListView ref="listView" for="item in history">
<v-template>
<GridLayout columns="auto,*" rows="auto, auto" margin="10">
<Image v-show="item.poster_url.length > 0" :src="item.poster_url" marginRight="5"
stretch="aspectFill" height="100" borderRadius="5"></Image>
<StackLayout col="1" row="0" rowSpan="2">
<Label :text="item.title" textWrap="true"></Label>
</StackLayout>
</GridLayout>
</v-template>
</ListView>
How I can change size icon? I want to enlarge because the icon is too small. In the original the icon has a correct size but in the application is too small
<StackLayout>
<local:AnimatedButton BackgroundColor="#ffffff"
BorderColor="#ffffff"
BorderRadius="25"
WidthRequest="50"
HeightRequest="50"
Command="{Binding CenterMyLocationCommand}">
<Button.Image>
<FileImageSource File="googlemap_view_center_button.png" />
</Button.Image>
</local:AnimatedButton>
</StackLayout>
Try to add/change WidthRequest and HeightRequest (also check: Width and Height) attributes
I have a question guys. Im kind new to xaml and, I'm trying to make the 4 buttons i created from my xaml code line up with the labels i have created from my xaml code. now, my first image("Image from my xaml code") thats the image i have when running my xaml code. however, when i try to keep it all into one stack layout it doesn't match up as in my finish image in which ("im trying to achieve image") any pointers in the right direction in what im doing wrong?
<!-- Page -->
<StackLayout
x:Name = "CustomerStackLayout">
<Label
x:Name = "ThisLabel"
Text = "Order #2102"
VerticalOptions= "Start" >
</Label>
<Label
Text = "John Doe"
VerticalOptions ="Start">
</Label>
<Label
Text = "(832)-555-4518"
VerticalOptions ="Start">
</Label>
<Label
Text = "5612 StillWater Dr"
VerticalOptions ="Start">
</Label>
<Label
Text = "Houston, TX 77079"
VerticalOptions ="Start">
</Label>
<Label
Text = "Pickup Time:Mon July 10, 4:30PM"
TextColor = "Yellow"
HorizontalOptions = "Center">
</Label>
<!--AbsoluteLayout.LayoutBounds = "0.975,0.01,100,25-->
<Button
x:Name = "callButton"
Text ="call"
HorizontalOptions = "End"
VerticalOptions = "End"
Clicked = "Handle_Clicked"
BackgroundColor = "Red">
</Button>
<!--AbsoluteLayout.LayoutBounds = "0.975,0.06,100,25"-->
<Button
Text = "text"
x:Name = "textButton"
Clicked = "textButton_Clicked"
BackgroundColor = "Red"
HorizontalOptions = "End"/>
<Button
Text = "map"
HorizontalOptions = "End"
VerticalOptions = "Start"
x:Name = "mapButton"
Clicked="MapsButton_Clicked"
BackgroundColor = "Red"/>
<!--AbsoluteLayout.LayoutBounds = ".7,0.9,104,34"-->
<AbsoluteLayout>
<Button
x:Name = "ImOnItButton"
Text ="Im on it"
Clicked = "ImOnIt_Clicked"
IsVisible = "true"
BackgroundColor = "Red"
AbsoluteLayout.LayoutBounds = ".7,0.9,104,34"/>
<!--AbsoluteLayout.LayoutBounds = ".7,0.9,104,34"-->
<Button
x:Name = "ArrivedButton"
Text = "Arrived"
Clicked ="arrivedButton_Clicked"
IsVisible = "false"
BackgroundColor = "Red"
AbsoluteLayout.LayoutBounds = ".7,0.9,104,34"
/>
</AbsoluteLayout>
</StackLayout>
StackLayout will lay out its children in order, either vertically or horizontally. Since you didn't specify an Orientation, Vertical is implied, which is exactly what you are seeing. As the name implies, the children are stacked on top of each other.
The short answer is that you will need a more complex layout than a single StackLayout. You could probably achieve your goal with nested StackLayouts, but that would be tough, and less efficient than other options.
At least for the top portion of your design, a Grid is probably your best bet, something like:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label
x:Name = "ThisLabel"
Text = "Order #2102"
HorizontalOptions = "Center"
Grid.Row = "0"
Grid.Column = "0"
Grid.ColumnSpan = "2">
</Label>
<Label
x:Name = "ThisLabel"
Text = "Order #2102"
VerticalOptions= "Start"
Grid.Row="1"
Grid.Column="0">
</Label>
<Button
x:Name = "callButton"
Text ="call"
HorizontalOptions = "End"
VerticalOptions = "End"
Clicked = "Handle_Clicked"
BackgroundColor = "Red"
Grid.Row="1"
Grid.Column="">
</Button>
<Label
x:Name = "ThisLabel"
Text = "Order #2102"
VerticalOptions= "Start"
Grid.Row="2"
Grid.Column="0">
</Label>
<Button
Text = "text"
x:Name = "textButton"
Clicked = "textButton_Clicked"
BackgroundColor = "Red"
HorizontalOptions = "End"
Grid.Row="2"
Grid.Column="1">
</Button>
<Label
x:Name = "ThisLabel"
Text = "Order #2102"
VerticalOptions= "Start"
Grid.Row="3"
Grid.Column="0">
</Label>
<Button
Text = "map"
HorizontalOptions = "End"
VerticalOptions = "Start"
x:Name = "mapButton"
Clicked="MapsButton_Clicked"
BackgroundColor = "Red"
Grid.Row="3"
Grid.Column="1">
</Button>
</Grid>
You may not need all of the the VerticalOptions and HorizontalOptions with the Grid, but this should be a decent place to start.
I'm newbie when it comes to xamarin, also in XAML, I just want to ask how to add a padding inside my viewcell below is my code
<TableView>
<TableRoot>
<TableSection Title = "Basic information">
<EntryCell Label = "First name: " Placeholder = "Required" />
<EntryCell Label = "Middel name: " Placeholder = "Optional" />
<EntryCell Label = "Last name: " Placeholder = "Required" />
<ViewCell>
<Picker x:Name="genderPicker" Title = "Select gender"></Picker>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
what i want is to add a little bit padding inside of this code.
![<ViewCell>
<Picker x:Name="genderPicker" Title = "Select gender"></Picker>
</ViewCell>][1]
This is what it looks like, so i just want to add some left and right space on my picker view.
http://i.stack.imgur.com/89qt9.png
Something like this should works fine:
<Picker x:Name="genderPicker"
Title = "Select gender"
Padding="left, top, right, bottom">
</Picker>
With left,top,right and bottom the value you would like. More information here
Add a StackLayout, or any other Layout subtype that supports padding, inside your ViewCell. You can then use the Layout properties to adjust the Picker.
<ViewCell>
<StackLayout Padding="10,0,0,0" HorizontalOptions="FillAndExpand">
<Picker HorizontalOptions="CenterAndExpand" >
<Picker.Items>
<x:String>Disabled</x:String>
<x:String>5 minutes</x:String>
</Picker.Items>
<Picker.SelectedIndex>0</Picker.SelectedIndex>
</Picker>
</StackLayout>
</ViewCell>
Unlike CSS or Android Views where you can tweak the controls themselves, you'll handle most of your padding using parent Layouts when working in Xamarin.Forms.