Skip to content

Instantly share code, notes, and snippets.

@tj-devel709
Last active July 18, 2024 18:44
Show Gist options
  • Save tj-devel709/414d75c78cb43b9034eb85351e9f3298 to your computer and use it in GitHub Desktop.
Save tj-devel709/414d75c78cb43b9034eb85351e9f3298 to your computer and use it in GitHub Desktop.
<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