Xamarin Forms - IsClipedToBounds на сетке не работает. Детские взгляды все еще ограничены - PullRequest
0 голосов
/ 04 сентября 2018

Я создаю простую клавиатуру для приложения, и я хочу использовать плавающие кнопки действий для клавиш. Я кладу их в сетку с надписью над ними, чтобы получить рев.

enter image description here

Как видите, сетка обрезает тени, несмотря на то, что для свойства IsClippedToBounds установлено значение false. Я искал в Интернете и не нашел много об этом. Это ошибка или я что-то не так делаю?

Ниже приведен макет XAML.

<?xml version="1.0" encoding="UTF-8"?>
<ContentView
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:fab="clr-namespace:Refractored.FabControl;assembly=Refractored.FabControl"
x:Class="CauseMobileWalletMerchant.Views.KeypadView">
<ContentView.Content>
    <Grid
        BackgroundColor="Transparent"
        Margin="0"
        IsClippedToBounds="false"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        RowSpacing="0"
        ColumnSpacing="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition
                Width="75" />
            <ColumnDefinition
                Width="75" />
            <ColumnDefinition
                Width="75" />
            <ColumnDefinition
                Width="75" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition
                Height="75" />
            <RowDefinition
                Height="75" />
            <RowDefinition
                Height="75" />
            <RowDefinition
                Height="75" />
        </Grid.RowDefinitions>
        <fab:FloatingActionButtonView
            HorizontalOptions="Center"
            VerticalOptions="Center"
            Grid.Row="0"
            Grid.Column="0"
            ColorNormal="{DynamicResource Primary}"
            ColorPressed="{DynamicResource PrimaryDark}"
            ColorRipple="{DynamicResource PrimaryDark}" />
        <Label
            Text="7"
            InputTransparent="true"
            FontAttributes="Bold"
            TextColor="White"
            FontSize="22"
            Grid.Row="0"
            Grid.Column="0"
            HorizontalOptions="Center"
            VerticalOptions="Center" />
        <fab:FloatingActionButtonView
            Grid.Row="0"
            Grid.Column="1"
            Margin="0"
            ColorNormal="{DynamicResource Primary}"
            IsEnabled="true"
            HasShadow="true"
            ColorPressed="{DynamicResource PrimaryDark}"
            ColorRipple="{DynamicResource PrimaryDark}" />
        <Label
            Text="8"
            InputTransparent="true"
            FontAttributes="Bold"
            TextColor="White"
            FontSize="22"
            Grid.Row="0"
            Grid.Column="1"
            HorizontalOptions="Center"
            VerticalOptions="Center" />
        <fab:FloatingActionButtonView
            Grid.Row="0"
            Grid.Column="2"
            Margin="0"
            ColorNormal="{DynamicResource Primary}"
            ColorPressed="{DynamicResource PrimaryDark}"
            ColorRipple="{DynamicResource PrimaryDark}" />
        <Label
            Text="9"
            InputTransparent="true"
            FontAttributes="Bold"
            TextColor="White"
            FontSize="22"
            Grid.Row="0"
            Grid.Column="2"
            HorizontalOptions="Center"
            VerticalOptions="Center" />
        <fab:FloatingActionButtonView
            Grid.Row="0"
            Grid.Column="3"
            Margin="0"
            ColorNormal="{DynamicResource Primary}"
            ColorPressed="{DynamicResource PrimaryDark}"
            ColorRipple="{DynamicResource PrimaryDark}" />
        <Label
            Text="CLEAR"
            InputTransparent="true"
            FontAttributes="Bold"
            TextColor="White"
            FontSize="12"
            Grid.Row="0"
            Grid.Column="3"
            HorizontalOptions="Center"
            VerticalOptions="Center" />
        <fab:FloatingActionButtonView
            Grid.Row="1"
            Grid.Column="0"
            ColorNormal="{DynamicResource Primary}"
            ColorPressed="{DynamicResource PrimaryDark}"
            ColorRipple="{DynamicResource PrimaryDark}" />
        <Label
            Text="4"
            InputTransparent="true"
            FontAttributes="Bold"
            TextColor="White"
            FontSize="22"
            Grid.Row="1"
            Grid.Column="0"
            HorizontalOptions="Center"
            VerticalOptions="Center" />
        <fab:FloatingActionButtonView
            Grid.Row="1"
            Grid.Column="1"
            ColorNormal="{DynamicResource Primary}"
            ColorPressed="{DynamicResource PrimaryDark}"
            ColorRipple="{DynamicResource PrimaryDark}" />
        <Label
            Text="5"
            InputTransparent="true"
            FontAttributes="Bold"
            TextColor="White"
            FontSize="22"
            Grid.Row="1"
            Grid.Column="1"
            HorizontalOptions="Center"
            VerticalOptions="Center" />
        <fab:FloatingActionButtonView
            Grid.Row="1"
            Grid.Column="2"
            ColorNormal="{DynamicResource Primary}"
            ColorPressed="{DynamicResource PrimaryDark}"
            ColorRipple="{DynamicResource PrimaryDark}" />
        <Label
            Text="6"
            InputTransparent="true"
            FontAttributes="Bold"
            TextColor="White"
            FontSize="22"
            Grid.Row="1"
            Grid.Column="2"
            HorizontalOptions="Center"
            VerticalOptions="Center" />
        <fab:FloatingActionButtonView
            Grid.Row="1"
            Grid.Column="3"
            ColorNormal="{DynamicResource Primary}"
            ColorPressed="{DynamicResource PrimaryDark}"
            ColorRipple="{DynamicResource PrimaryDark}" />
        <Label
            Text="QR"
            InputTransparent="true"
            FontAttributes="Bold"
            TextColor="White"
            FontSize="12"
            Grid.Row="1"
            Grid.Column="3"
            HorizontalOptions="Center"
            VerticalOptions="Center" />
        <fab:FloatingActionButtonView
            Grid.Row="2"
            Grid.Column="0"
            ColorNormal="{DynamicResource Primary}"
            ColorPressed="{DynamicResource PrimaryDark}"
            ColorRipple="{DynamicResource PrimaryDark}" />
        <Label
            Text="1"
            InputTransparent="true"
            FontAttributes="Bold"
            TextColor="White"
            FontSize="22"
            Grid.Row="2"
            Grid.Column="0"
            HorizontalOptions="Center"
            VerticalOptions="Center" />
        <fab:FloatingActionButtonView
            Grid.Row="2"
            Grid.Column="1"
            ColorNormal="{DynamicResource Primary}"
            ColorPressed="{DynamicResource PrimaryDark}"
            ColorRipple="{DynamicResource PrimaryDark}" />
        <Label
            Text="2"
            InputTransparent="true"
            FontAttributes="Bold"
            TextColor="White"
            FontSize="22"
            Grid.Row="2"
            Grid.Column="1"
            HorizontalOptions="Center"
            VerticalOptions="Center" />
        <fab:FloatingActionButtonView
            Grid.Row="2"
            Grid.Column="2"
            ColorNormal="{DynamicResource Primary}"
            ColorPressed="{DynamicResource PrimaryDark}"
            ColorRipple="{DynamicResource PrimaryDark}" />
        <Label
            Text="3"
            InputTransparent="true"
            FontAttributes="Bold"
            TextColor="White"
            FontSize="22"
            Grid.Row="2"
            Grid.Column="2"
            HorizontalOptions="Center"
            VerticalOptions="Center" />
        <fab:FloatingActionButtonView
            Grid.Row="2"
            Grid.Column="3"
            ColorNormal="{DynamicResource Primary}"
            ColorPressed="{DynamicResource PrimaryDark}"
            ColorRipple="{DynamicResource PrimaryDark}" />
        <Label
            Text="FACE"
            InputTransparent="true"
            FontAttributes="Bold"
            TextColor="White"
            FontSize="12"
            Grid.Row="2"
            Grid.Column="3"
            HorizontalOptions="Center"
            VerticalOptions="Center" />
        <fab:FloatingActionButtonView
            Grid.Row="3"
            Grid.Column="0"
            ColorNormal="{DynamicResource Primary}"
            ColorPressed="{DynamicResource PrimaryDark}"
            ColorRipple="{DynamicResource PrimaryDark}" />
        <Label
            Text="0"
            InputTransparent="true"
            FontAttributes="Bold"
            TextColor="White"
            FontSize="22"
            Grid.Row="3"
            Grid.Column="0"
            HorizontalOptions="Center"
            VerticalOptions="Center" />
        <fab:FloatingActionButtonView
            Grid.Row="3"
            Grid.Column="1"
            ColorNormal="{DynamicResource Primary}"
            ColorPressed="{DynamicResource PrimaryDark}"
            ColorRipple="{DynamicResource PrimaryDark}" />
        <Label
            Text="00"
            InputTransparent="true"
            FontAttributes="Bold"
            TextColor="White"
            FontSize="22"
            Grid.Row="3"
            Grid.Column="1"
            HorizontalOptions="Center"
            VerticalOptions="Center" />
        <fab:FloatingActionButtonView
            Grid.Row="3"
            Grid.Column="2"
            ColorNormal="{DynamicResource Primary}"
            ColorPressed="{DynamicResource PrimaryDark}"
            ColorRipple="{DynamicResource PrimaryDark}" />
        <Label
            Text="-"
            InputTransparent="true"
            FontAttributes="Bold"
            TextColor="White"
            FontSize="22"
            Grid.Row="3"
            Grid.Column="2"
            HorizontalOptions="Center"
            VerticalOptions="Center" />
        <fab:FloatingActionButtonView
            Grid.Row="3"
            Grid.Column="3"
            ColorNormal="{DynamicResource Primary}"
            ColorPressed="{DynamicResource PrimaryDark}"
            ColorRipple="{DynamicResource PrimaryDark}" />
        <Label
            Text="TOTAL"
            InputTransparent="true"
            FontAttributes="Bold"
            TextColor="White"
            FontSize="12"
            Grid.Row="3"
            Grid.Column="3"
            HorizontalOptions="Center"
            VerticalOptions="Center" />
    </Grid>
</ContentView.Content>

1 Ответ

0 голосов
/ 04 сентября 2018

Вы рисуете затененные кнопки внутри холста сетки. И каждая кнопка нарисована внутри своего клеточного холста. Очевидно, что дочерний элемент обычно не рисуется вне родительского холста.

Решение вашей проблемы, не говоря уже об обычном «создании собственного средства визуализации» для сетки, состоит в том, чтобы нарисовать каждого дочернего элемента поверх предыдущих дочерних элементов. Тогда тени будут перекрывать, как вы хотите. Поэтому вам необходимо смоделировать ячейки: создать сетку для контейнера, каждая кнопка будет находиться в ячейке 0,0, но с соответствующим смещением Margin x, y, чтобы не перекрывать другие кнопки. Создавайте смещения во время выполнения, обновляйте их при изменении размера родителя, и вы получите его.

...