Compartilhar via


Demonstra Passo a passo: Atualizando o MFC Rabisco aplicativo (parte 1)

Esta explicação passo a passo demonstra como você pode modificar um aplicativo de MFC existente para usar a nova interface de usuário da faixa de Opções Fluent do Office que foi introduzida no 2007 Microsoft Office versão.Para obter mais informações sobre a interface de usuário da faixa de Opções Fluent do Office, consulte "interface de usuário do Office Fluent Developer Portal" noBiblioteca MSDN.

Esta explicação passo a passo modifica a amostra Rabisco 1.0 MFC clássica que lhe permite usar o mouse para criar desenhos de linha.Parte 1 desta explicação passo a passo mostra como modificar a amostra de rabisco para que ele exibe uma BAR de faixa de opções.Parte 2 desta explicação passo a passo adiciona mais botões à BAR de faixa de opções.

Pré-requisitos

Rabisco exemplo: Aplicativo de desenho MDI do MFC

Exemplo do RibbonGadgets: Aplicativo de gadgets da fita

Seções

Parte 1 desta explicação passo a passo possui as seguintes seções:

  • Replacing the Base Classes

  • Adding a Ribbon to the Application

  • Adding Bitmaps to the Ribbon

  • Creating an Instance of the Ribbon Bar

  • Adding a Ribbon Category

  • Setting the Look of the Application

Substituição de classes base

Para converter um aplicativo que ofereça suporte a um menu para um aplicativo que ofereça suporte a uma faixa de opções, você deve derivar de aplicativo, janela do quadro e classes de barra de ferramentas de classes base fornecidas pelo Visual C++ 2008 Feature Pack. (É recomendável que você não modifique exemplo Rabisco original mas Limpar projeto rabisco, copie-o para outro diretório e, em seguida, modifique a cópia.)

Para substituir as classes base do aplicativo Rabisco

  1. No scribble.cpp, verifique se esse CScribbleApp::InitInstance inclui uma telefonar para AfxOleInit.

  2. Adicione o seguinte código ao arquivo stdafx.h.

    #include <afxcontrolbars.h>
    
  3. No scribble.h, modifique a definição para o CScribbleApp classe, de modo que ele é derivado de Classe CWinAppEx.

    class CScribbleApp: public CWinAppEx
    
  4. Rabisco 1.0 foi escrito quando aplicativos do Windows usado um arquivo de inicialização (. ini) para salvar dados de preferência do usuário.Em vez de um arquivo de inicialização, modificar Rabisco para armazenar as preferências do usuário no registro.Para conjunto a chave do registro e base, digite o seguinte código em CScribbleApp::InitInstance Depois que o LoadStdProfileSettings() demonstrativo.

    SetRegistryKey(_T("MFCNext\\Samples\\Scribble2"));
    SetRegistryBase(_T("Settings"));
    
  5. No Visual C++ 2008 Feature Pack, o quadro principal para um aplicativo de interface (MDI) vários documentos não é derivado de CMDIFrameWnd classe. Em vez disso, ele é derivado de CMDIFrameWndEx classe.

    Em arquivos mainfrm.h e mainfrm.cpp, substituir todas as referências a CMDIFrameWnd com CMDIFrameWndEx.

  6. Em arquivos childfrm.h e childfrm.cpp, substitua CMDIChildWnd com CMDIChildWndEx.

    Em childfrm.arquivo h, de substituição CSplitterWnd com CSplitterWndEx.

  7. Modificar barras de ferramentas e barras de status para usar as novas classes MFC.

    No arquivo mainfrm.h:

    1. Substitua CToolbar por CMFCToolBar.

    2. Substitua CStatusBar por CMFCStatusBar.

  8. No arquivo mainfrm.cpp:

    1. Substituir m_wndToolBar.SetBarStyle com m_wndToolBar.SetPaneStyle

    2. Substituir m_wndToolBar.GetBarStyle com m_wndToolBar.GetPaneStyle

    3. Substituir DockControlBar(&m_wndToolBar) com DockPane(&m_wndToolBar)

  9. No arquivo ipframe.cpp, comente as três linhas de código a seguir.

    m_wndToolBar.EnableDocking(CBRS_ALIGN_ANY);
    pWndFrame->EnableDocking(CBRS_ALIGN_ANY);
    pWndFrame->DockPane(&m_wndToolBar);
    
  10. Adicione o seguinte código para o início do arquivo de recurso (.rc) do seu projeto, se você deseja vincular o seu aplicativo estaticamente.

    #include "afxribbon.rc"
    

    O arquivo afxribbon.rc contém recursos que são necessários em time de execução se o aplicativo migrado usa caixas de diálogo ou seqüências de caracteres no Visual C++ 2008 Feature Pack. The Assistente de aplicativo do MFC inclui automaticamente esse arquivo quando você cria um novo aplicativo.

  11. Salvar as alterações e, em seguida, compile e execute o aplicativo.

[go to top]

Adicionando uma faixa de opções ao aplicativo

Quando você converte um aplicativo que usa menus para um aplicativo que usa uma faixa de opções, não é necessário remover ou desabilitar os menus existentes.Em vez disso, criar a BAR de faixa de opções, adicionar botões de faixa de opções e, em seguida, associar os novos botões itens de menu existente.Embora os menus não sejam visíveis, as mensagens da BAR de Faixa de Opções de Opções são roteadas por meio dos menus.Além disso, os atalhos do menu continuam a funcionar.

Uma BAR de faixa de opções consiste no botão de aplicativo, que é o grande botão no lado superior esquerdo da faixa, e uma ou mais guias.Cada guia contém um ou mais painéis que atuam sistema autônomo recipientes para faixa de opções botões e controles.

Para adicionar uma BAR de faixa de opções para um aplicativo, declare a BAR de faixa de opções no arquivo mainfrm.h.No arquivo mainfrm.cpp, escreva o código para adicionar controles à BAR de faixa de opções.

Para adicionar uma faixa de opções de aplicativo

  1. No arquivo mainfrm.h, adicione dois membros de dados para a seção protegida CMainFrame, a definição de classe para o quadro principal.Esses membros representam a BAR de faixa de opções e o botão de aplicativos.

    // Ribbon bar for the application
    CMFCRibbonBar  m_wndRibbonBar;
    // The application button for the ribbon
    CMFCRibbonApplicationButton  m_MainButton;
    
  2. Após os dois membros anteriores, adicione um membro de dados para a lista de imagem que é usado pelos painéis da faixa de opções.Essas imagens são visíveis somente quando o usuário redimensiona o aplicativo e, portanto, a faixa de opções.

    // Ribbon panel icons
    CMFCToolBarImages  m_PanelImages;
    

[go to top]

Adição de Bitmaps a faixa de opções

As próximas quatro etapas desta explicação passo a passo exigem recursos de bitmap.Você pode obter bitmaps apropriado de várias maneiras:

  • Use o Editores de recursos para inventar seus próprios bitmaps. Ou use o recurso editores para montar bitmaps entre as imagens de gráficos (.formato PNG) portable rede incluídos no Visual Studio. Essas imagens estão no VS2008ImageLibrary diretório.

    No entanto, a interface do usuário da faixa de opções exige que alguns bitmaps suporta imagens transparente.Bitmaps transparente ter uma profundidade de cor de 32 bit, onde 24 bit especificar os componentes vermelhos, verdes e azuis da cor e 8 bit definem um canal alfa que especifica a transparência da cor.O corrente recurso editores podem exibir mas não modificar bitmaps com uma profundidade de cor de 32 bit.Conseqüentemente, usar um editor de imagens externas, em vez do recurso editores para manipular a bitmaps transparente.

  • Copiar um arquivo de recurso apropriado de outro aplicativo para seu projeto e, em seguida, importar os bitmaps do arquivo.

Esta explicação passo a passo copia arquivos de recursos de um aplicativo no diretório de exemplos.

Para adicionar bitmaps da faixa de opções

  1. Use o Windows Explorer para copiar os arquivos .bmp seguinte do diretório de recursos (res) da a amostra RibbonGadgets:

    1. Copie main.bmp para seu projeto de rabisco.

    2. Copiar filesmall.bmp e filelarge.bmp para seu projeto de rabisco.

    3. Fazer novas cópias dos arquivos filelarge.bmp e filesmall.bmp, mas salvar as cópias na amostra RibbonGadgets.Renomear cópias homesmall.bmp e homelarge.bmp e, em seguida, mova as cópias para seu projeto de rabisco.

    4. Fazer uma cópia do arquivo barra de ferramentas.bmp, mas salvar a cópia em uma amostra RibbonGadgets.Renomear panelicons.bmp cópia e, em seguida, mova a cópia para seu projeto de rabisco.

  2. Importe o bitmap de um aplicativo MFC.In Modo de exibição de recurso, clicar duas vezes o Scribble.rc nó, clicar duas vezes o Bitmap nó e, em seguida, clicar Adicionar recurso.Na caixa de diálogo que aparece, clicar no Importação botão.Navegue até o res diretório, selecionar o arquivo main.bmp e, em seguida, clicar na em aberto botão.

    O bitmap main.bmp contém uma imagem x 26 26.alterar a ID do bitmap para IDB_RIBBON_MAIN.

  3. Importe os bitmaps para menu Arquivo é anexado ao botão de aplicativo.

    1. Importar o arquivo filesmall.bmp, que contém dez 16 x 16 (16 x 160) imagens.Como precisamos imagens de 16 x 16 apenas oito (16 x 128), use o Modo de exibição de recurso para alterar a largura desse bitmap de 160 para 128.alterar a ID do bitmap para IDB_RIBBON_FILESMALL.

    2. Importar filelarge.bmp, que contém oito 32 x 32 (32 x 256) imagens.Altere a ID do bitmap para IDB_RIBBON_FILELARGE.

  4. Importe os bitmaps para as categorias de faixa de opções e painéis.Cada guia na BAR de faixa de opções é uma categoria e consiste em um rótulo de texto e imagem opcional.

    1. Importe o bitmap homesmall.bmp, que contém oito 16 x 16 imagens para bitmaps de botão pequeno.alterar a ID do bitmap para IDB_RIBBON_HOMESMALL.

    2. Importe o bitmap homelarge.bmp, que contém oito 32 x 32 imagens para bitmaps de botão grande.alterar a ID do bitmap para IDB_RIBBON_HOMELARGE.

  5. Importar bitmaps para o redimensionada Faixa de Opções painéis.Esses bitmaps ou ícones do painel, são usados após uma operação de redimensionar se o Faixa de Opções for muito pequena para exibir o painel inteiro.

    1. Importe o bitmap panelicons.bmp, que contém oito 16 x 16 imagens.No Propriedades janela de do Editor de bitmap, ajustar a largura do bitmap para 64 (16 x 64).Altere a ID do bitmap para IDB_PANEL_ICONS.

[go to top]

Criando uma instância da BAR de faixa de opções

O procedimento a seguir mostra como criar uma instância da faixa de opções da BAR quando seu aplicativo for iniciado.E, em seguida, o procedimento mostra como inicializar os itens de menu e imagens que estão associadas a aplicativo botão.

Para criar uma instância da BAR de faixa de opções

  1. No arquivo mainfrm.cpp, adicione o seguinte código antes do participante return demonstrativo no participante do CMainFrame::OnCreate função. Isso cria uma ocorrência da BAR de faixa de opções.

    // Create the ribbon bar
    if (!m_wndRibbonBar.Create(this))
    {
    return -1;   //Failed to create ribbon bar
    }
    
  2. Adicione o seguinte código após as instruções na etapa anterior.Esse código carrega imagens para os painéis da faixa de opções e botão aplicativo; em seguida, anexar o botão de aplicativos para a faixa de opções.

    // Load images for ribbon panels
    m_PanelImages.SetImageSize(CSize(16,16));
    m_PanelImages.Load(IDB_PANEL_ICONS);
    // Initialize the application button
    m_MainButton.SetImage(IDB_RIBBON_MAIN);
    m_MainButton.SetToolTipText(_T("File"));
    m_MainButton.SetText(_T("\nf"));
    // Attach the application button to the ribbon
    m_wndRibbonBar.SetApplicationButton(&m_MainButton, CSize(45,45));
    
  3. Adicione o seguinte código após as instruções na etapa anterior.Esse código cria o menu que aparece quando o usuário pressiona o aplicativo botão.As IDs de mensagem usadas nesse código já estão definidas no menu do Rabisco 1.0.

    CMFCRibbonMainPanel* pMainPanel = m_wndRibbonBar.AddMainCategory(
    _T("File"), IDB_RIBBON_FILESMALL, IDB_RIBBON_FILELARGE);
    pMainPanel->Add(new CMFCRibbonButton(
    ID_FILE_NEW, _T("&New"), 0, 0));
    pMainPanel->Add(new CMFCRibbonButton(ID_FILE_OPEN, _T("&Open..."), 1, 1));
    pMainPanel->Add(new CMFCRibbonButton(ID_FILE_CLOSE, _T("&Close"), 5, 5));
    pMainPanel->Add(new CMFCRibbonButton(ID_FILE_SAVE, _T("&Save"), 2, 2));
    pMainPanel->Add(new CMFCRibbonButton(ID_FILE_SAVE_AS, _T("Save &As..."), 3, 3));
    CMFCRibbonButton* pBtnPrint = new CMFCRibbonButton(ID_FILE_PRINT, _T("&Print"), 4, 4);
    pBtnPrint->AddSubItem(new CMFCRibbonLabel(_T("Preview and print the document")));
    pBtnPrint->AddSubItem(new CMFCRibbonButton(ID_FILE_PRINT, _T("&Print"), 4, 4, TRUE));
    pBtnPrint->AddSubItem(new CMFCRibbonButton(ID_FILE_PRINT_DIRECT, _T("&Quick Print"), 7, 7, TRUE));
    pBtnPrint->AddSubItem(new CMFCRibbonButton(ID_FILE_PRINT_PREVIEW, _T("Print Pre&view"), 6, 6, TRUE));
    pBtnPrint->SetKeys(_T("p"), _T("w"));
    pMainPanel->Add(pBtnPrint);
    pMainPanel->Add(new CMFCRibbonSeparator(TRUE));
    pMainPanel->Add(new CMFCRibbonButton(ID_FILE_CLOSE, _T("&Close"), 5, 5));
    pMainPanel->AddRecentFilesList(_T("Recent Documents"));
    pMainPanel->AddToBottom(new CMFCRibbonMainPanelButton(ID_APP_EXIT, _T("E&xit"), 8));
    

[go to top]

Adicionando uma categoria da faixa de opções de opções

Agora que você criou o botão de aplicativos, você está pronto para adicionar o primeiro categoria da faixa de opções e o painel da faixa de opções.Cada categoria define uma guia que aparece na faixa de opções.(Esta explicação passo a passo usa o mesmo ícone de painel para todos os painéis.No entanto, você pode experimentar e utilizar outros índices de lista de imagem para exibir outros ícones.)

Para adicionar uma categoria de início e edição painel

  1. O programa Rabisco requer apenas uma única categoria.nome Esta categoria residência.Adicione o seguinte código após as instruções no procedimento anterior.

    // Add a Home category to the ribbon bar.
    CMFCRibbonCategory* pCategory = m_wndRibbonBar.AddCategory(
    _T("&Home"),           // Category name
       IDB_RIBBON_HOMESMALL,    // Category small images (16 x 16)
       IDB_RIBBON_HOMELARGE);   // Category large images (32 x 32)
    
  2. Cada categoria de fita é organizada em painéis nomeados.Cada painel contém um conjunto de controles que realizam operações relacionadas.Adicione o seguinte código para criar um painel que lida com funções de edição.Nomeie esse painel edição.

    // Add an Edit panel to the Home category.
    CMFCRibbonPanel* pPanelEdit = pCategory->AddPanel(
        _T("Edit"),                // Panel name
        m_PanelImages.ExtractIcon(0));  // Panel icon
    
  3. Adicionar um botão para o edição painel que é responsável por limpar o Sumário do documento.A ID da mensagem para este botão já foi definida no recurso de menu IDR_SCRIBBTYPE.Especificar desmarcar tudo sistema autônomo o texto do botão e o índice do bitmap que decora o botão.

    // Add a Clear All button to the Edit panel.
    pPanelEdit->Add(new CMFCRibbonButton(ID_EDIT_CLEAR_ALL, _T("Clear All"), 0));
    
  4. Salvar as alterações e, em seguida, compile e execute o aplicativo.Você deve ver o aplicativo Rabisco familiar, mas com uma BAR de Faixa de Opções de Opções na parte superior da janela em vez de uma BAR de menus.A BAR de faixa de opções possui uma categoria, residência, com um painel, edição.

    sistema autônomo botões da faixa de opções que você adicionou estão associados a manipuladores de eventos existente e o em aberto, Fechar, Salvar, Impressão, and desmarcar tudo botões funcionam da mesma forma que anteriormente.

[go to top]

Definir a aparência do aplicativo

A Gerenciador Visual é um objeto global que controla todos os desenhos de um aplicativo.Como esse aplicativo usa o estilo de GUI padrão (Office 2000), o aplicativo procura um bit conservadores.Esta explicação passo a passo usa o Gerenciador visual do Office 2007 para tornar o aplicativo Rabisco se parecem com um aplicativo moderno do Office 2007.

Para conjunto a aparência do aplicativo

  1. No CMainFrame::OnCreate função, digite o código a seguir para alterar o estilo e o gerenciador padrão.

    // Set the default manager to Office 2007 
    CMFCVisualManager::SetDefaultManager(RUNTIME_CLASS(CMFCVisualManagerOffice2007));
    CMFCVisualManagerOffice2007::SetStyle(CMFCVisualManagerOffice2007::Office2007_LunaBlue);
    
  2. Salvar as alterações e, em seguida, compile e execute o aplicativo.A interface de usuário do aplicativo deverá ser semelhante a interface de usuário do Office 2007.

[go to top]

Parabéns!

Você concluiu a parte 1 da explicação passo a passo.Agora vá para Parte 2.

Consulte também

Tarefas

Demonstra Passo a passo: Atualizando o MFC Rabisco aplicativo (parte 2)

Rabisco exemplo: Aplicativo de desenho MDI do MFC

Outros recursos

Explicações passo a passo (@@)