Skip to content
This repository has been archived by the owner on Nov 12, 2020. It is now read-only.

CardView does not respect the Top or Left margin of its child view. #72

Open
Nerves82 opened this issue Oct 3, 2018 · 0 comments
Open

Comments

@Nerves82
Copy link

Nerves82 commented Oct 3, 2018

Using the card view is proving to be difficult as it does not seem to respect the margins of any of its child views. The easiest way to show this issue is with some xaml and resulting screenshots. To get around this (in a very limited way) I have been setting the margin (right and bottom) of my child view to match the forced margins (or padding)(left and top) of the card view, and then adding empty rows and columns to the outside of a Grid to mimic margins.

        <xfx:XfxCardView
            BackgroundColor="Purple"
            Grid.Column="0"
            Grid.Row="0"
            CornerRadius="10"
            Margin="0"
            Elevation="15">
            <StackLayout
                VerticalOptions="FillAndExpand"
                HorizontalOptions="FillAndExpand"
                Margin="0"
                BackgroundColor="Lime">
                <Label
                    Margin="20"
                    BackgroundColor="Fuchsia"
                    Text="{Binding Total}"
                    FontSize="32"
                    TextColor="Gray" />
            </StackLayout>
        </xfx:XfxCardView>

img_6600

        <xfx:XfxCardView
            BackgroundColor="Purple"
            Grid.Column="0"
            Grid.Row="0"
            CornerRadius="10"
            Margin="0"
            Elevation="15">
            <StackLayout
                VerticalOptions="FillAndExpand"
                HorizontalOptions="FillAndExpand"
                Margin="20"
                BackgroundColor="Lime">
                <Label
                    Margin="0"
                    BackgroundColor="Fuchsia"
                    VerticalTextAlignment="Center"
                    Text="{Binding Total}"
                    FontSize="32"
                    HorizontalTextAlignment="Center"
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    TextColor="Gray" />
            </StackLayout>
        </xfx:XfxCardView>

img_6601

        <xfx:XfxCardView
            BackgroundColor="Purple"
            Grid.Column="0"
            Grid.Row="0"
            CornerRadius="10"
            Elevation="15">
            <StackLayout 
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="CenterAndExpand"
                Margin="20"
                BackgroundColor="Lime">
                <Label
                    Margin="0"
                    BackgroundColor="Fuchsia"
                    VerticalTextAlignment="Center"
                    Text="{Binding Total}"
                    FontSize="32"
                    HorizontalTextAlignment="Center"
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    TextColor="Gray" />
            </StackLayout>
        </xfx:XfxCardView>

img_6602

Here is the complete xaml.


<ContentView.Content>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>
<Grid.RowDefinitions>


</Grid.RowDefinitions>
<xfx:XfxCardView
BackgroundColor="Purple"
Grid.Column="0"
Grid.Row="0"
CornerRadius="10"
Elevation="15">



</xfx:XfxCardView>
<xfx:XfxCardView
Padding="0"
Grid.Column="0"
Grid.Row="1"
CornerRadius="10"
Elevation="15">

<Grid.ColumnDefinitions>





</Grid.ColumnDefinitions>
<Grid.RowDefinitions>






</Grid.RowDefinitions>
<fab:FloatingActionButtonView
Command="{Binding PinButtonCommand}"
CommandParameter="7"
HasShadow="false"
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.Row="1"
Grid.Column="1"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />

<fab:FloatingActionButtonView
Command="{Binding PinButtonCommand}"
CommandParameter="8"
HasShadow="false"
Grid.Row="1"
Grid.Column="2"
Margin="0"
ColorNormal="{DynamicResource Primary}"
IsEnabled="true"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />

<fab:FloatingActionButtonView
Command="{Binding PinButtonCommand}"
CommandParameter="9"
HasShadow="false"
Grid.Row="1"
Grid.Column="3"
Margin="0"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />

<fab:FloatingActionButtonView
Command="{Binding PinButtonCommand}"
CommandParameter="4"
HasShadow="false"
Grid.Row="2"
Grid.Column="1"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />

<fab:FloatingActionButtonView
Command="{Binding PinButtonCommand}"
CommandParameter="5"
HasShadow="false"
Grid.Row="2"
Grid.Column="2"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />

<fab:FloatingActionButtonView
Command="{Binding PinButtonCommand}"
CommandParameter="6"
HasShadow="false"
Grid.Row="2"
Grid.Column="3"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />

<fab:FloatingActionButtonView
Command="{Binding PinButtonCommand}"
CommandParameter="1"
HasShadow="false"
Grid.Row="3"
Grid.Column="1"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />

<fab:FloatingActionButtonView
Command="{Binding PinButtonCommand}"
CommandParameter="2"
HasShadow="false"
Grid.Row="3"
Grid.Column="2"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />

<fab:FloatingActionButtonView
Command="{Binding PinButtonCommand}"
CommandParameter="3"
HasShadow="false"
Grid.Row="3"
Grid.Column="3"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />

<fab:FloatingActionButtonView
Command="{Binding PinButtonCommand}"
CommandParameter="0"
HasShadow="false"
Grid.Row="4"
Grid.Column="2"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />

<fab:FloatingActionButtonView
Command="{Binding PinButtonCommand}"
CommandParameter="back"
HasShadow="false"
Grid.Row="4"
Grid.Column="1"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />
<imageloading:SvgCachedImage
Grid.Row="4"
Grid.Column="1"
HorizontalOptions="Center"
VerticalOptions="Center"
InputTransparent="true"
Margin="23, 25, 27, 25"
Source="resource://CauseMobileWalletMerchant.SvgImages.ic_backspace_white.svg" />
<fab:FloatingActionButtonView
Command="{Binding PinButtonCommand}"
CommandParameter="total"
HasShadow="false"
Grid.Row="4"
Grid.Column="3"
ColorNormal="{DynamicResource Primary}"
ColorPressed="{DynamicResource PrimaryDark}"
ColorRipple="{DynamicResource PrimaryDark}" />
<imageloading:SvgCachedImage
Grid.Row="4"
Grid.Column="3"
HorizontalOptions="Center"
VerticalOptions="Center"
InputTransparent="true"
Margin="22"
Source="resource://CauseMobileWalletMerchant.SvgImages.ic_done_all_white.svg" />

</xfx:XfxCardView>

</ContentView.Content>

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant