2017-07-13 32 views
1

Xamarin Forms中有以下ContentPage。它有一個網格。我已經爲網格申請了ColumnSpacing="0" RowSpacing="0" Padding="0"。我已經爲BoxView和Button應用Margin="0"。 BoxView和Button之間仍有空間。即使在應用間距和填充後,Xamarin Form仍保留BoxView和Button之間的空格

避免這種不需​​要的間距的最佳方法是什麼?

XAML

<Grid x:Name="controlGrid" ColumnSpacing="0" RowSpacing="0" Padding="0"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="4*" /> 
     <RowDefinition Height="4*" /> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="*" /> 
    </Grid.ColumnDefinitions> 


    <!--Row 1--> 
    <views:SKCanvasView PaintSurface="OnSecondPainting" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" > 
    </views:SKCanvasView> 

    <!--Row 2--> 
    <Grid x:Name="secondGrid" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" ColumnSpacing="0" RowSpacing="0" Padding="0"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*" /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*" /> 
      <ColumnDefinition Width="*" /> 
     </Grid.ColumnDefinitions> 
     <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Red" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand" Margin="0" /> 
     <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Green" HeightRequest="1" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Margin="0"/> 
     <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End" Margin="0"/> 
     <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Orange" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="Start" Margin="0"/> 

     <BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Crimson" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand" Margin="0" /> 
     <BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Cyan" HeightRequest="1" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Margin="0"/> 
     <BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End" Margin="0"/> 
     <BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Orange" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="Start" Margin="0"/> 


     <Button x:Name="ClickMe1" Text="ClickMe 1" Grid.Row="0" Grid.Column="0" Margin="0" /> 
     <Button x:Name="ClickMe2" Text="ClickMe 2" Grid.Row="0" Grid.Column="1" Margin="0" /> 
    </Grid> 

</Grid> 

截圖

enter image description here

+0

你試過設置按鈕的垂直和水平的性能,以填補? –

+0

@TimothyJames我現在很累。沒有幫助。 – Lijo

+0

嘗試添加一個BoxView而不是一個按鈕。查看問題是否使用不同的控件複製自己。 –

回答

1

按鈕具有默認padding.So會有空間總是在嘗試對齊按鈕在一起。要麼你必須給 - 保證金,否則,而不是按鈕,你必須使用stacklayout/boxview手勢爲輕拍命令。

檢查:

 <Grid x:Name="controlGrid" ColumnSpacing="0" RowSpacing="0" Padding="0"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="4*" /> 
      <RowDefinition Height="4*" /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*" /> 
      <ColumnDefinition Width="*" /> 
     </Grid.ColumnDefinitions> 
     <!--Row 2--> 
     <Grid x:Name="secondGrid" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" ColumnSpacing="0" RowSpacing="0" Padding="0"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="*" /> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 
      <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Red" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand" Margin="0" /> 
      <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Green" HeightRequest="1" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Margin="0"/> 
      <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End" Margin="0"/> 
      <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Orange" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="Start" Margin="0"/> 

      <BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Crimson" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand" Margin="0" /> 
      <BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Cyan" HeightRequest="1" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Margin="0"/> 
      <BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End" Margin="0"/> 
      <BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Orange" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="Start" Margin="0"/> 
      <StackLayout Grid.Row="0" Grid.Column="0" HorizontalOptions="FillAndExpand" Margin="1" VerticalOptions="FillAndExpand" BackgroundColor="Gray"> 
       <StackLayout.GestureRecognizers> 
        <TapGestureRecognizer Command="{Binding Button1Command}"/> 
       </StackLayout.GestureRecognizers> 
       <Label Text="Click Me1" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/> 
      </StackLayout> 
      <StackLayout Grid.Row="0" Grid.Column="1" HorizontalOptions="FillAndExpand" Margin="1" VerticalOptions="FillAndExpand" BackgroundColor="Gray"> 
       <StackLayout.GestureRecognizers> 
        <TapGestureRecognizer Command="{Binding Button1Command}"/> 
       </StackLayout.GestureRecognizers> 
       <Label Text="Click Me2" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/> 
      </StackLayout> 
     </Grid> 
    </Grid> 

enter image description here

+0

我試過 - 按鈕上的邊緣。這沒有幫助。你有沒有任何工作的例子? – Lijo

+0

你可以用上面的xaml對嗎? – Renjith

相關問題