webentwicklung-frage-antwort-db.com.de

Aktivieren von Rahmen in Grid in Xamarin.Forms

Ich baue ein Raster in Xamarin.Forms. Und ich möchte Rahmen wie Tabellen hinzufügen. Ich dachte, ich könnte den Rand beim Definieren von Zeilen und Spalten hinzufügen, aber es ist fehlgeschlagen. Kann mir jemand helfen? Das ist mein aktueller Code.

Grid grid = new Grid {
    VerticalOptions = LayoutOptions.FillAndExpand,
    RowDefinitions = {
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },

    },
    ColumnDefinitions = {
        new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star) },
        new ColumnDefinition { Width = new GridLength (5, GridUnitType.Star) },
        new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star) },
    }
};
c#xamarinxamarin.forms
22
Zachary Bell

Es gibt keine Border -Eigenschaft für GridView, aber:

Setze einfach grid.BackgroundColor auf den gewünschten Randfarbenwert und dann grid.ColumnSpacing und grid.RowSpacing auf einen bestimmten Wert und stellen Sie sicher, dass für alle Steuerelemente, die Sie zum Raster hinzufügen, ein eigenes BackgroundColor richtig eingestellt ist.

25
Daniel Luberda

Hier ist die vollständige Antwort (in XAML), ohne dass Sie einen benutzerdefinierten Renderer oder Effekt schreiben müssen.

Der Code ist wenig ausführlich, aber leicht zu verstehen und das Ergebnis ist wie auf dem Bild

enter image description here

Hier ist der Code, mit dem Sie die Rahmen in Ihr Raster einfügen können.

<Grid BackgroundColor="White">
  <Grid.RowDefinitions>
    <RowDefinition Height="1"/>
    <RowDefinition Height="15"/>
    <RowDefinition Height="1"/>
    <RowDefinition Height="15"/>
    <RowDefinition Height="1"/>
    <RowDefinition Height="15"/>
    <RowDefinition Height="1"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"  />
    <ColumnDefinition Width="1" />
    <ColumnDefinition Width="10" />
    <ColumnDefinition Width="1" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="1" />
    <ColumnDefinition Width="50" />
    <ColumnDefinition Width="1" />
  </Grid.ColumnDefinitions>
  <BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="8" BackgroundColor="Red" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand"/>
  <!--Your stuff here!-->
  <BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="8" BackgroundColor="Red" HeightRequest="1" VerticalOptions="End"  HorizontalOptions="FillAndExpand"/>
   <!--Your stuff here!-->
  <BoxView Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="8" BackgroundColor="Red" HeightRequest="1" VerticalOptions="End"  HorizontalOptions="FillAndExpand"/>
   <!--Your stuff here!-->
  <BoxView Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="8" BackgroundColor="Red" HeightRequest="1" VerticalOptions="End"  HorizontalOptions="FillAndExpand"/>

  <!--Vertical lines and no "stuff"-->
  <BoxView Grid.Column="1" Grid.Row="0" Grid.RowSpan="7"  BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/>
  <BoxView Grid.Column="3" Grid.Row="0" Grid.RowSpan="7"  BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/>
  <BoxView Grid.Column="5" Grid.Row="0" Grid.RowSpan="7"  BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/>
  <BoxView Grid.Column="7" Grid.Row="0" Grid.RowSpan="7"  BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/>
</Grid>
26
Sturla

enter image description here

  <Grid BackgroundColor="White" >
        <BoxView BackgroundColor="Pink"  />
        <Grid BackgroundColor="White" Margin="5">

        </Grid>
    </Grid>
10
Abdullah Tahan

Ich habe gerade bemerkt, dass mein Beispiel Sturlas ähnlich ist, aber ein bisschen anders, also lasse ich es hier.

Der Code ist nicht besonders hübsch, aber ich habe etwas Ähnliches getan, indem ich 1px BoxView zwischen jede Spalte und dann 1 oben auf Ihrem Grid und einen unten auf Ihrem Grid eingefügt habe. , wie so:

<Grid VerticalOptions="FillAndExpand"
      HorizontalOptions="FillAndExpand"
      RowSpacing="0"
      ColumnSpacing="0">

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>

  <Grid.RowDefinitions>
    <RowDefinition Height="1"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="1"/>
  </Grid.RowDefinitions>

  <BoxView BackgroundColor="Black"
           HeightRequest="1"
           HorizontalOptions="FillAndExpand"
           Grid.Row="0"/>

  <Grid VerticalOptions="Start"
        ColumnSpacing="0"
        Grid.Row="1">

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="1"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Button Text="Button 1"/>

    <BoxView BackgroundColor="Black"
             WidthRequest="1"
             VerticalOptions="FillAndExpand"
             Grid.Column="1"/>

    <Button Text="Button 1"
            Grid.Column="2"/>
  </Grid>

  <BoxView BackgroundColor="Black"
           HeightRequest="1"
           HorizontalOptions="FillAndExpand"
           Grid.Row="2"/>
</Grid>

* Bearbeiten: Seit ich das schreibe, habe ich die Art und Weise, wie ich es mache, ein wenig geändert. Nun setze ich wie Daniel Luberdas Antwort einfach den Grid.BackgroundColor Auf Color.Black Und dann kann ich alle BoxViews entfernen und bin fertig. Ich mache das, weil ich annehme, dass es viel besser ist, wenige Ansichten auf dem Bildschirm zu haben, besonders wenn Sie so etwas wie das oben genannte in ein ListView einfügen.

Da viele meiner Seiten die Buttons animieren, wenn die Seite geladen wird (mithilfe von ScaleTo()), habe ich außerdem zunächst Grid.BackgroundColor Auf Color.Transparent Oder Color.White Und wenn die Animation fertig ist, ändere ich sie auf Color.Black. Hat bisher ziemlich gut funktioniert.

6
hvaughan3

Wenn Sie eine Lösung mit mehr gleichen Grenzen als Daniel Luberdas Antwort wünschen, habe ich Folgendes verwendet:

Erstellen Sie ein Raster, in dem das Element Rahmen haben soll. Setzen Sie den Abstand zwischen Spalten und Zeilen auf 0. Erstellen Sie für jedes Element des Rasters ein anderes Raster mit einer Boxansicht und Ihrer Ansicht über dieser Boxansicht. Setzen Sie dann jede BoxView zum Füllen und Erweitern ein. Passen Sie dann die Polsterung dieser "unter" -Gitter an, wie Sie möchten. Jedes Element Ihres Gitters wird gleichermaßen getrennt.

Das ist allerdings ziemlich schwer.

3
Francis R.