Mixing
Is it possible to give a Xamarin Frame different border colors?
Here is the XAML that I have:
<Frame CornerRadius="1" HasShadow="false" Margin="10"
BackgroundColor="White" BorderColor="Silver" Padding="0" >
I saw on the Google Translate that's on iOS that they use something like this kind of a frame to surround different rows in settings. However they have a different border color on the top and bottom.
Does anyone know if there is a way to do the with a frame?
xamarin xamarin.forms
asked Nov 21 '18 at 15:30
Alan2Alan2
1,49756136259
add a comment |
Here is the XAML that I have:
<Frame CornerRadius="1" HasShadow="false" Margin="10"
BackgroundColor="White" BorderColor="Silver" Padding="0" >
I saw on the Google Translate that's on iOS that they use something like this kind of a frame to surround different rows in settings. However they have a different border color on the top and bottom.
Does anyone know if there is a way to do the with a frame?
xamarin xamarin.forms
asked Nov 21 '18 at 15:30
Alan2Alan2
1,49756136259
Can you please provide a screenshot of Google Translate with different border colors?
– Jack Hua - MSFT
Nov 22 '18 at 9:28
Hi Jack, I already did. It's part of the question. Note the slightly different color at the base.
– Alan2
Nov 23 '18 at 21:14
1
TableView will give you this look and feel out of the box, have you tried it? docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/…
– EvZ
Nov 24 '18 at 21:08
That's not two colours. That's the frame's bottom shadow!
– Tom
Nov 29 '18 at 14:24
add a comment |
Here is the XAML that I have:
<Frame CornerRadius="1" HasShadow="false" Margin="10"
BackgroundColor="White" BorderColor="Silver" Padding="0" >
I saw on the Google Translate that's on iOS that they use something like this kind of a frame to surround different rows in settings. However they have a different border color on the top and bottom.
Does anyone know if there is a way to do the with a frame?
xamarin xamarin.forms
asked Nov 21 '18 at 15:30
Alan2Alan2
1,49756136259
Here is the XAML that I have:
<Frame CornerRadius="1" HasShadow="false" Margin="10"
BackgroundColor="White" BorderColor="Silver" Padding="0" >
I saw on the Google Translate that's on iOS that they use something like this kind of a frame to surround different rows in settings. However they have a different border color on the top and bottom.
Does anyone know if there is a way to do the with a frame?
xamarin xamarin.forms
xamarin xamarin.forms
asked Nov 21 '18 at 15:30
Alan2Alan2
1,49756136259
asked Nov 21 '18 at 15:30
Alan2Alan2
1,49756136259
edited Nov 21 '18 at 15:36
Alan2
asked Nov 21 '18 at 15:30
Alan2Alan2
1,49756136259
asked Nov 21 '18 at 15:30
Alan2Alan2
1,49756136259
asked Nov 21 '18 at 15:30
Alan2Alan2
1,49756136259
1,49756136259
Can you please provide a screenshot of Google Translate with different border colors?
– Jack Hua - MSFT
Nov 22 '18 at 9:28
Hi Jack, I already did. It's part of the question. Note the slightly different color at the base.
– Alan2
Nov 23 '18 at 21:14
1
TableView will give you this look and feel out of the box, have you tried it? docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/…
– EvZ
Nov 24 '18 at 21:08
That's not two colours. That's the frame's bottom shadow!
– Tom
Nov 29 '18 at 14:24
add a comment |
Can you please provide a screenshot of Google Translate with different border colors?
– Jack Hua - MSFT
Nov 22 '18 at 9:28
Hi Jack, I already did. It's part of the question. Note the slightly different color at the base.
– Alan2
Nov 23 '18 at 21:14
1
TableView will give you this look and feel out of the box, have you tried it? docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/…
– EvZ
Nov 24 '18 at 21:08
That's not two colours. That's the frame's bottom shadow!
– Tom
Nov 29 '18 at 14:24
Can you please provide a screenshot of Google Translate with different border colors?
– Jack Hua - MSFT
Nov 22 '18 at 9:28
Can you please provide a screenshot of Google Translate with different border colors?
– Jack Hua - MSFT
Nov 22 '18 at 9:28
Hi Jack, I already did. It's part of the question. Note the slightly different color at the base.
– Alan2
Nov 23 '18 at 21:14
Hi Jack, I already did. It's part of the question. Note the slightly different color at the base.
– Alan2
Nov 23 '18 at 21:14
1
1
TableView will give you this look and feel out of the box, have you tried it? docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/…
– EvZ
Nov 24 '18 at 21:08
TableView will give you this look and feel out of the box, have you tried it? docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/…
– EvZ
Nov 24 '18 at 21:08
That's not two colours. That's the frame's bottom shadow!
– Tom
Nov 29 '18 at 14:24
That's not two colours. That's the frame's bottom shadow!
– Tom
Nov 29 '18 at 14:24
add a comment |
2 Answers
2
active
oldest
votes
AFAIK, you don't have a built in option for what you are looking for.
You could play around by drawing multiple frames on top of each other with different colors and properties, but it is a bit too "hacky" for my taste.
I suggest you create a Custom Render for your own Frame control. This way, you will be able to draw the frame however you want and reuse your control in any other place.
answered Nov 24 '18 at 21:23
Alex PshulAlex Pshul
23917
add a comment |
You could achieve that with a component, like this
BorderEntryComponent.xaml
<?xml version="1.0" encoding="UTF-8"?>
<StackLayout
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="X.Y.Z.BorderEntryComponent"
Spacing="0">
<BoxView
x:Name="TopBorder"
HeightRequest="2"
HorizontalOptions="FillAndExpand"
VerticalOptions="EndAndExpand" />
<Entry x:Name="Entry" />
<BoxView
x:Name="BottomBorder"
HeightRequest="2"
HorizontalOptions="FillAndExpand"
VerticalOptions="EndAndExpand" />
</StackLayout>
And, in your BorderEntryComponent.xaml.cs
using System;
using System.Collections.Generic;
using System.Runtime.CompilerServices;
using Xamarin.Forms;
namespace X.Y.Z
{
public partial class BorderEntryComponent : StackLayout
{
public static readonly BindableProperty TopColorProperty =
BindableProperty.Create(nameof(TopColor), typeof(Color), typeof(BorderEntryComponent), default(Color), BindingMode.OneWay);
public static readonly BindableProperty BottomColorProperty =
BindableProperty.Create(nameof(BottomColor), typeof(Color), typeof(BorderEntryComponent), default(Color), BindingMode.OneWay);
public UnderlineEntryComponent()
{
InitializeComponent();
}
protected override void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
base.OnPropertyChanged(propertyName);
if (propertyName == TopColorProperty.PropertyName)
{
this.TopBorder.Color = TopColor;
}
else if (propertyName == BottomColorProperty.PropertyName)
{
this.BottomBorder.Color = BottomColor;
}
}
public Color TopColor
{
get => (Color)GetValue(TopColorProperty);
set => SetValue(TopColorProperty, value);
}
public Color BottomColor
{
get => (Color)GetValue(BottomColorProperty);
set => SetValue(BottomColorProperty, value);
}
}
}
Then, you just do this on your .xaml
<components:UnderlineEntryComponent
TopColor = "Blue"
BottomColor = "Black" />
You can read more on Bindable Properties here
answered Nov 26 '18 at 20:37
Santiago QuirogaSantiago Quiroga
99214
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53415394%2fis-it-possible-to-give-a-xamarin-frame-different-border-colors%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
AFAIK, you don't have a built in option for what you are looking for.
You could play around by drawing multiple frames on top of each other with different colors and properties, but it is a bit too "hacky" for my taste.
I suggest you create a Custom Render for your own Frame control. This way, you will be able to draw the frame however you want and reuse your control in any other place.
answered Nov 24 '18 at 21:23
Alex PshulAlex Pshul
23917
add a comment |
AFAIK, you don't have a built in option for what you are looking for.
You could play around by drawing multiple frames on top of each other with different colors and properties, but it is a bit too "hacky" for my taste.
I suggest you create a Custom Render for your own Frame control. This way, you will be able to draw the frame however you want and reuse your control in any other place.
answered Nov 24 '18 at 21:23
Alex PshulAlex Pshul
23917
add a comment |
AFAIK, you don't have a built in option for what you are looking for.
You could play around by drawing multiple frames on top of each other with different colors and properties, but it is a bit too "hacky" for my taste.
I suggest you create a Custom Render for your own Frame control. This way, you will be able to draw the frame however you want and reuse your control in any other place.
answered Nov 24 '18 at 21:23
Alex PshulAlex Pshul
23917
AFAIK, you don't have a built in option for what you are looking for.
You could play around by drawing multiple frames on top of each other with different colors and properties, but it is a bit too "hacky" for my taste.
I suggest you create a Custom Render for your own Frame control. This way, you will be able to draw the frame however you want and reuse your control in any other place.
answered Nov 24 '18 at 21:23
Alex PshulAlex Pshul
23917
answered Nov 24 '18 at 21:23
Alex PshulAlex Pshul
23917
answered Nov 24 '18 at 21:23
Alex PshulAlex Pshul
23917
answered Nov 24 '18 at 21:23
Alex PshulAlex Pshul
23917
23917
add a comment |
add a comment |
You could achieve that with a component, like this
BorderEntryComponent.xaml
<?xml version="1.0" encoding="UTF-8"?>
<StackLayout
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="X.Y.Z.BorderEntryComponent"
Spacing="0">
<BoxView
x:Name="TopBorder"
HeightRequest="2"
HorizontalOptions="FillAndExpand"
VerticalOptions="EndAndExpand" />
<Entry x:Name="Entry" />
<BoxView
x:Name="BottomBorder"
HeightRequest="2"
HorizontalOptions="FillAndExpand"
VerticalOptions="EndAndExpand" />
</StackLayout>
And, in your BorderEntryComponent.xaml.cs
using System;
using System.Collections.Generic;
using System.Runtime.CompilerServices;
using Xamarin.Forms;
namespace X.Y.Z
{
public partial class BorderEntryComponent : StackLayout
{
public static readonly BindableProperty TopColorProperty =
BindableProperty.Create(nameof(TopColor), typeof(Color), typeof(BorderEntryComponent), default(Color), BindingMode.OneWay);
public static readonly BindableProperty BottomColorProperty =
BindableProperty.Create(nameof(BottomColor), typeof(Color), typeof(BorderEntryComponent), default(Color), BindingMode.OneWay);
public UnderlineEntryComponent()
{
InitializeComponent();
}
protected override void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
base.OnPropertyChanged(propertyName);
if (propertyName == TopColorProperty.PropertyName)
{
this.TopBorder.Color = TopColor;
}
else if (propertyName == BottomColorProperty.PropertyName)
{
this.BottomBorder.Color = BottomColor;
}
}
public Color TopColor
{
get => (Color)GetValue(TopColorProperty);
set => SetValue(TopColorProperty, value);
}
public Color BottomColor
{
get => (Color)GetValue(BottomColorProperty);
set => SetValue(BottomColorProperty, value);
}
}
}
Then, you just do this on your .xaml
<components:UnderlineEntryComponent
TopColor = "Blue"
BottomColor = "Black" />
You can read more on Bindable Properties here
answered Nov 26 '18 at 20:37
Santiago QuirogaSantiago Quiroga
99214
add a comment |
You could achieve that with a component, like this
BorderEntryComponent.xaml
<?xml version="1.0" encoding="UTF-8"?>
<StackLayout
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="X.Y.Z.BorderEntryComponent"
Spacing="0">
<BoxView
x:Name="TopBorder"
HeightRequest="2"
HorizontalOptions="FillAndExpand"
VerticalOptions="EndAndExpand" />
<Entry x:Name="Entry" />
<BoxView
x:Name="BottomBorder"
HeightRequest="2"
HorizontalOptions="FillAndExpand"
VerticalOptions="EndAndExpand" />
</StackLayout>
And, in your BorderEntryComponent.xaml.cs
using System;
using System.Collections.Generic;
using System.Runtime.CompilerServices;
using Xamarin.Forms;
namespace X.Y.Z
{
public partial class BorderEntryComponent : StackLayout
{
public static readonly BindableProperty TopColorProperty =
BindableProperty.Create(nameof(TopColor), typeof(Color), typeof(BorderEntryComponent), default(Color), BindingMode.OneWay);
public static readonly BindableProperty BottomColorProperty =
BindableProperty.Create(nameof(BottomColor), typeof(Color), typeof(BorderEntryComponent), default(Color), BindingMode.OneWay);
public UnderlineEntryComponent()
{
InitializeComponent();
}
protected override void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
base.OnPropertyChanged(propertyName);
if (propertyName == TopColorProperty.PropertyName)
{
this.TopBorder.Color = TopColor;
}
else if (propertyName == BottomColorProperty.PropertyName)
{
this.BottomBorder.Color = BottomColor;
}
}
public Color TopColor
{
get => (Color)GetValue(TopColorProperty);
set => SetValue(TopColorProperty, value);
}
public Color BottomColor
{
get => (Color)GetValue(BottomColorProperty);
set => SetValue(BottomColorProperty, value);
}
}
}
Then, you just do this on your .xaml
<components:UnderlineEntryComponent
TopColor = "Blue"
BottomColor = "Black" />
You can read more on Bindable Properties here
answered Nov 26 '18 at 20:37
Santiago QuirogaSantiago Quiroga
99214
add a comment |
You could achieve that with a component, like this
BorderEntryComponent.xaml
<?xml version="1.0" encoding="UTF-8"?>
<StackLayout
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="X.Y.Z.BorderEntryComponent"
Spacing="0">
<BoxView
x:Name="TopBorder"
HeightRequest="2"
HorizontalOptions="FillAndExpand"
VerticalOptions="EndAndExpand" />
<Entry x:Name="Entry" />
<BoxView
x:Name="BottomBorder"
HeightRequest="2"
HorizontalOptions="FillAndExpand"
VerticalOptions="EndAndExpand" />
</StackLayout>
And, in your BorderEntryComponent.xaml.cs
using System;
using System.Collections.Generic;
using System.Runtime.CompilerServices;
using Xamarin.Forms;
namespace X.Y.Z
{
public partial class BorderEntryComponent : StackLayout
{
public static readonly BindableProperty TopColorProperty =
BindableProperty.Create(nameof(TopColor), typeof(Color), typeof(BorderEntryComponent), default(Color), BindingMode.OneWay);
public static readonly BindableProperty BottomColorProperty =
BindableProperty.Create(nameof(BottomColor), typeof(Color), typeof(BorderEntryComponent), default(Color), BindingMode.OneWay);
public UnderlineEntryComponent()
{
InitializeComponent();
}
protected override void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
base.OnPropertyChanged(propertyName);
if (propertyName == TopColorProperty.PropertyName)
{
this.TopBorder.Color = TopColor;
}
else if (propertyName == BottomColorProperty.PropertyName)
{
this.BottomBorder.Color = BottomColor;
}
}
public Color TopColor
{
get => (Color)GetValue(TopColorProperty);
set => SetValue(TopColorProperty, value);
}
public Color BottomColor
{
get => (Color)GetValue(BottomColorProperty);
set => SetValue(BottomColorProperty, value);
}
}
}
Then, you just do this on your .xaml
<components:UnderlineEntryComponent
TopColor = "Blue"
BottomColor = "Black" />
You can read more on Bindable Properties here
answered Nov 26 '18 at 20:37
Santiago QuirogaSantiago Quiroga
99214
You could achieve that with a component, like this
BorderEntryComponent.xaml
<?xml version="1.0" encoding="UTF-8"?>
<StackLayout
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="X.Y.Z.BorderEntryComponent"
Spacing="0">
<BoxView
x:Name="TopBorder"
HeightRequest="2"
HorizontalOptions="FillAndExpand"
VerticalOptions="EndAndExpand" />
<Entry x:Name="Entry" />
<BoxView
x:Name="BottomBorder"
HeightRequest="2"
HorizontalOptions="FillAndExpand"
VerticalOptions="EndAndExpand" />
</StackLayout>
And, in your BorderEntryComponent.xaml.cs
using System;
using System.Collections.Generic;
using System.Runtime.CompilerServices;
using Xamarin.Forms;
namespace X.Y.Z
{
public partial class BorderEntryComponent : StackLayout
{
public static readonly BindableProperty TopColorProperty =
BindableProperty.Create(nameof(TopColor), typeof(Color), typeof(BorderEntryComponent), default(Color), BindingMode.OneWay);
public static readonly BindableProperty BottomColorProperty =
BindableProperty.Create(nameof(BottomColor), typeof(Color), typeof(BorderEntryComponent), default(Color), BindingMode.OneWay);
public UnderlineEntryComponent()
{
InitializeComponent();
}
protected override void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
base.OnPropertyChanged(propertyName);
if (propertyName == TopColorProperty.PropertyName)
{
this.TopBorder.Color = TopColor;
}
else if (propertyName == BottomColorProperty.PropertyName)
{
this.BottomBorder.Color = BottomColor;
}
}
public Color TopColor
{
get => (Color)GetValue(TopColorProperty);
set => SetValue(TopColorProperty, value);
}
public Color BottomColor
{
get => (Color)GetValue(BottomColorProperty);
set => SetValue(BottomColorProperty, value);
}
}
}
Then, you just do this on your .xaml
<components:UnderlineEntryComponent
TopColor = "Blue"
BottomColor = "Black" />
You can read more on Bindable Properties here
answered Nov 26 '18 at 20:37
Santiago QuirogaSantiago Quiroga
99214
answered Nov 26 '18 at 20:37
Santiago QuirogaSantiago Quiroga
99214
answered Nov 26 '18 at 20:37
Santiago QuirogaSantiago Quiroga
99214
answered Nov 26 '18 at 20:37
Santiago QuirogaSantiago Quiroga
99214
99214
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53415394%2fis-it-possible-to-give-a-xamarin-frame-different-border-colors%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you please provide a screenshot of Google Translate with different border colors?
– Jack Hua - MSFT
Nov 22 '18 at 9:28
Hi Jack, I already did. It's part of the question. Note the slightly different color at the base.
– Alan2
Nov 23 '18 at 21:14
1
TableView will give you this look and feel out of the box, have you tried it? docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/…
– EvZ
Nov 24 '18 at 21:08
That's not two colours. That's the frame's bottom shadow!
– Tom
Nov 29 '18 at 14:24