まずは実際のプロジェクトでの動作イメージを確認してください。ブランドのナビゲーションバーを通じて、各ブランド对应的商品リストが表示されます。

この機能は、ChinaCockコントロールパックのCCNavigateTitleコンポーネントのみで実装されています。ビジュアルコントロールなので、フォームにドラッグ＆ドロップし、以下の設定を行うだけで使用可能です：

object CCNavigateTitle1: TCCNavigateTitle
  Align = Top
  Appearence.IndicatorFill.Color := claCadetblue
  Appearence.IndicatorStroke.Color := claCadetblue
  Appearence.NomalItemTextSettings.FontColor := claCadetblue
  Appearence.NomalItemTextSettings.HorzAlign := Center
  Appearence.SelectedItemTextSettings.FontColor := claWhite
  Appearence.SelectedItemTextSettings.HorzAlign := Center
end

上記のように配置をTopに設定し、外観プロパティでスタイルを調整することで、アプリケーションの全体的なデザインに自然に調和させることができます。

次に、ブランドデータセットの内容をCCNavigateTitle1に設定します：

procedure TProductListForm.LoadBrandNavigation;
begin
  CCNavigateTitle1.OnActiveItemChanged := nil;
  CCNavigateTitle1.BeginUpdate;
  try
    CCNavigateTitle1.Items.Clear;
    FBrandDataSet.First;
    while not FBrandDataSet.Eof do
    begin
      with CCNavigateTitle1.Items.Add do
      begin
        ID := FBrandDataSet.FieldByName('BrandCode').AsString;
        Text := FBrandDataSet.FieldByName('BrandName').AsString;
      end;
      FBrandDataSet.Next;
    end;
  finally
    CCNavigateTitle1.EndUpdate;
    CCNavigateTitle1.ActiveItemIndex := 0;
    CCNavigateTitle1.OnActiveItemChanged := OnBrandSelectionChanged;
  end;
end;

上記のコードは、データセットをループしながら各レコードをブランドとしてCCNavigateTitleに追加しています。ユーザーがブランドを選択したタイミングで対応する商品データを表示するには、以下のイベントハンドラを実装します：

procedure TProductListForm.OnBrandSelectionChanged(Sender: TObject;
  PreviousItem, CurrentItem: TCCNavigateTitleItem);
begin
  inherited;
  if not Assigned(PreviousItem) then Exit;

  FBrandDataSet.Locate('BrandCode', CurrentItem.ID, []);
  LoadProductsByBrand(CurrentItem.ID);
end;

実装時に注意が必要な点として、LoadBrandNavigationの呼び出し時にOnActiveItemChangedイベントが発生しないようにする必要があります。しかし、アニメーションの遅延により意図せずイベントが発火する場合があるため、以下のチェック処理を入れています：

if not Assigned(PreviousItem) then Exit;

上述の実装では実行時にナビゲーション内容を動的にロードしていますが、CCNavigateTitleにはItemsプロパティも用意されており、IDE上で直接ナビゲーション項目を設定することも可能です。

このコンポーネントを使用するべきシナリオについて：

ナビゲーション項目が画面幅を超える場合に最適です。

その理由は、CCNavigateTitleがスワイプ操作をサポートしており、ユーザーが左右にスワイプすることで隠れた項目を表示できるためです。

上方にあるのはこのコンポーネントのプロパティパネルです。主要なプロパティを赤でマークしてあります。非常にシンプルな設定でありながら、プロフェッショナルな外観を実現できます。試してみればその効果がわかります！