Xamarin表单 - 网格上的IsClipedToBounds不起作用。儿童的意见仍在削减

问题描述 投票:0回答:1

我正在为应用程序构建一个简单的键盘,我想为键使用浮动操作按钮。我将它们放置在一个网格中,标签位于它们之上以获得波纹管效果。

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>

xamarin.forms grid floating-action-button clipping
1个回答
0
投票

您正在Grid画布中绘制阴影按钮。每个按钮都在其单元格画布中绘制。很明显,孩子通常不会被画在父画布之外。

解决问题的方法是,不用通常的“为网格创建自定义渲染器”,就是将每个孩子都吸引到以前的孩子身上。然后阴影会像你想要的那样重叠。因此,您需要模拟单元格:创建一个网格作为容器,每个按钮将驻留在单元格0,0中,但具有适当的边距x,y - 偏移,不与其他按钮重叠。在运行时创建偏移量,在父级大小发生变化时更新它们,您将获得它。

© www.soinside.com 2019 - 2024. All rights reserved.