如何仅在一侧/两侧制作边框?

时间:2016-10-20 15:07:24

标签: c# visual-studio xaml uwp

我必须在彼此附近制作4个按钮,我已经通过网格完成了,但我已经要求仅在一侧/两侧添加边框(如下一个屏幕截图所示) With borders

到目前为止,我已经这样做了: Without

代码:

<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Page.Resources>
    <Style TargetType="Button" x:Key="NavagtionButtons">
        <Setter Property="Height" Value="100"/>
        <Setter Property="FontSize" Value="18"/>
        <Setter Property="Background" Value="Black" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="VerticalAlignment" Value="Stretch" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
    </Style>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

    <Button Style="{StaticResource NavagtionButtons}" Grid.Row="0" Grid.Column="0" >
        <Button.Content>
            <StackPanel Orientation="Horizontal">
                <Image Source="Assets/donut-icon.png" Stretch="None" />
                <TextBlock Text="Donut" Margin="10,15,0,0" />
            </StackPanel>
        </Button.Content>
    </Button>


    <Button Style="{StaticResource NavagtionButtons}" Grid.Row="0" Grid.Column="1" >
        <Button.Content>
            <StackPanel Orientation="Horizontal">
                <Image Source="Assets\coffee-icon.png" Stretch="None"/>
                <TextBlock Text="Coffe" Margin="10,15,0,0" />
            </StackPanel>
        </Button.Content>
    </Button>

    <Button Style="{StaticResource NavagtionButtons}" Grid.Row="0" Grid.Column="2" >
        <Button.Content>
            <StackPanel Orientation="Horizontal">
                <Image Source="Assets\schedule-icon.png" Stretch="None" />
                <TextBlock Text="Schedule" Margin="10,15,0,0"/>
            </StackPanel>
        </Button.Content>
    </Button>

    <Button  Style="{StaticResource NavagtionButtons}"  Grid.Row="0" Grid.Column="3">
        <Button.Content>
            <StackPanel Orientation="Horizontal">
                <Image Source="Assets\complete-icon.png" Stretch="None" />
                <TextBlock Text="Complete" Margin="10,15,0,0"/>
            </StackPanel>
        </Button.Content>
    </Button>



</Grid>

那么我怎样才能在他展示的那边添加边框呢?

0 个答案:

没有答案