Skip to content

[UI] Replace Frame with Border #133

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

[UI] Replace Frame with Border #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f4d491a
Replace frame with border
Nov 17, 2024
0c8fb94
Additional frame replacement
Nov 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions BrickController2/BrickController2/App.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,12 +150,11 @@
</Style>

<!-- Dialog related -->

<Style x:Key="DialogFrameStyle" TargetType="Frame">
<Style x:Key="DialogBorderStyle" TargetType="Border">
<Setter Property="BackgroundColor" Value="{DynamicResource DialogBackgroundColor}"/>
<Setter Property="BorderColor" Value="{DynamicResource DialogBorderColor}"/>
<Setter Property="CornerRadius" Value="10"/>
<Setter Property="HasShadow" Value="True"/>
<Setter Property="Stroke" Value="{DynamicResource DialogBorderColor}"/>
<Setter Property="StrokeShape" Value="RoundRectangle 10"/>
<Setter Property="StrokeThickness" Value="1"/>
</Style>

<!-- Picker button -->
Expand Down
24 changes: 12 additions & 12 deletions BrickController2/BrickController2/UI/Controls/Dialogs.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,19 @@

<!-- Message box -->
<ContentView x:Name="MessageBox" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
<Frame x:Name="MessageBoxFrame" Style="{StaticResource DialogFrameStyle}" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="280" Padding="20">
<Border x:Name="MessageBoxBorder" Style="{StaticResource DialogBorderStyle}" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="280" Padding="20">
<StackLayout Orientation="Vertical">
<Label x:Name="MessageBoxTitle" HorizontalOptions="Center" FontAttributes="Bold" FontSize="Large"/>
<Label x:Name="MessageBoxMessage" HorizontalOptions="Center"/>
<BoxView Style="{StaticResource DividerBoxViewStyle}" Margin="0,16,0,16"/>
<Button x:Name="MessageBoxButton"/>
</StackLayout>
</Frame>
</Border>
</ContentView>

<!-- Question dialog -->
<ContentView x:Name="QuestionDialog" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
<Frame x:Name="QuestionDialogFrame" Style="{StaticResource DialogFrameStyle}" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="280" Padding="20">
<Border x:Name="QuestionDialogBorder" Style="{StaticResource DialogBorderStyle}" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="280" Padding="20">
<StackLayout Orientation="Vertical">
<Label x:Name="QuestionDialogTitle" HorizontalOptions="Center" FontAttributes="Bold" FontSize="Large"/>
<Label x:Name="QuestionDialogMessage" HorizontalOptions="Center"/>
Expand All @@ -38,12 +38,12 @@
<Button x:Name="QuestionDialogNegativeButton" Grid.Column="1" BackgroundColor="{DynamicResource NegativeColor}"/>
</Grid>
</StackLayout>
</Frame>
</Border>
</ContentView>

<!-- Input dialog -->
<ContentView x:Name="InputDialog" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
<Frame x:Name="InputDialogFrame" Style="{StaticResource DialogFrameStyle}" HorizontalOptions="Center" VerticalOptions="Start" WidthRequest="280" Margin="0,10,0,0" Padding="20">
<Border x:Name="InputDialogBorder" Style="{StaticResource DialogBorderStyle}" HorizontalOptions="Center" VerticalOptions="Start" WidthRequest="280" Margin="0,10,0,0" Padding="20">
<StackLayout Orientation="Vertical">
<Entry x:Name="InputDialogEntry" HorizontalOptions="FillAndExpand"/>
<BoxView Style="{StaticResource DividerBoxViewStyle}" Margin="0,16,0,16"/>
Expand All @@ -56,12 +56,12 @@
<Button x:Name="InputDialogNegativeButton" Grid.Column="1" BackgroundColor="{DynamicResource NegativeColor}"/>
</Grid>
</StackLayout>
</Frame>
</Border>
</ContentView>

<!-- Selection dialog -->
<ContentView x:Name="SelectionDialog" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
<Frame x:Name="SelectionDialogFrame" Style="{StaticResource DialogFrameStyle}" HorizontalOptions="Center" VerticalOptions="Start" WidthRequest="280" Margin="0,50,0,50" Padding="20">
<Border x:Name="SelectionDialogBorder" Style="{StaticResource DialogBorderStyle}" HorizontalOptions="Center" VerticalOptions="Start" WidthRequest="280" Margin="0,50,0,50" Padding="20">
<StackLayout Orientation="Vertical">
<Label x:Name="SelectionDialogTitle" HorizontalOptions="Center" FontAttributes="Bold" FontSize="Large"/>
<BoxView Style="{StaticResource DividerBoxViewStyle}" Margin="0,8,0,8"/>
Expand All @@ -75,12 +75,12 @@
<BoxView Style="{StaticResource DividerBoxViewStyle}" Margin="0,16,0,16"/>
<Button x:Name="SelectionDialogCancelButton" BackgroundColor="{DynamicResource NegativeColor}"/>
</StackLayout>
</Frame>
</Border>
</ContentView>

<!-- Progress dialog -->
<ContentView x:Name="ProgressDialog" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
<Frame x:Name="ProgressDialogFrame" Style="{StaticResource DialogFrameStyle}" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="280" Padding="20">
<Border x:Name="ProgressDialogBorder" Style="{StaticResource DialogBorderStyle}" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="280" Padding="20">
<StackLayout Orientation="Vertical">
<Label x:Name="ProgressDialogTitle" HorizontalOptions="Center" FontAttributes="Bold" FontSize="Large"/>
<Label x:Name="ProgressDialogMessage" HorizontalOptions="Center"/>
Expand All @@ -91,19 +91,19 @@
<Button x:Name="ProgressDialogCancelButton" BackgroundColor="{DynamicResource NegativeColor}"/>
</StackLayout>
</StackLayout>
</Frame>
</Border>
</ContentView>

<!-- Game controller event dialog -->
<ContentView x:Name="GameControllerEventDialog" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
<Frame x:Name="GameControllerEventDialogFrame" Style="{StaticResource DialogFrameStyle}" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="280" Padding="20">
<Border x:Name="GameControllerEventDialogBorder" Style="{StaticResource DialogBorderStyle}" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="280" Padding="20">
<StackLayout Orientation="Vertical">
<Label x:Name="GameControllerEventDialogTitle" HorizontalOptions="Center" FontAttributes="Bold" FontSize="Large"/>
<Label x:Name="GameControllerEventDialogMessage" HorizontalOptions="Center"/>
<BoxView Style="{StaticResource DividerBoxViewStyle}" Margin="0,16,0,16"/>
<Button x:Name="GameControllerEventDialogCancelButton" BackgroundColor="{DynamicResource NegativeColor}"/>
</StackLayout>
</Frame>
</Border>
</ContentView>

</AbsoluteLayout>
Expand Down
8 changes: 4 additions & 4 deletions BrickController2/BrickController2/UI/Controls/FloatingActionButton.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@
x:Class="BrickController2.UI.Controls.FloatingActionButton">

<ContentView.Content>
<Frame x:Name="MyFrame" WidthRequest="50" HeightRequest="50" CornerRadius="25" Padding="0">
<Frame.GestureRecognizers>
<Border x:Name="MyFrame" WidthRequest="50" HeightRequest="50" StrokeShape="RoundRectangle 25" Padding="0">
<Border.GestureRecognizers>
<TapGestureRecognizer x:Name="MyTapGuestureRecognizer"/>
</Frame.GestureRecognizers>
</Border.GestureRecognizers>
<controls:ColorImage x:Name="MyImage" WidthRequest="20" HeightRequest="20" HorizontalOptions="Center" VerticalOptions="Center"/>
</Frame>
</Border>
</ContentView.Content>
</ContentView>
11 changes: 5 additions & 6 deletions BrickController2/BrickController2/UI/Controls/SegmentedControl.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,16 +106,15 @@ private void Build(IList<string> items)
#pragma warning restore CS0618 // Type or member is obsolete
_labels.Add(label);

var frame = new Frame
var border = new Border
{
BackgroundColor = Colors.Transparent,
Padding = new Thickness(1),
HasShadow = false
Padding = new Thickness(1)
};
frame.GestureRecognizers.Add(new TapGestureRecognizer { Command = new SafeCommand<int>(i => ItemTapped(i)), CommandParameter = index });
frame.Content = label;
border.GestureRecognizers.Add(new TapGestureRecognizer { Command = new SafeCommand<int>(i => ItemTapped(i)), CommandParameter = index });
border.Content = label;

MyStackLayout.Children.Add(frame);
MyStackLayout.Children.Add(border);
}

SetSelection(SelectedIndex);
Expand Down
36 changes: 18 additions & 18 deletions BrickController2/BrickController2/UI/Pages/CreationListPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,9 @@
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame Grid.Column="0" WidthRequest="40" HeightRequest="40" BackgroundColor="{Binding Id, Converter={StaticResource IntToColor}}" CornerRadius="20" Padding="0" HasShadow="False" VerticalOptions="Center">
<Border Grid.Column="0" WidthRequest="40" HeightRequest="40" BackgroundColor="{Binding Id, Converter={StaticResource IntToColor}}" StrokeShape="RoundRectangle 20" Padding="0" VerticalOptions="Center">
<Label Text="{Binding Name, Converter={StaticResource TextToCapitalInitial}}" TextColor="White" FontSize="Medium" HorizontalOptions="Center" VerticalOptions="Center"/>
</Frame>
</Border>
<Label Grid.Column="1" Text="{Binding Name}" FontSize="Large" FontAttributes="Bold" VerticalOptions="CenterAndExpand"/>
</Grid>
<BoxView Style="{StaticResource DividerBoxViewStyle}" Margin="6,6,6,0"/>
Expand All @@ -81,42 +81,42 @@
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

<Frame Grid.Column="0" HorizontalOptions="Fill" Padding="2" BackgroundColor="Transparent" HasShadow="False">
<Frame.GestureRecognizers>
<Border Grid.Column="0" HorizontalOptions="Fill" Padding="2" BackgroundColor="Transparent">
<Border.GestureRecognizers>
<TapGestureRecognizer Command="{Binding NavigateToDevicesCommand}"/>
</Frame.GestureRecognizers>
</Border.GestureRecognizers>
<VerticalStackLayout HorizontalOptions="CenterAndExpand" Spacing="6">
<controls:ColorImage Source="{extensions:ImageResource Source=ic_link.png}" Style="{StaticResource FooterColorImageStyle}"/>
<Label Text="{extensions:Translate Devices}" FontSize="Small"/>
</VerticalStackLayout>
</Frame>
<Frame Grid.Column="1" HorizontalOptions="Fill" Padding="2" BackgroundColor="Transparent" HasShadow="False">
<Frame.GestureRecognizers>
</Border>
<Border Grid.Column="1" HorizontalOptions="Fill" Padding="2" BackgroundColor="Transparent">
<Border.GestureRecognizers>
<TapGestureRecognizer Command="{Binding NavigateToControllerTesterCommand}"/>
</Frame.GestureRecognizers>
</Border.GestureRecognizers>
<VerticalStackLayout HorizontalOptions="CenterAndExpand" Spacing="6">
<controls:ColorImage Source="{extensions:ImageResource Source=ic_console.png}" Style="{StaticResource FooterColorImageStyle}"/>
<Label Text="{extensions:Translate Controller}" FontSize="Small"/>
</VerticalStackLayout>
</Frame>
<Frame Grid.Column="2" HorizontalOptions="Fill" Padding="2" BackgroundColor="Transparent" HasShadow="False">
<Frame.GestureRecognizers>
</Border>
<Border Grid.Column="2" HorizontalOptions="Fill" Padding="2" BackgroundColor="Transparent">
<Border.GestureRecognizers>
<TapGestureRecognizer Command="{Binding NavigateToSequencesCommand}"/>
</Frame.GestureRecognizers>
</Border.GestureRecognizers>
<VerticalStackLayout HorizontalOptions="CenterAndExpand" Spacing="6">
<controls:ColorImage Source="{extensions:ImageResource Source=ic_sequence.png}" Style="{StaticResource FooterColorImageStyle}"/>
<Label Text="{extensions:Translate Sequences}" FontSize="Small"/>
</VerticalStackLayout>
</Frame>
<Frame Grid.Column="3" HorizontalOptions="Fill" Padding="2" BackgroundColor="Transparent" HasShadow="False">
<Frame.GestureRecognizers>
</Border>
<Border Grid.Column="3" HorizontalOptions="Fill" Padding="2" BackgroundColor="Transparent">
<Border.GestureRecognizers>
<TapGestureRecognizer Command="{Binding NavigateToAboutCommand}"/>
</Frame.GestureRecognizers>
</Border.GestureRecognizers>
<VerticalStackLayout HorizontalOptions="CenterAndExpand" Spacing="6">
<controls:ColorImage Source="{extensions:ImageResource Source=ic_info.png}" Style="{StaticResource FooterColorImageStyle}"/>
<Label Text="{extensions:Translate About}" FontSize="Small"/>
</VerticalStackLayout>
</Frame>
</Border>
</Grid>

<controls:FloatingActionButton Grid.Row="0" ButtonColor="Red" ImageSource="{extensions:ImageResource Source=ic_add.png}" ImageColor="White" Command="{Binding AddCreationCommand}" HorizontalOptions="End" VerticalOptions="End" Margin="10"/>
Expand Down
4 changes: 2 additions & 2 deletions BrickController2/BrickController2/UI/Pages/SequenceListPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,9 @@
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame Grid.Column="0" WidthRequest="40" HeightRequest="40" BackgroundColor="{Binding Id, Converter={StaticResource IntToColor}}" CornerRadius="20" Padding="0" HasShadow="False" VerticalOptions="Center">
<Border Grid.Column="0" WidthRequest="40" HeightRequest="40" BackgroundColor="{Binding Id, Converter={StaticResource IntToColor}}" StrokeShape="RoundRectangle 20" Padding="0" VerticalOptions="Center">
<Label Text="{Binding Name, Converter={StaticResource TextToCapitalInitial}}" TextColor="White" FontSize="Medium" HorizontalOptions="Center" VerticalOptions="Center"/>
</Frame>
</Border>
<Label Grid.Column="1" Text="{Binding Name}" FontSize="Large" FontAttributes="Bold" VerticalOptions="CenterAndExpand"/>
</Grid>
<BoxView Style="{StaticResource DividerBoxViewStyle}" Margin="6,6,6,0"/>
Expand Down