public GitHubSettingsView()
{
var gitHubAvatarImage = new CircleImage
{
HeightRequest = 200,
WidthRequest = 200,
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand,
};
gitHubAvatarImage.SetBinding(CircleImage.SourceProperty, nameof(SettingsViewModel.GitHubAvatarImageSource));
var gitHubAliasLabel = new Label {
HorizontalTextAlignment = TextAlignment.Center
};
gitHubAliasLabel.SetBinding(Label.TextProperty, nameof(SettingsViewModel.GitHubAliasLabelText));
var gitHubLoginButton = new FontAwesomeButton
{
TextColor = Color.White,
FontSize = 24,
BackgroundColor = ColorConstants.DarkNavyBlue,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
Padding = new Thickness(10),
Margin = new Thickness(0, 25, 0, 5)
};
gitHubLoginButton.SetBinding(IsEnabledProperty, nameof(SettingsViewModel.IsNotAuthenticating));
gitHubLoginButton.SetBinding(Button.TextProperty, nameof(SettingsViewModel.LoginButtonText));
gitHubLoginButton.SetBinding(Button.CommandProperty, nameof(SettingsViewModel.LoginButtonCommand));
var activityIndicator = new ActivityIndicator
{
Color = ColorConstants.DarkBlue,
VerticalOptions = LayoutOptions.Start
};
activityIndicator.SetBinding(IsVisibleProperty, nameof(SettingsViewModel.IsAuthenticating));
activityIndicator.SetBinding(ActivityIndicator.IsRunningProperty, nameof(SettingsViewModel.IsAuthenticating));
var grid = new Grid
{
RowDefinitions =
{
new RowDefinition {
Height = new GridLength(7, GridUnitType.Star)
},
new RowDefinition {
Height = new GridLength(1, GridUnitType.Auto)
},
new RowDefinition {
Height = new GridLength(20, GridUnitType.Absolute)
}
},
ColumnDefinitions =
{
new ColumnDefinition {
Width = new GridLength(1, GridUnitType.Star)
}
}
};
grid.Children.Add(gitHubAvatarImage, 0, 0);
grid.Children.Add(gitHubLoginButton, 0, 1);
grid.Children.Add(activityIndicator, 0, 2);
Content = grid;
}
static Grid CreateRepositoryDataTemplate()
{
const int circleImageHeight = 90;
const int emojiColumnSize = 15;
const int countColumnSize = 30;
var image = new CircleImage
{
HeightRequest = circleImageHeight,
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.Center,
};
image.SetBinding(CircleImage.SourceProperty, nameof(Repository.OwnerAvatarUrl));
var repositoryNameLabel = new DarkBlueLabel
{
FontAttributes = FontAttributes.Bold,
HorizontalTextAlignment = TextAlignment.Start,
VerticalTextAlignment = TextAlignment.Start,
LineBreakMode = LineBreakMode.TailTruncation,
HorizontalOptions = LayoutOptions.FillAndExpand
};
repositoryNameLabel.SetBinding(Label.TextProperty, nameof(Repository.Name));
var repositoryDescriptionLabel = new DarkBlueLabel
{
FontSize = _smallFontSize,
LineBreakMode = LineBreakMode.WordWrap,
VerticalTextAlignment = TextAlignment.Start,
FontAttributes = FontAttributes.Italic
};
repositoryDescriptionLabel.SetBinding(Label.TextProperty, nameof(Repository.Description));
var starsSVGImage = new SmallNavyBlueSVGImage("star.svg");
var starsCountLabel = new DarkBlueLabel(_smallFontSize - 1);
starsCountLabel.SetBinding(Label.TextProperty, nameof(Repository.StarCount));
var forksSVGImage = new SmallNavyBlueSVGImage("repo_forked.svg");
var forksCountLabel = new DarkBlueLabel(_smallFontSize - 1);
forksCountLabel.SetBinding(Label.TextProperty, nameof(Repository.ForkCount));
var issuesSVGImage = new SmallNavyBlueSVGImage("issue_opened.svg");
var issuesCountLabel = new DarkBlueLabel(_smallFontSize - 1);
issuesCountLabel.SetBinding(Label.TextProperty, nameof(Repository.IssuesCount));
var grid = new Grid
{
BackgroundColor = Color.Transparent,
Padding = new Thickness(2, 0, 5, 0),
RowSpacing = 2,
ColumnSpacing = 3,
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.StartAndExpand,
RowDefinitions =
{
new RowDefinition {
Height = new GridLength(1, GridUnitType.Absolute)
},
new RowDefinition {
Height = new GridLength(20, GridUnitType.Absolute)
},
new RowDefinition {
Height = new GridLength(45, GridUnitType.Absolute)
},
new RowDefinition {
Height = new GridLength(1, GridUnitType.Absolute)
},
new RowDefinition {
Height = new GridLength(_smallFontSize + 2, GridUnitType.Absolute)
},
new RowDefinition {
Height = new GridLength(5, GridUnitType.Absolute)
},
},
ColumnDefinitions =
{
new ColumnDefinition {
Width = new GridLength(circleImageHeight, GridUnitType.Absolute)
},
new ColumnDefinition {
Width = new GridLength(2, GridUnitType.Absolute)
},
new ColumnDefinition {
Width = new GridLength(emojiColumnSize, GridUnitType.Absolute)
},
new ColumnDefinition {
Width = new GridLength(countColumnSize, GridUnitType.Absolute)
},
new ColumnDefinition {
Width = new GridLength(emojiColumnSize, GridUnitType.Absolute)
},
new ColumnDefinition {
Width = new GridLength(countColumnSize, GridUnitType.Absolute)
},
new ColumnDefinition {
Width = new GridLength(emojiColumnSize, GridUnitType.Absolute)
},
new ColumnDefinition {
Width = new GridLength(countColumnSize, GridUnitType.Absolute)
},
new ColumnDefinition {
Width = new GridLength(1, GridUnitType.Star)
}
}
};
grid.Children.Add(image, 0, 0);
Grid.SetRowSpan(image, 6);
grid.Children.Add(repositoryNameLabel, 2, 1);
Grid.SetColumnSpan(repositoryNameLabel, 7);
grid.Children.Add(repositoryDescriptionLabel, 2, 2);
Grid.SetColumnSpan(repositoryDescriptionLabel, 7);
grid.Children.Add(starsSVGImage, 2, 4);
grid.Children.Add(starsCountLabel, 3, 4);
grid.Children.Add(forksSVGImage, 4, 4);
grid.Children.Add(forksCountLabel, 5, 4);
grid.Children.Add(issuesSVGImage, 6, 4);
grid.Children.Add(issuesCountLabel, 7, 4);
return(grid);
}
public GitHubSettingsView()
{
const int _imageHeight = 200;
const int _demoButtonFontSize = 8;
var gitHubAvatarImage = new CircleImage
{
AutomationId = SettingsPageAutomationIds.GitHubAvatarImage,
HeightRequest = _imageHeight,
WidthRequest = _imageHeight,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
Aspect = Aspect.AspectFit
};
gitHubAvatarImage.SetBinding(CircleImage.SourceProperty, nameof(SettingsViewModel.GitHubAvatarImageSource));
var gitHubAliasLabel = new Label
{
HorizontalTextAlignment = TextAlignment.Center,
AutomationId = SettingsPageAutomationIds.GitHubAliasLabel,
};
gitHubAliasLabel.SetBinding(Label.TextProperty, nameof(SettingsViewModel.GitHubAliasLabelText));
var gitHubLoginButton = new FontAwesomeButton
{
AutomationId = SettingsPageAutomationIds.GitHubLoginButton,
TextColor = Color.White,
FontSize = 24,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
Padding = new Thickness(10),
Margin = new Thickness(0, 25, 0, 5)
};
gitHubLoginButton.SetDynamicResource(BackgroundColorProperty, nameof(BaseTheme.ButtonBackgroundColor));
gitHubLoginButton.SetDynamicResource(Button.TextColorProperty, nameof(BaseTheme.ButtonTextColor));
gitHubLoginButton.SetBinding(Button.TextProperty, nameof(SettingsViewModel.LoginButtonText));
gitHubLoginButton.SetBinding(Button.CommandProperty, nameof(SettingsViewModel.LoginButtonCommand));
var demoButton = new Button
{
AutomationId = SettingsPageAutomationIds.DemoModeButton,
Padding = new Thickness(2),
BackgroundColor = Color.Transparent,
FontSize = _demoButtonFontSize,
Text = "Enter Demo Mode",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
};
demoButton.SetDynamicResource(Button.TextColorProperty, nameof(BaseTheme.TextColor));
demoButton.SetBinding(IsVisibleProperty, nameof(SettingsViewModel.IsDemoButtonVisible));
demoButton.SetBinding(Button.CommandProperty, nameof(SettingsViewModel.DemoButtonCommand));
var activityIndicator = new ActivityIndicator
{
AutomationId = SettingsPageAutomationIds.GitHubSettingsViewActivityIndicator,
VerticalOptions = LayoutOptions.Start
};
activityIndicator.SetDynamicResource(ActivityIndicator.ColorProperty, nameof(BaseTheme.RefreshControlColor));
activityIndicator.SetBinding(IsVisibleProperty, nameof(SettingsViewModel.IsAuthenticating));
activityIndicator.SetBinding(ActivityIndicator.IsRunningProperty, nameof(SettingsViewModel.IsAuthenticating));
var relativeLayout = new RelativeLayout();
relativeLayout.Children.Add(gitHubAvatarImage,
//Center the image horizontally within the RelativeLayout
xConstraint: Constraint.RelativeToParent(parent => parent.Width / 2 - getImageSizeConstraint(parent) / 2),
//Pin the image to the top of the screen
yConstraint: Constraint.Constant(0),
//Width and Height should be the same
widthConstraint: Constraint.RelativeToParent(parent => getImageSizeConstraint(parent)),
//Width and Height should be the same
heightConstraint: Constraint.RelativeToParent(parent => getImageSizeConstraint(parent)));
relativeLayout.Children.Add(gitHubLoginButton,
//Center the button horizontally within the RelativeLayout
xConstraint: Constraint.RelativeToParent(parent => parent.Width / 2 - getWidth(parent, gitHubLoginButton) / 2),
//Place the button below gitHubAvatarImage
yConstraint: Constraint.RelativeToView(gitHubAvatarImage, (parent, view) => view.Y + view.Height + 5),
//Ensure the button scales to the height of the RelativeLayout
heightConstraint: Constraint.RelativeToParent(parent => getLoginButtonSizeConstraint(parent)));
relativeLayout.Children.Add(demoButton,
//Center the button horizontally within the RelativeLayout
xConstraint: Constraint.RelativeToParent(parent => parent.Width / 2 - getWidth(parent, demoButton) / 2),
//Place the button below gitHubLoginButton
yConstraint: Constraint.RelativeToView(gitHubLoginButton, (parent, view) => view.Y + view.Height + 2),
heightConstraint: Constraint.Constant(getDemoButtonSizeConstraint()));
relativeLayout.Children.Add(activityIndicator,
//Center the activityIndicator horizontally within the RelativeLayout
xConstraint: Constraint.RelativeToParent(parent => parent.Width / 2 - getWidth(parent, activityIndicator) / 2),
//Place the activityIndicator below gitHubLoginButton
yConstraint: Constraint.RelativeToView(gitHubLoginButton, (parent, view) => view.Y + view.Height + 5));
Content = relativeLayout;