locked
How to change the Thickness of OUTLINE / BORDER frame ? RRS feed

  • Question

  • User298324 posted

    Hi, I want change the Thickness of a Frame border. I my phone the border is VERY small..

    My code :

    <Grid RowSpacing="0" ColumnSpacing="0">
          <Grid.RowDefinitions>
            <RowDefinition Height="50" />
          </Grid.RowDefinitions>
    
          <Frame OutlineColor="Red" Grid.Row="0" Grid.Column="0" Margin="20,0,2,0" Padding="0" HeightRequest="36">
            <Label Text="Femme" XAlign="Center" TextColor="#FFFFFF" FontSize="14"/>
          </Frame>
    
          <Frame OutlineColor="Red" Grid.Row="0" Grid.Column="1" Margin="2,0,20,0" Padding="0">
            <Label Text="21 ANS" XAlign="Center" TextColor="#FFFFFF" FontSize="14"/>
          </Frame>
    
        </Grid>
    

    Thx :smile:

    Thursday, February 9, 2017 2:22 PM

All replies

  • User180523 posted

    As you can see in the documentation: https://developer.xamarin.com/api/type/Xamarin.Forms.Frame/ There are no properties for border thickness. Let's be honest... Its basically worthless. Would have been nice if they fully implemented all the expected WPF features.

    You'll have to roll your own implementation to have any customization. Either a custom renderer, or stack a couple controls on top of each other in the same space, etc. When I want a border I define a border style and an internal view style in my App; that way I have consistent look and feel throughout (using Margin and Padding to achieve the line thickness, coloring etc. that I want). Then nest a couple ContentView and finally the actual content, such as an image or whatever.

    xml <ContentView VerticalOptions="Start" HorizontalOptions="FillAndExpand"> <ContentView Style="{StaticResource BorderStyle}"> <ContentView Style="{StaticResource InternalViewStyle}"> <Image Source="{Binding ImagePath}" {...}

    Thursday, February 9, 2017 2:34 PM
  • User349566 posted

    ! :smiley: :smiley: :smiley: :smiley: :smiley: <Frame x:Name="FrameExtContainer" Padding="1,1,1,1" HasShadow="False" HorizontalOptions="FillAndExpand" CornerRadius="5" OutlineColor="Black" BackgroundColor="Black" > <Frame x:Name="FrameIntContainer" Padding="5,5,5,5" HasShadow="False" HorizontalOptions="FillAndExpand" CornerRadius="5" OutlineColor="Black" BackgroundColor="White" > </Frame> </Frame>

    I use this in a custom control works like a charm in IOS and Android

    Monday, February 26, 2018 12:07 PM
  • User216512 posted

    @DR_nathou you can use Padding="1" instead of Padding="1,1,1,1"

    Tuesday, May 22, 2018 3:38 PM
  • User368237 posted

    Use Frame Renderer

    https://c-sharpcorner.com/blogs/frame-renderer2

    Friday, June 15, 2018 3:49 AM
  • User349566 posted

    @"CharlieFinlayson.3926" Totally :-) I use to play with the padding that's where Padding="1,1,1,1" is from

    Friday, June 29, 2018 12:34 PM
  • User93601 posted

    @DR_nathou very clever.

    Thursday, August 2, 2018 1:53 PM
  • User242137 posted

    @DR_nathou said:

    ! :smiley: :smiley: :smiley: :smiley: :smiley: <Frame x:Name="FrameExtContainer" Padding="1,1,1,1" HasShadow="False" HorizontalOptions="FillAndExpand" CornerRadius="5" OutlineColor="Black" BackgroundColor="Black" > <Frame x:Name="FrameIntContainer" Padding="5,5,5,5" HasShadow="False" HorizontalOptions="FillAndExpand" CornerRadius="5" OutlineColor="Black" BackgroundColor="White" > </Frame> </Frame>

    I use this in a custom control works like a charm in IOS and Android

    This did it for me. Thanks

    Saturday, September 8, 2018 2:56 PM
  • User379154 posted

    @DR_nathou said:

    ! :smiley: :smiley: :smiley: :smiley: :smiley: <Frame x:Name="FrameExtContainer" Padding="1,1,1,1" HasShadow="False" HorizontalOptions="FillAndExpand" CornerRadius="5" OutlineColor="Black" BackgroundColor="Black" > <Frame x:Name="FrameIntContainer" Padding="5,5,5,5" HasShadow="False" HorizontalOptions="FillAndExpand" CornerRadius="5" OutlineColor="Black" BackgroundColor="White" > </Frame> </Frame>

    I use this in a custom control works like a charm in IOS and Android

    Perfect. I was frustrated to play with a single frame to accomplish the border effect but this works for me very well.

    Monday, March 18, 2019 7:24 AM
  • User391220 posted

    how to reduce the thickness of a border frame ??

    Monday, January 6, 2020 1:54 PM
  • User180523 posted

    Its been forever since I even logged on here. I ran across my own post when seeing if there had been any new ways of doing a frame thickness. I wasn't a fan of the two frame system, and I needed the frame to change color based on value - red if an email address is invalid, transparent if its good. Pretty common use case: highlight the errors on a form.

    ```

                </StackLayout>
            </Frame>
    

    ``` Change the frame padding value to change the border thickness.

    Thursday, November 5, 2020 2:39 PM
  • User399737 posted

    How about using a Rectangle instead of a Frame!? xaml <Grid> <Rectangle BackgroundColor="Transparent" Stroke="White" StrokeThickness="5" RadiusX="10" RadiusY="10" /> <Label Text="Example" /> </Grid>

    Wednesday, March 3, 2021 8:44 PM