问题描述
我正在使用网格来实现导航栏。我尝试使用网格行并将中心图像的行距调整为2,但是以某种方式我无法复制图像中的内容。任何帮助深表感谢。提前致谢!随附的是我的导航栏的代码
Grid VerticalOptions="EndAndExpand"
BackgroundColor="Red"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativetoParent,Property=Width}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativetoParent,Property=Height,Factor=0.10}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativetoParent,Factor=0.90}">
<Grid.RowDeFinitions>
<RowDeFinition Height="0.1*"/>
<RowDeFinition Height="44"/>
</Grid.RowDeFinitions>
<Grid.ColumnDeFinitions>
<ColumnDeFinition Width="*" />
<ColumnDeFinition Width="3*" />
<ColumnDeFinition Width="*" />
<ColumnDeFinition Width="3*" />
<ColumnDeFinition Width="*" />
<ColumnDeFinition Width="3*" />
<ColumnDeFinition Width="*" />
<ColumnDeFinition Width="3*" />
<ColumnDeFinition Width="*" />
<ColumnDeFinition Width="3*" />
<ColumnDeFinition Width="*" />
</Grid.ColumnDeFinitions>
<Image Source="navbar_background.png" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="11" Aspect="Fill" HorizontalOptions="FillAndExpand"/>
<components:ImageComponent SetSource="icon_home_default.png" Grid.Row="1" Grid.Column="1" VerticalOptions="CenterandExpand" HorizontalOptions="CenterandExpand">
<components:ImageComponent.GestureRecognizers>
<TapGestureRecognizer Tapped="HomeClicked"/>
</components:ImageComponent.GestureRecognizers>
</components:ImageComponent>
<components:ImageComponent x:Name="BranchFinderBtnDefualt" SetSource="icon_branchfinder_default.png" Grid.Row="0" Grid.Column="5" Grid.RowSpan="2" VerticalOptions="CenterandExpand" HorizontalOptions="CenterandExpand" IsVisible="True">
<components:ImageComponent.GestureRecognizers>
<TapGestureRecognizer Tapped="BranchFinderClicked"/>
</components:ImageComponent.GestureRecognizers>
</components:ImageComponent>
<components:ImageComponent x:Name="BranchFinderBtnCurrentPage" SetSource="icon_branchfinder_currentpage.png" Grid.Row="0" Grid.Column="5" VerticalOptions="CenterandExpand" HorizontalOptions="CenterandExpand" IsVisible="False">
<components:ImageComponent.GestureRecognizers>
<TapGestureRecognizer Tapped="BranchFinderClicked"/>
</components:ImageComponent.GestureRecognizers>
</components:ImageComponent>
</Grid>
解决方法
您可以进一步对其进行微调,但这会有所帮助
<Grid Padding="0" Margin="0" ColumnSpacing="0" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="90*"/>
<RowDefinition Height="25"/>
<RowDefinition Height="10*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="1.35*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="5" BackgroundColor="White" HorizontalOptions="Fill" VerticalOptions="Fill">
<Label Text="My Page" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
</StackLayout>
<BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="5" HorizontalOptions="FillAndExpand" VerticalOptions="Start" HeightRequest="3"
Color="LightGray"/>
<Image Grid.Row="2" Grid.Column="0" VerticalOptions="CenterAndExpand" Source="home"/>
<Image Grid.Row="2" Grid.Column="1" VerticalOptions="CenterAndExpand" Source="card"/>
<Image Grid.Row="2" Grid.Column="3" VerticalOptions="CenterAndExpand" Source="bag"/>
<Image Grid.Row="2" Grid.Column="4" VerticalOptions="CenterAndExpand" Source="inbox"/>
<Label Grid.Row="2" Grid.Column="0" VerticalOptions="EndAndExpand" Text="Home" HorizontalOptions="CenterAndExpand" Margin="0,2"/>
<Label Grid.Row="2" Grid.Column="1" VerticalOptions="EndAndExpand" Text="Cards" HorizontalOptions="CenterAndExpand" Margin="0,2"/>
<Label Grid.Row="2" Grid.Column="2" VerticalOptions="EndAndExpand" Text="Scan to Pay" HorizontalOptions="CenterAndExpand" Margin="0,2"/>
<Label Grid.Row="2" Grid.Column="3" VerticalOptions="EndAndExpand" Text="Shop" HorizontalOptions="CenterAndExpand" Margin="0,2"/>
<Label Grid.Row="2" Grid.Column="4" VerticalOptions="EndAndExpand" Text="Inbox" HorizontalOptions="CenterAndExpand" Margin="0,2"/>
<Frame Grid.Row="1" Grid.Column="2" Grid.RowSpan="2" VerticalOptions="Start" WidthRequest="60" HeightRequest="60" Padding="0" Margin="0,-5,0"
HasShadow="False" HorizontalOptions="Center" CornerRadius="30" BackgroundColor="LightBlue" BorderColor="White">
<Image Source="barcode" Margin="12"/>
</Frame>
</Grid>