grid.column裏面的格式按鈕

我瘋了一個涉及網格中格式化按鈕的問題。我正在使用Xamarin的Visual Studio 2015（最新更新）。grid.column裏面的格式按鈕

我無法定義和集中按鈕。當你不適合寬度時，它們會比列更大並且會丟失內容。

我的代碼是：

<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand"> 
 
    <Button BackgroundColor="Red" Text="Login" /> 
 
    <ScrollView Orientation="Vertical" VerticalOptions="FillAndExpand"> 
 
     <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand"> 
 
      <Frame BackgroundColor="#ffc0ff" 
 
        OutlineColor="#000000" 
 
        Padding="2,2,2,2"> 
 
       <Grid> 
 
        <Grid.RowDefinitions> 
 
         <RowDefinition Height="Auto" /> 
 
        </Grid.RowDefinitions> 
 
        <Grid.ColumnDefinitions> 
 
         <ColumnDefinition Width="*" /> 
 
         <ColumnDefinition Width="*" /> 
 
         <ColumnDefinition Width="*" /> 
 
         <ColumnDefinition Width="*" /> 
 
         <ColumnDefinition Width="*" /> 
 
         <ColumnDefinition Width="*" /> 
 
         <ColumnDefinition Width="*" /> 
 
        </Grid.ColumnDefinitions> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="0" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="1" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="1" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="2" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="2" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="3" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="3" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="4" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="4" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="5" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="5" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="6" 
 
          TextColor="Black" /> 
 
       </Grid> 
 
      </Frame> 
 

 
      <Frame BackgroundColor="#ffc0ff" 
 
        OutlineColor="#000000" 
 
        Padding="2,2,2,2"> 
 
       <Grid> 
 
        <Grid.RowDefinitions> 
 
         <RowDefinition Height="*" /> 
 
        </Grid.RowDefinitions> 
 
        <Grid.ColumnDefinitions> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
        </Grid.ColumnDefinitions> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="0" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="1" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="1" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="2" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="2" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="3" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="3" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="4" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="4" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="5" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="5" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="6" 
 
          TextColor="Black" /> 
 
       </Grid> 
 
      </Frame> 
 

 
      <Frame BackgroundColor="#ffc0ff" 
 
        OutlineColor="#000000" 
 
        Padding="2,2,2,2"> 
 
       <Grid> 
 
        <Grid.RowDefinitions> 
 
         <RowDefinition Height="*" /> 
 
        </Grid.RowDefinitions> 
 
        <Grid.ColumnDefinitions> 
 
         <ColumnDefinition Width="*" /> 
 
         <ColumnDefinition Width="*" /> 
 
         <ColumnDefinition Width="*" /> 
 
         <ColumnDefinition Width="*" /> 
 
         <ColumnDefinition Width="*" /> 
 
         <ColumnDefinition Width="*" /> 
 
         <ColumnDefinition Width="*" /> 
 
        </Grid.ColumnDefinitions> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="0" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="1" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="1" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="2" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="2" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="3" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="3" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="4" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="4" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="5" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="5" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="6" 
 
          TextColor="Black" /> 
 
       </Grid> 
 
      </Frame> 
 

 
      <Frame BackgroundColor="#ffc0ff" 
 
        OutlineColor="#000000" 
 
        Padding="2,2,2,2"> 
 
       <Grid> 
 
        <Grid.RowDefinitions> 
 
         <RowDefinition Height="Auto" /> 
 
        </Grid.RowDefinitions> 
 
        <Grid.ColumnDefinitions> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
        </Grid.ColumnDefinitions> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="0" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="1" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="1" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="2" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="2" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="3" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="3" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="4" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="4" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="5" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="5" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="6" 
 
          TextColor="Black" /> 
 
       </Grid> 
 
      </Frame> 
 

 
      <Frame BackgroundColor="#ffc0ff" 
 
        OutlineColor="#000000" 
 
        Padding="2,2,2,2"> 
 
       <Grid> 
 
        <Grid.RowDefinitions> 
 
         <RowDefinition Height="Auto" /> 
 
        </Grid.RowDefinitions> 
 
        <Grid.ColumnDefinitions> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
        </Grid.ColumnDefinitions> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="0" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="1" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="1" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="2" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="2" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="3" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="3" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="4" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="4" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="5" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="5" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="6" 
 
          TextColor="Black" /> 
 
       </Grid> 
 
      </Frame> 
 

 
      <Frame BackgroundColor="#ffc0ff" 
 
        OutlineColor="#000000" 
 
        Padding="2,2,2,2"> 
 
       <Grid> 
 
        <Grid.RowDefinitions> 
 
         <RowDefinition Height="Auto" /> 
 
        </Grid.RowDefinitions> 
 
        <Grid.ColumnDefinitions> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
         <ColumnDefinition Width="Auto" /> 
 
        </Grid.ColumnDefinitions> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="0" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="1" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="1" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="2" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="2" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="3" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="3" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="4" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="4" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="5" 
 
          TextColor="Black" /> 
 
        <Button Grid.Row="0" 
 
          Grid.Column="5" 
 
          BorderColor="Black" 
 
          BorderRadius="10" 
 
          Text="6" 
 
          TextColor="Black" /> 
 
       </Grid> 
 
      </Frame> 
 
     </StackLayout> 
 
    </ScrollView> 
 
    <Button BackgroundColor="Green" Text="Login" /> 
 
</StackLayout>

這是什麼樣子：

This is what it looks like

來源

2016-09-06 Eloi Sartori

我改進了一下散文，併爲您嵌入了圖像。 – Ajean

您需要添加VerticalOptions和HorizontalOptions的按鈕。例如：

<Button Grid.Row="0" 
         Grid.Column="0" 
         BorderColor="Black" 
         BorderRadius="10" 
         Text="1" 
         TextColor="Black" 
         VerticalOptions = FillAndExpand, 
         HorizontalOptions = FillAndExpand />

另請嘗試刪除BorderRadius。

這是我的例子創建按鈕5x5的網格（代碼）：

void CreateButtons(Grid _root) 
    { 
     int position = 0; 
     int Size =5; 
     int[] _filedNumber = new int[] { 1, 3, 5, 7, 9 }; 
     for (int row = 0; row < Size; row++) 
     { 

      for (int column = 0; column < Size; column++) 
      { 

       Button bt = new Button 
       { 
        Text = (emptyText) ? string.Empty : _titleArr[position], 
        FontSize = _fontSize, 
        BackgroundColor = Color.Transparent, 
        VerticalOptions = LayoutOptions.FillAndExpand, 
        HorizontalOptions = LayoutOptions.FillAndExpand, 
        bt.Caption = row 
       }; 

       Grid.SetColumn(bt, _filedNumber[column]); 
       Grid.SetRow(bt, _filedNumber[row]); 
       _root.Children.Add(bt); 
       position++; 
      } 
     } 
    }

這是我的XAML中網格：

<Grid x:Name="ContentPanel" 
      Grid.Row="1" 
      Padding="10"> 
     <Grid.Resources> 
      <ResourceDictionary> 
       <OnPlatform x:Key="dividerThickness" 
          Android="1" 
          WinPhone="1" 
          iOS="1" 
          x:TypeArguments="GridLength" /> 

       <Style TargetType="BoxView"> 
        <Setter Property="Color" Value="Accent" /> 
       </Style> 

      </ResourceDictionary> 
     </Grid.Resources> 

     <Grid.RowDefinitions> 
      <RowDefinition Height="{StaticResource dividerThickness}" /> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="{StaticResource dividerThickness}" /> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="{StaticResource dividerThickness}" /> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="{StaticResource dividerThickness}" /> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="{StaticResource dividerThickness}" /> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="{StaticResource dividerThickness}" /> 
     </Grid.RowDefinitions> 

     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="{StaticResource dividerThickness}" /> 
      <ColumnDefinition Width="*" /> 
      <ColumnDefinition Width="{StaticResource dividerThickness}" /> 
      <ColumnDefinition Width="*" /> 
      <ColumnDefinition Width="{StaticResource dividerThickness}" /> 
      <ColumnDefinition Width="*" /> 
      <ColumnDefinition Width="{StaticResource dividerThickness}" /> 
      <ColumnDefinition Width="*" /> 
      <ColumnDefinition Width="{StaticResource dividerThickness}" /> 
      <ColumnDefinition Width="*" /> 
      <ColumnDefinition Width="{StaticResource dividerThickness}" /> 
     </Grid.ColumnDefinitions> 


     <BoxView Grid.Row="0" 
       Grid.Column="0" 
       Grid.ColumnSpan="11" /> 

     <BoxView Grid.Row="0" 
       Grid.RowSpan="11" 
       Grid.Column="0" /> 
     <BoxView Grid.Row="0" 
       Grid.RowSpan="11" 
       Grid.Column="2" /> 
     <BoxView Grid.Row="0" 
       Grid.RowSpan="11" 
       Grid.Column="4" /> 
     <BoxView Grid.Row="0" 
       Grid.RowSpan="11" 
       Grid.Column="6" /> 
     <BoxView Grid.Row="0" 
       Grid.RowSpan="11" 
       Grid.Column="8" /> 
     <BoxView Grid.Row="0" 
       Grid.RowSpan="11" 
       Grid.Column="10" /> 
     <BoxView Grid.Row="2" 
       Grid.Column="0" 
       Grid.ColumnSpan="11" /> 
     <BoxView Grid.Row="4" 
       Grid.Column="0" 
       Grid.ColumnSpan="11" /> 
     <BoxView Grid.Row="6" 
       Grid.Column="0" 
       Grid.ColumnSpan="11" /> 
     <BoxView Grid.Row="8" 
       Grid.Column="0" 
       Grid.ColumnSpan="11" /> 
     <BoxView Grid.Row="10" 
       Grid.Column="0" 
       Grid.ColumnSpan="11" /> 

    </Grid>

我不得不花時間，但它爲我工作。希望這個幫助。

來源

2016-09-06 12:50:17 FetFrumos

grid.column裏面的格式按鈕

回答

相關問題