-
-
Save tj-devel709/414d75c78cb43b9034eb85351e9f3298 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ContentPage | |
xmlns="http://schemas.microsoft.com/dotnet/2021/maui" | |
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" | |
x:Class="Maui.Controls.Sample.MainPage" | |
xmlns:local="clr-namespace:Maui.Controls.Sample"> | |
<ScrollView> | |
<VerticalStackLayout Margin="0,10,0,0"> | |
<Button HeightRequest="250" | |
Text="BorderWidth Changing with a slightly longer text" | |
ImageSource="dotnet_bot.png" | |
BackgroundColor="Green" | |
BorderColor="Black" | |
BorderWidth="{Binding Source={x:Reference borderWidthSlider}, | |
Path=Value}" | |
x:Name="TextImageButton" | |
LineBreakMode="MiddleTruncation" | |
AutomationId="TextImageButton"/> | |
<Slider x:Name="borderWidthSlider" Maximum="100" Value="0" /> | |
<!-- <Button Text="Change BorderWidth" Clicked="Change_BorderWidth_Button_Clicked" AutomationId="Change_BorderWidth_Button"/> --> | |
<BoxView HeightRequest="80"/> | |
<Label Text="Image on bottom with spacing of 20" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" /> | |
<Button ImageSource="dotnet_bot.png" | |
Text="Button 1" | |
ContentLayout="Bottom, 20" | |
Background="LightGray"/> | |
<BoxView HeightRequest="30"/> | |
<Label Text="Image on top with spacing of 20, padding of 10, long text, HeightRequest of 100, and WidthRequest of 200" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" /> | |
<Button ImageSource="dotnet_bot.png" | |
Text="Button 2 with a super duper extremely very long super duper extremely very long super duper extremely very long text box" | |
ContentLayout="Top, 20" | |
Padding="10" | |
LineBreakMode="TailTruncation" | |
HeightRequest="100" | |
WidthRequest="200" | |
Background="LightGray"/> | |
<BoxView HeightRequest="30"/> | |
<Label Text="Image on left with spacing of 20, long text, and WidthRequest of 200" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" /> | |
<Button ImageSource="dotnet_bot.png" | |
Text="Button 3 with a super duper extremely very long super duper extremely very long super duper extremely very long text box" | |
ContentLayout="Left, 20" | |
LineBreakMode="TailTruncation" | |
WidthRequest="200" | |
Background="LightGray"/> | |
<BoxView HeightRequest="30"/> | |
<Label Text="Image on right with spacing of 20 and padding of 20" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" /> | |
<Button ImageSource="dotnet_bot.png" | |
Text="Button 4" | |
Padding="20" | |
ContentLayout="Right, 20" | |
Background="LightGray"/> | |
<BoxView HeightRequest="30"/> | |
<Label Text="Image on left with spacing of 0 and padding of 0" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" /> | |
<Button ImageSource="dotnet_bot.png" | |
Text="Button 5" | |
Padding="0" | |
ContentLayout="Left, 0" | |
Background="LightGray"/> | |
<BoxView HeightRequest="100"/> | |
<Label Text="Now using smaller images (25x25)" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Background="LightBlue" HeightRequest="50"/> | |
<BoxView HeightRequest="100"/> | |
<Label Text="Small image on bottom with spacing of 20" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" /> | |
<Button ImageSource="dotnet_bot_resized.png" | |
Text="Button 1_1" | |
ContentLayout="Bottom, 20" | |
Background="LightGray"/> | |
<BoxView HeightRequest="30"/> | |
<Label Text="Small image on top with spacing of 20, padding of 10, long text, HeightRequest of 100, and WidthRequest of 200" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" /> | |
<Button ImageSource="dotnet_bot_resized.png" | |
Text="Button 2_1 with a super duper extremely very long super duper extremely very long super duper extremely very long text box" | |
ContentLayout="Top, 20" | |
Padding="20" | |
LineBreakMode="TailTruncation" | |
HeightRequest="100" | |
WidthRequest="200" | |
Background="LightGray"/> | |
<BoxView HeightRequest="30"/> | |
<Label Text="Small image on top with spacing of 20, padding of 10, long text, HeightRequest of 100, and WidthRequest of 200" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" /> | |
<Button ImageSource="dotnet_bot_resized.png" | |
Text="Button 2_1_1" | |
ContentLayout="Top, 20" | |
Padding="10" | |
LineBreakMode="TailTruncation" | |
HeightRequest="100" | |
WidthRequest="200" | |
Background="LightGray"/> | |
<BoxView HeightRequest="30"/> | |
<Label Text="Small image on left with spacing of 20, long text, and WidthRequest of 200" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" /> | |
<Button ImageSource="dotnet_bot_resized.png" | |
Text="Button 3_1 with a super duper extremely very long super duper extremely very long super duper extremely very long text box" | |
ContentLayout="Left, 20" | |
LineBreakMode="TailTruncation" | |
WidthRequest="200" | |
Background="LightGray"/> | |
<BoxView HeightRequest="30"/> | |
<Label Text="Small image on right with spacing of 20 and padding of 20" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" /> | |
<Button ImageSource="dotnet_bot_resized.png" | |
Text="Button 4_1" | |
Padding="20" | |
ContentLayout="Right, 20" | |
Background="LightGray"/> | |
<BoxView HeightRequest="30"/> | |
<Label Text="Small image on left with spacing of 0 and padding of 0" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" /> | |
<Button ImageSource="dotnet_bot_resized.png" | |
Text="Button 5_1" | |
Padding="0" | |
ContentLayout="Left, 0" | |
Background="LightGray"/> | |
<BoxView HeightRequest="100"/> | |
<Label Text="Original Image size with BorderWidth and Horizontal Options" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Background="LightBlue" HeightRequest="50"/> | |
<BoxView HeightRequest="100"/> | |
<Label Text="Image on bottom with spacing of 20, HorizontalOptions Center and BorderWidth 10" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" /> | |
<Button ImageSource="dotnet_bot.png" | |
Text="Button 1_2" | |
BorderWidth="10" | |
HorizontalOptions="Center" | |
ContentLayout="Bottom, 20" | |
Background="LightGray"/> | |
<BoxView HeightRequest="30"/> | |
<Label Text="Image on top with spacing of 20, padding of 10, long text, HeightRequest of 100, and WidthRequest of 200, HorizontalOptions Start and BorderWidth 5" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" /> | |
<Button ImageSource="dotnet_bot.png" | |
Text="Button 2_2 with a super duper extremely very long super duper extremely very long super duper extremely very long text box" | |
ContentLayout="Top, 20" | |
Padding="10" | |
BorderWidth="5" | |
HorizontalOptions="Start" | |
LineBreakMode="TailTruncation" | |
HeightRequest="100" | |
WidthRequest="200" | |
Background="LightGray"/> | |
<BoxView HeightRequest="30"/> | |
<Label Text="Image on left with spacing of 20, long text, and WidthRequest of 200, HorizontalOptions End and BorderWidth 10" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" /> | |
<Button ImageSource="dotnet_bot.png" | |
Text="Button 3_2 with a super duper extremely very long super duper extremely very long super duper extremely very long text box" | |
ContentLayout="Left, 20" | |
BorderWidth="10" | |
HorizontalOptions="End" | |
LineBreakMode="TailTruncation" | |
WidthRequest="200" | |
Background="LightGray"/> | |
<BoxView HeightRequest="30"/> | |
<Label Text="Image on right with spacing of 20 and padding of 20, HorizontalOptions Fill and BorderWidth -5" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" /> | |
<Button ImageSource="dotnet_bot.png" | |
Text="Button 4_2" | |
Padding="20" | |
BorderWidth="-5" | |
HorizontalOptions="Fill" | |
ContentLayout="Right, 20" | |
Background="LightGray"/> | |
<BoxView HeightRequest="30"/> | |
<Label Text="Image on left with spacing of 0 and padding of 0, HorizontalOptions Center and BorderWidth 20" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" /> | |
<Button ImageSource="dotnet_bot.png" | |
Text="Button 5_2" | |
BorderWidth="20" | |
HorizontalOptions="Center" | |
Padding="0" | |
ContentLayout="Left, 0" | |
Background="LightGray"/> | |
<BoxView HeightRequest="100"/> | |
<Label Text="Original Image size with Wrapped LineBreakModes" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Background="LightBlue" HeightRequest="50"/> | |
<BoxView HeightRequest="100"/> | |
<Label Text="Image on bottom with spacing of 20" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" /> | |
<Button ImageSource="dotnet_bot.png" | |
Text="Button 1" | |
LineBreakMode="WordWrap" | |
ContentLayout="Bottom, 20" | |
Background="LightGray"/> | |
<BoxView HeightRequest="30"/> | |
<Label Text="Image on top with spacing of 20, padding of 10, long text, HeightRequest of 100, and WidthRequest of 200" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" /> | |
<Button ImageSource="dotnet_bot.png" | |
Text="Button 2 with a super duper extremely very long super duper extremely very long super duper extremely very long text box" | |
ContentLayout="Top, 20" | |
Padding="10" | |
LineBreakMode="CharacterWrap" | |
HeightRequest="100" | |
WidthRequest="200" | |
Background="LightGray"/> | |
<BoxView HeightRequest="30"/> | |
<Label Text="Image on left with spacing of 20, long text, and WidthRequest of 200" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" /> | |
<Button ImageSource="dotnet_bot.png" | |
Text="Button 3 with a super duper extremely very long super duper extremely very long super duper extremely very long text box" | |
ContentLayout="Left, 20" | |
LineBreakMode="WordWrap" | |
WidthRequest="200" | |
Background="LightGray"/> | |
<BoxView HeightRequest="30"/> | |
<Label Text="Image on right with spacing of 20 and padding of 20" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" /> | |
<Button ImageSource="dotnet_bot.png" | |
Text="Button 4" | |
Padding="20" | |
LineBreakMode="CharacterWrap" | |
ContentLayout="Right, 20" | |
Background="LightGray"/> | |
<BoxView HeightRequest="30"/> | |
<Label Text="Image on left with spacing of 0 and padding of 0" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" /> | |
<Button ImageSource="dotnet_bot.png" | |
Text="Button 5" | |
Padding="0" | |
LineBreakMode="WordWrap" | |
ContentLayout="Left, 0" | |
Background="LightGray"/> | |
<BoxView HeightRequest="30"/> | |
<HorizontalStackLayout> | |
<Button Text="Regular Button" ContentLayout="Top, 10" ImageSource="dotnet_bot.png" Background="lightblue"/> | |
</HorizontalStackLayout> | |
<BoxView HeightRequest="30"/> | |
<HorizontalStackLayout> | |
<Button Text="Regular Button with longer text just to test" ContentLayout="Top, 10" ImageSource="dotnet_bot.png" Background="lightgreen"/> | |
</HorizontalStackLayout> | |
<BoxView HeightRequest="30"/> | |
<HorizontalStackLayout> | |
<Button Text="Regular Button" ContentLayout="Top, 10" ImageSource="dotnet_bot_resized.png" Background="lightblue"/> | |
</HorizontalStackLayout> | |
<BoxView HeightRequest="30"/> | |
<HorizontalStackLayout> | |
<Button Text="Regular Button with longer text just to test" ContentLayout="Top, 10" ImageSource="dotnet_bot_resized.png" Background="lightgreen"/> | |
</HorizontalStackLayout> | |
</VerticalStackLayout> | |
</ScrollView> | |
</ContentPage> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment