How to produce a squared box with an outline?

Joshua.R.RussoJoshua.R.Russo USUniversity ✭✭

I would like to display my ListView items in squared boxes with an outline, as opposed to rounded corners. The Frame seems to only allow rounded corners. Is that correct?

Is there a way to have a squared off outline?

Best Answer


  • Joshua.R.RussoJoshua.R.Russo USUniversity ✭✭

    Awesome, that does look like it'll work. I'll let you know how it goes. Thanks!

  • MaharshiChoudhuryMaharshiChoudhury INMember ✭✭✭

    Why so many boxview , stacklayout with padding 1 should solve this problem.

  • DavidDancyDavidDancy AUMember ✭✭✭✭

    @MaharshiChoudhury The BoxViews are necessary so that the interior of the Grid can be Transparent if necessary. The first time I tried it, I also used just the Padding attribute - but had to resort to this solution because the interior was not transparent.

  • Joshua.R.RussoJoshua.R.Russo USUniversity ✭✭

    Thanks @DavidDancy, I had to do a little clean up but this is what I'm actually using. I added the 18 padding to closer mimic the Frame layout:

    <Grid x:Name="_borderedGrid"
          BackgroundColor="{Binding ItemBackgroundColor}">
        <ColumnDefinition Width="1" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="1" />
        <RowDefinition Height="1" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="1" />
      <BoxView x:Name="_leftBorder" Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" BackgroundColor="{Binding ItemOutlineColor}" />
      <BoxView x:Name="_topBorder" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" BackgroundColor="{Binding ItemOutlineColor}" />
      <BoxView x:Name="_rightBorder" Grid.Column="2" Grid.Row="0" Grid.RowSpan="3" BackgroundColor="{Binding ItemOutlineColor}" />
      <BoxView x:Name="_bottomBorder" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="3" BackgroundColor="{Binding ItemOutlineColor}" />
      <StackLayout x:Name="_gridContent" Grid.Column="1" Grid.Row="1" Padding="18">
        <!-- Your content here -->
  • sarmisensarmisen USMember ✭✭
    edited February 2018

    Hi, the accepted answer is correct, but at this moment (Feb 2018) you can archieve similar results with much less code, using frames

    Something like this

    <Frame OutlineColor="{StaticResource LightGrey}" BackgroundColor="Transparent" HasShadow="False" Padding="0" CornerRadius="0"> <!--Your content here--> </Frame>

Sign In or Register to comment.