Bagikan melalui

Menampilkan Tab Kontekstual

  • Artikel

Dalam aplikasi kerangka kerja Windows Ribbon, tab kontekstual adalah kontrol Tab tersembunyi yang ditampilkan di baris tab saat objek di ruang kerja aplikasi, seperti gambar, dipilih atau disorot.

Pengantar

Berbeda dengan tab inti, yang berisi berbagai Perintah umum yang relevan terlepas dari konteks ruang kerja, tab kontekstual biasanya berisi satu atau beberapa Perintah yang berlaku untuk objek yang dipilih atau disorot saja.

Saat objek dipilih atau disorot di ruang kerja aplikasi, jenis dan konteks objek mungkin memerlukan Perintah berbeda yang tidak masuk akal organisasi atau fungsional pada satu tab kontekstual. Dalam kasus ini, beberapa tab kontekstual, yang terkandung dalam Grup Tab, mungkin diperlukan. Misalnya, memilih gambar yang terdapat dalam sel tabel mungkin memerlukan dua tab kontekstual yang mengekspos fungsionalitas tabel dan gambar.

Catatan

Selain beberapa tab kontekstual, kerangka kerja Pita juga mendukung beberapa kontrol Grup Tab dalam pita.

 

Saat menampilkan tab kontekstual, kerangka kerja Pita memberlakukan serangkaian perilaku dasar yang mencakup:

  • Tab kontekstual diposisikan dalam urutan yang dinyatakan dan di sebelah kanan tab inti di baris tab pita.
  • Saat pita diubah ukurannya, tab diskalakan dan label tab dipotok sesuai spasi yang diperlukan. Namun, tab kontekstual yang terlihat diberi prioritas tampilan yang lebih tinggi di mana tab tersebut diskalakan dan dipotok terakhir.
  • Label untuk Grup Tab ditampilkan di bilah judul aplikasi dan mencakup semua tab kontekstual terkait.
  • Saat beberapa kontrol Grup Tab ditampilkan pada saat yang sama, salah satu dari lima warna unik ditetapkan ke latar belakang setiap Grup Tab di bilah judul aplikasi. Warna ini juga digunakan sebagai warna sorotan untuk tab kontekstual di Grup Tab.
  • Penetapan warna Grup Tab didasarkan pada urutan elemen Grup Tab dinyatakan dalam markup. Warna ditentukan oleh kerangka kerja dan tidak dapat ditentukan oleh aplikasi.
  • Warna Grup Tab yang ditentukan oleh kerangka kerja dapat dimodifikasi secara tidak langsung melalui kunci properti Properti Kerangka Kerja . Untuk informasi selengkapnya, lihat Menyesuaikan Warna Pita.
  • Saat lebih dari lima kontrol Grup Tab ditampilkan kapan saja, kerangka kerja akan memutar warna terkait.
  • Jumlah maksimum kontrol Tab dalam pita dibatasi hingga 100. Ini termasuk tab kontekstual, terlihat atau tidak.

Cuplikan layar berikut menunjukkan tab kontekstual dari Windows 7 Paint.

cuplikan layar yang memperlihatkan kontrol tab kontekstual.

Menerapkan Tab Kontekstual

Bagian ini membahas detail implementasi tab kontekstual Pita dan memandu cara menggabungkannya dalam aplikasi Pita.

Markup

Contoh berikut menunjukkan markup dasar untuk elemen TabGroup yang berisi dua tab kontekstual.

Bagian kode ini memperlihatkan deklarasi TabGroup dan Perintah Tab .

<!-- Contextual Tabs -->
<Command Name='cmdContextualTab1'
         LabelTitle='Contextual Tab 1'
         Symbol='ID_CONTEXTUALTAB1'/>
<Command Name='cmdContextualTab2'
         LabelTitle='Contextual Tab 2'
         Symbol='ID_CONTEXTUALTAB2'/>
<Command Name='cmdContextualTabGroup'
         LabelTitle='Contextual Tabs'
         Symbol='ID_CONTEXTUALTAB_GROUP'/>

Bagian kode ini menunjukkan deklarasi kontrol yang diperlukan untuk menampilkan dua tab kontekstual dalam TabGroup.

      <Ribbon.ContextualTabs>
        <TabGroup CommandName='cmdContextualTabGroup'>
          <Tab CommandName='cmdContextualTab1'>
            <!--InRibbonGallery Group-->
            <Group CommandName='cmdInRibbonGalleryGroup'
                   SizeDefinition='OneInRibbonGallery'>
              <InRibbonGallery CommandName='cmdTextSizeGallery3'
                               HasLargeItems='true'
                               ItemHeight='32'
                               ItemWidth='32'
                               MaxColumns='3' >
                <InRibbonGallery.MenuLayout>
                  <FlowMenuLayout Columns='3'
                                  Gripper ='Corner'/>
                </InRibbonGallery.MenuLayout>
              </InRibbonGallery>
            </Group>
            <!--Command Galleries Group-->
            <Group CommandName='cmdCommandGalleriesGroup'
                   SizeDefinition='OneInRibbonGallery'>
              <InRibbonGallery CommandName='cmdCommandGallery1'
                               Type='Commands'
                               MaxRows='3'
                               MaxColumns='3'>
                <InRibbonGallery.MenuLayout>
                  <FlowMenuLayout Columns='3'
                                  Gripper ='Corner'/>
                </InRibbonGallery.MenuLayout>
              </InRibbonGallery>
            </Group>
          </Tab>
          <Tab CommandName='cmdContextualTab2'></Tab>
        </TabGroup>
      </Ribbon.ContextualTabs>

Kode

UI_PKEY_ContextAvailable adalah kunci properti tunggal yang ditentukan oleh kerangka kerja untuk menentukan visibilitas dan status tab kontekstual. Ketika objek dipilih di ruang kerja aplikasi, properti ini dapat ditetapkan salah satu dari tiga nilai dari enumerasi UI_CONTEXTAVAILABILITY yang menentukan apakah tab kontekstual ada dan, jika ada, apakah itu ditampilkan sebagai tab aktif.

Aplikasi meminta pembaruan Grup Tab dengan membatalkan dan memperbarui properti UI_PKEY_ContextAvailable saat konteks ruang kerja berubah.

Bagian kode berikut menunjukkan cara menampilkan tab kontekstual saat gambar dipilih di ruang kerja aplikasi.

// Initialize the image tools contextual tab visibility setting.
UI_CONTEXTAVAILABILITY g_ImageTools = UI_CONTEXTAVAILABILITY_NOTAVAILABLE;

// Called when an image is selected in the application.
void SelectImage()
{
  ...
  g_ImageTools = UI_CONTEXTAVAILABILITY_ACTIVE;

  // Invalidate the UI_PKEY_ContextAvailable property of the image tools  
  // contextual tab Command and trigger the UpdatePropery callback function.
  pUIFramework->InvalidateUICommand(
                  cmdImageTabSet, 
                  UI_INVALIDATIONS_PROPERTY, 
                  UI_PKEY_ContextAvailable);
  ...
}

// Update Tab Group properties.
HRESULT MyTabGroupCommandHandler::UpdateProperty(
                                  UINT nCmdID,
                                  REFPROPERTYKEY key,
                                  const PROPVARIANT* ppropvarCurrentValue,
                                  PROPVARIANT* ppropvarNewValue)
{
  HRESULT hr = E_FAIL;

  if (key == UI_PKEY_ContextAvailable)
  {
    hr = UIInitPropertyFromUInt32(key, g_ImageTools, ppropvarNewValue);
  }
  ...
  return hr;
}

Panduan Pengalaman Pengguna Pita

Proses Desain Pita