Aracılığıyla paylaş

Xamarin.Forms TableView

  • Makale

TableView , aynı şablonu paylaşmayen satırların bulunduğu kaydırılabilir veri veya seçim listelerini görüntülemeye yönelik bir görünümdür. ListView'unItemsSource aksine, TableView kavramı yoktur, bu nedenle öğelerin alt öğe olarak el ile eklenmesi gerekir.

TableView Örneği

Kullanım örnekleri

TableView aşağıdaki durumlarda kullanışlıdır:

  • ayarların listesini sunma,
  • formda veri toplama veya
  • satırdan satıra (örneğin sayılar, yüzdeler ve görüntüler) farklı şekilde sunulan verileri gösterir.

TableView yukarıdaki senaryolar için yaygın bir ihtiyaç olan çekici bölümlerde satırları kaydırmayı ve yerleştirmeyi işler. Denetim TableView , kullanılabilir olduğunda her platformun temel alınan eşdeğer görünümünü kullanır ve her platform için yerel bir görünüm oluşturur.

Yapı

içindeki TableView öğeler bölümler halinde düzenlenir. kök dizininde TableView , TableRootbir veya daha fazla TableSection örneğin üst öğesi olan bulunur. Her TableSection biri bir başlık ve bir veya daha fazla ViewCell örnekten oluşur:

<TableView Intent="Settings">
    <TableRoot>
        <TableSection Title="Ring">
            <SwitchCell Text="New Voice Mail" />
            <SwitchCell Text="New Mail" On="true" />
        </TableSection>
    </TableRoot>
</TableView>

Eşdeğer C# kodu:

Content = new TableView
{
    Root = new TableRoot
    {
        new TableSection("Ring")
        {
          // TableSection constructor takes title as an optional parameter
          new SwitchCell { Text = "New Voice Mail" },
          new SwitchCell { Text = "New Mail", On = true }
        }
    },
    Intent = TableIntent.Settings
};

Görünüm

TableView , numaralandırma üyelerinden Intent herhangi birine ayarlanabilen TableIntent özelliğini kullanıma sunar:

  • Data – veri girdilerini görüntülerken kullanmak için. ListView'un veri listelerini kaydırmak için daha iyi bir seçenek olabileceğini unutmayın.
  • Form – TableView bir Form görevi görürken kullanmak için.
  • Menu – seçim menüsünü sunarken kullanmak için.
  • Settings – yapılandırma ayarlarının listesini görüntülerken kullanmak için.

TableIntent Seçtiğiniz değer, öğesinin her platformda nasıl görüneceğini TableView etkileyebilir. Net farklar olmasa bile, tabloyu kullanma amacınıza en yakın olanını seçmek TableIntent en iyi yöntemdir.

Ayrıca, her TableSection biri için görüntülenen metnin rengi, özelliği olarak Colorayarlanarak TextColor değiştirilebilir.

Yerleşik hücreler

Xamarin.Forms bilgileri toplamak ve görüntülemek için yerleşik hücrelerle birlikte gelir. ancak ListView ve TableView tüm aynı hücreleri SwitchCell kullanabilir ve EntryCell bir TableView senaryo için en uygun olanlardır.

TextCell ve ImageCell'in ayrıntılı açıklaması için bkz. ListView Hücre Görünümü.

SwitchCell

SwitchCell , bir açık/kapalı veya true/false durumu sunmak ve yakalamak için kullanılacak denetimdir. Bu dosya şu özellikleri tanımlar:

  • Text – anahtarın yanında görüntülenecek metin.
  • On – anahtarın açık veya kapalı olarak görüntülenip görüntülenmeyeceği.
  • OnColorColor– açık konumdayken anahtarın şalterini seçin.

Bu özelliklerin tümü bağlanabilir.

SwitchCell ayrıca olayı kullanıma seçerek OnChanged hücrenin durumundaki değişikliklere yanıt vermenizi sağlar.

SwitchCell Örneği

EntryCell

EntryCell kullanıcının düzenleyebileceği metin verilerini görüntülemeniz gerektiğinde kullanışlıdır. Bu dosya şu özellikleri tanımlar:

  • Keyboard – Düzenleme sırasında görüntülenecek klavye. Sayısal değerler, e-posta, telefon numaraları vb. için seçenekler vardır. API belgelerine bakın.
  • Label – Metin giriş alanının solunda görüntülenecek etiket metni.
  • LabelColor – Etiket metninin rengi.
  • Placeholder – Giriş alanında null veya boş olduğunda görüntülenecek metin. Metin girişi başladığında bu metin kaybolur.
  • Text – Giriş alanındaki metin.
  • HorizontalTextAlignment – Metnin yatay hizalaması. Değerler ortaya, sola veya sağa hizalanır. API belgelerine bakın.
  • VerticalTextAlignment – Metnin dikey hizalaması. Değerler , Centerveya EndşeklindedirStart.

EntryCell ayrıca, kullanıcı metin düzenlerken klavyedeki 'bitti' düğmesine bastığında tetiklenen olayı da kullanıma sunar Completed .

EntryCell Örneği

Özel hücreler

Yerleşik hücreler yeterli olmadığında, özel hücreler verileri uygulamanız için anlamlı olacak şekilde sunmak ve yakalamak için kullanılabilir. Örneğin, kullanıcının resmin opaklığını seçmesine izin vermek için bir kaydırıcı sunmak isteyebilirsiniz.

Tüm özel hücreler, tüm yerleşik hücre türlerinin kullandığı temel sınıftan türetilmelidir ViewCell.

Bu bir özel hücre örneğidir:

Özel Hücre Örneği

Aşağıdaki örnek, yukarıdaki ekran görüntülerinde oluşturmak TableView için kullanılan XAML'yi gösterir:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DemoTableView.TablePage"
             Title="TableView">
      <TableView Intent="Settings">
          <TableRoot>
              <TableSection Title="Getting Started">
                  <ViewCell>
                      <StackLayout Orientation="Horizontal">
                          <Image Source="bulb.png" />
                          <Label Text="left"
                                 TextColor="#f35e20" />
                          <Label Text="right"
                                 HorizontalOptions="EndAndExpand"
                                 TextColor="#503026" />
                      </StackLayout>
                  </ViewCell>
              </TableSection>
          </TableRoot>
      </TableView>
</ContentPage>

Eşdeğer C# kodu:

var table = new TableView();
table.Intent = TableIntent.Settings;
var layout = new StackLayout() { Orientation = StackOrientation.Horizontal };
layout.Children.Add (new Image() { Source = "bulb.png"});
layout.Children.Add (new Label()
{
    Text = "left",
    TextColor = Color.FromHex("#f35e20"),
    VerticalOptions = LayoutOptions.Center
});
layout.Children.Add (new Label ()
{
    Text = "right",
    TextColor = Color.FromHex ("#503026"),
    VerticalOptions = LayoutOptions.Center,
    HorizontalOptions = LayoutOptions.EndAndExpand
});
table.Root = new TableRoot ()
{
    new TableSection("Getting Started")
    {
        new ViewCell() {View = layout}
    }
};
Content = table;

altındaki TableView kök öğesi olur TableRootve altında TableRoothemen bir TableSection bulunur. ViewCell doğrudan altında TableSectiontanımlanır ve StackLayout özel hücrenin düzenini yönetmek için kullanılır, ancak burada herhangi bir düzen kullanılabilir.

Not

'nin aksine ListView, TableView özel (veya herhangi bir) hücrenin içinde ItemTemplatetanımlanmasını gerektirmez.

Satır yüksekliği

sınıfı, TableView hücrelerin satır yüksekliğini değiştirmek için kullanılabilecek iki özelliğe sahiptir:

  • RowHeight – her satırın yüksekliğini olarak intayarlar.
  • HasUnevenRows – olarak ayarlanırsa truesatırların yükseklikleri değişir. Bu özellik olarak trueayarlanırken satır yüksekliklerinin tarafından otomatik olarak hesaplanıp uygulanacağını Xamarin.Formsunutmayın.

Hücredeki TableView içeriğin yüksekliği değiştirildiğinde, satır yüksekliği Android ve Evrensel Windows Platformu (UWP) üzerinde örtük olarak güncelleştirilir. Ancak, iOS'ta özelliği ve yöntemi çağrılarak Cell.ForceUpdateSize güncelleştirilmeye HasUnevenRows true zorlanmalıdır.

Aşağıdaki XAML örneği, içeren bir TableView ViewCellgösterir:

<ContentPage ...>
    <TableView ...
               HasUnevenRows="true">
        <TableRoot>
            ...
            <TableSection ...>
                ...
                <ViewCell x:Name="_viewCell"
                          Tapped="OnViewCellTapped">
                    <Grid Margin="15,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Label Text="Tap this cell." />
                        <Label x:Name="_target"
                               Grid.Row="1"
                               Text="The cell has changed size."
                               IsVisible="false" />
                    </Grid>
                </ViewCell>
            </TableSection>
        </TableRoot>
    </TableView>
</ContentPage>

ViewCell öğesine dokunulduğundaOnViewCellTapped, olay işleyicisi yürütülür:

void OnViewCellTapped(object sender, EventArgs e)
{
    _target.IsVisible = !_target.IsVisible;
    _viewCell.ForceUpdateSize();
}

Olay işleyicisi OnViewCellTapped içinde ViewCellikincisini Label gösterir veya gizler ve yöntemini çağırarak Cell.ForceUpdateSize hücrenin boyutunu açıkça güncelleştirir.

Aşağıdaki ekran görüntüleri, üzerine dokunmadan önce hücreyi gösterir:

Yeniden boyutlandırılmadan önce ViewCell

Aşağıdaki ekran görüntüleri, üzerine dokunulduğunda hücreyi gösterir:

Yeniden boyutlandırıldıktan sonra ViewCell

Önemli

Bu özellik fazla kullanılırsa güçlü bir performans düşüşü olasılığı vardır.