Nine slice radio button with border control
Hi Dorian! I've got a doozy of a problem here. Goal: Create a nine slice radio button with border control expanding inwards and gradients work properly.
I've made nine-slice buttons in the past, I know that it's a grid with 9 spaces, the corners are fixed and the middle is stretching. I tried to clip a rectangle shape for the middles but ran into problems with the stretching. I tried to stack paths within a grid to create the rectangle but the stroke edge doesn't expand inwards, it seems to expand from the center.
I've spent a lot of time on this and got to the point that I didn't think I could get it to work, so I'm reaching out to you for your advice.
Thanks as always! -Jeremy
I've made nine-slice buttons in the past, I know that it's a grid with 9 spaces, the corners are fixed and the middle is stretching. I tried to clip a rectangle shape for the middles but ran into problems with the stretching. I tried to stack paths within a grid to create the rectangle but the stroke edge doesn't expand inwards, it seems to expand from the center.
I've spent a lot of time on this and got to the point that I didn't think I could get it to work, so I'm reaching out to you for your advice.
Thanks as always! -Jeremy
Re: Nine slice radio button with border control
Hi Jeremy!
We'll get this all sorted for you. However, before we jump into a solution, I just wanted to get a bit more details about your approach.
1) Is the intention that this button will be made up of PNG slices, or are you looking to do this vector-based?
(This will determine our angle of attack to achieve the result you're looking for)
2) Is the styling you are showing in the image you attached exactly what you are aiming for as a 'final' look?
(I'm especially interested in whether the gradient background shown is the visual target, as this will influence our approach based on whether this is to vector-based or bitmap-based)
For example, if your objective is to build something exactly as shown in the image, this can be achieved with a single Border Element, where the 'Background' is a red linear gradient, and its 'Border' (Stroke) Property is a gold linear gradient. This Border Element can then scale in any direction without needing to even make it 9-slice.
Speak again soon!
- Dorian
We'll get this all sorted for you. However, before we jump into a solution, I just wanted to get a bit more details about your approach.
1) Is the intention that this button will be made up of PNG slices, or are you looking to do this vector-based?
(This will determine our angle of attack to achieve the result you're looking for)
2) Is the styling you are showing in the image you attached exactly what you are aiming for as a 'final' look?
(I'm especially interested in whether the gradient background shown is the visual target, as this will influence our approach based on whether this is to vector-based or bitmap-based)
For example, if your objective is to build something exactly as shown in the image, this can be achieved with a single Border Element, where the 'Background' is a red linear gradient, and its 'Border' (Stroke) Property is a gold linear gradient. This Border Element can then scale in any direction without needing to even make it 9-slice.
Speak again soon!
- Dorian
-
-
sfernandez
Site Admin
- Posts: 3363
- Joined:
Re: Nine slice radio button with border control
And just to make sure you need a custom solution, why can't you use here a simple Border element with gradients applied to the BorderBrush and Background properties?
In any case, the Border element allows you to specify different values for each border side, and different values for each corner, so it is quite handy to build 9-slice elements.
Code: Select all
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignWidth="1920" d:DesignHeight="1080"
Background="#FF1E1E1E">
<Page.Resources>
<ResourceDictionary>
<LinearGradientBrush x:Key="Brush.BorderGrad" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Offset="0" Color="#FF7D5934"/>
<GradientStop Offset="0.2810168" Color="#FFFEDEB2"/>
<GradientStop Offset="0.60687655" Color="#FF623D1A"/>
<GradientStop Offset="1" Color="#FFC69D68"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="Brush.BgGrad" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Offset="0" Color="#FF8F0B09"/>
<GradientStop Offset="1" Color="#FF3E0206"/>
</LinearGradientBrush>
</ResourceDictionary>
</Page.Resources>
<Grid>
<Border Width="100" Height="100" Margin="100,100,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Background="{DynamicResource Brush.BgGrad}" BorderBrush="{DynamicResource Brush.BorderGrad}" BorderThickness="5,5,5,5" CornerRadius="20,20,20,20"/>
<Border Width="200" Height="100" Margin="100,250,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Background="{DynamicResource Brush.BgGrad}" BorderBrush="{DynamicResource Brush.BorderGrad}" BorderThickness="5,5,5,5" CornerRadius="20,20,20,20"/>
<Border Width="100" Height="200" Margin="350,100,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Background="{DynamicResource Brush.BgGrad}" BorderBrush="{DynamicResource Brush.BorderGrad}" BorderThickness="5,5,5,5" CornerRadius="20,20,20,20"/>
</Grid>
</Page>In any case, the Border element allows you to specify different values for each border side, and different values for each corner, so it is quite handy to build 9-slice elements.
Re: Nine slice radio button with border control
Yeah, I was going for a vector based 9 slice. I can't believe I was making this so hard on myself. The border element is elegant and completely solves my problem. I feel like an idiot! :)
Thanks!
-Jeremy
Thanks!
-Jeremy
Who is online
Users browsing this forum: No registered users and 3 guests