Tworzenie Aplikacji W Stylu Wstążki

Używając standardowych komponentów Delphi TRibbon zauważyłem, że nie są one aż tak genialne.

  • Po pierwsze nie wyglądają tak ładnie jak te Microsoft, na przykład efekty świecenia i kolory w Tribbonie nie wyglądają tak imponująco, jak te używane w Wordpad lub Paint w Windows 7.

  • Po drugie, jeśli chcesz tworzyć interfejsy w stylu wstążki, zauważyłem, że nie ma menu stylu wstążki lub menu popup niezależnie od TRibbon. Na rzeczywista wstążka jest, ale jeśli powiedzmy dla celów ciągłości chcesz menu podręczne w stylu wstążki przypisane do TListbox lub TListView na przykład, nie wydaje się, aby taki był.

  • Po Trzecie, czasami, gdy akcja wstążki jest wyłączona, nadal pokazuje efekt gorącego blasku, jakby unosił się nad akcją, nawet jeśli jest wyłączona.

  • Wreszcie uważam, że bardzo wiernie próbuje umieścić komponenty kontenera, takie jak TCombobox w grupie. Jest to naprawdę niewygodne rozmiar kontroli i pozycji itp.

Myślę, że chodzi mi o to, że używanie standardowych komponentów Delphi TRibbon wydaje się nie być najlepszym podejściem zarówno wizualnie, jak i użytkowo. Jak Mogę sprawić, że aplikacja w stylu wstążki będzie wyglądać i działać tak schludnie, jak te Microsoft, tak jak powiedziałem wcześniej, tak jak WordPad I Paint w Windows 7?

Spójrz na ten zrzut ekranu porównania, aby uzyskać lepszy pomysł:

Tutaj wpisz opis obrazka

Wstążka Delphi wydaje się niekompletna, chyba że spodziewam się też much. Wierzyłem, że komponenty wstążki mają zapewnić Twojej aplikacji lepsze wrażenia dla użytkownika końcowego zarówno wizualnie, jak i lepiej przestrzeni roboczej itp.

Jakie sugestie mógłbyś dać, aby ulepszyć lub sprawić, aby TRibbon działał i wyglądał jak Microsoft?

Nie używam interfejsów w stylu wstążki cały czas, więc zakup komponentów innych firm nie jest czymś, co naprawdę chcę zrobić. Patrząc na te TMS i DevExpress, ale za ich cenę nie wyglądają tak dobrze ani jedno, ani drugie. Te z TMS wyglądają gorzej niż standardowe Delphi TRibbon.

Author: Supuhstar, 2011-06-13

3 answers

Aby uzyskać natywny wygląd, sprawdź wstążkowy Framework Windows dla Delphi .

Jest to open Source wrapper wokół Windows Ribbon Framework dostępne od Windows 7 (i Vista po oficjalnej aktualizacji jest zainstalowany). Jest to API używane przez Windows 7 Word Pad.

Zauważ również, że masz dwa rodzaje układu: Office 2007 i Office 2010. Delphi VCL Ribbon implementuje styl Office 2007, podczas gdy Windows Seven WordPad używa Office 2010 styl.

W niektórych naszych projektach dla niektórych klientów wykorzystaliśmy Komponenty wstążki oprogramowania TMS . Kod jest nieco przewymiarowany (dużo duplikatów lub źle napisanych rzeczy, takich jak trwałość komponentów), ale działa i renderuje dobrze, obsługując zarówno style wstążki 2007, jak i 2010. Dla naszych klientów liczy się rendering. Dla naszego frameworka Open Source, opublikowaliśmy podwójne rozwiązanie do budowania wstążkowego GUI , wygenerowanego z kodu: będzie on używał standardowych komponentów VCL dla podstawowego układu, albo składniki TMS dla pełnego renderowania Office 2007/2010. Właśnie zdefiniowaliśmy niektóre klasy, zaimplementowane przez obie biblioteki. Jeśli używasz składników ogólnych zdefiniowanych w SQLite3ToolBar (tj. klas TSynForm, TSynToolBar, TSynToolButton, TSynPopupMenu, TSynPage, TSynPager, TSynBodyPager i TSynBodyPage) i SynTaskDialog (dla TSynButton) w swoim własnym kodzie, usetmspack conditional wykona całą magię za Ciebie.

Nie używaliśmy jeszcze komponentu wstążki, jak to zostało wprowadzone w Delphi 2009. Jego działanie-driven design nie sprawi, że łatwy w interfejsie ze sterowaną zdarzeniami konstrukcją obsługi interfejsu użytkownika i musimy przyznać, że komponent ten ma raczej złą reputację (przynajmniej w wersji Delphi 2009).

The great Windows Ribbon Framework for Delphi won ' t fit our need of a on-the-fly generated Ribbon from code. Jego projekt, z samej implementacji Microsoftu, polega na stworzeniu interfejsu użytkownika z zasobu XML, połączonego przy kompilacji... więc nie będzie pasował do naszych potrzeb, ale prawdopodobnie będzie pasował do Twoich, na więcej "statyczny" projekt interfejsu aplikacji.

Jeśli używasz wstążki podobnej do pakietu Office w swojej aplikacji, pamiętaj o licencjonowaniu pakietu Office UI.

 15
Author: Arnaud Bouchez,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-03 18:51:07

Pragmatyczną odpowiedzią jest użycie innego zbioru komponentów. Wersja oprogramowania TMS wydaje się dobra , ale używam DevExpress ExpressBars , który działa bardzo dobrze dla mnie.

 7
Author: mj2008,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-13 09:56:11

Używam Windows Ribbon Framework-natywnego komponentu dostarczanego z Windows (7).

Oto bardzo krótki podkład na Wstążce systemu Windows z Delphi; kopiowanie i wklejanie ważnych części kodu, bez większego wyjaśnienia:

procedure TfrmTicketDetail.ShowScenicRibbon;
begin
    try
        Fframework := UIRibbon.CoUIRibbonFramework.Create;
        Fframework.Initialize(Self.Handle, Self); //Give the ribbon the hwnd, and our implementation of uiapplication for callbacks
        OleCheck(Fframework.LoadUI(hInstance, 'APPLICATION_RIBBON'));
    except
        on e:Exception do
        begin
            if DebugHook > 0 then
                raise;
            Exit;
        end;
    end;
end;

Ale zaczyna się robić nieprzyjemnie, ponieważ musisz podążać za API Microsoftu.

{IUIApplication}
function  OnViewChanged(viewId: SYSUINT; typeID: UI_VIEWTYPE; const view: IUnknown;
      verb: UI_VIEWVERB; uReasonCode: SYSINT): HResult; stdcall;
function  OnCreateUICommand(commandId: SYSUINT; typeID: UI_COMMANDTYPE;
      out commandHandler: IUICommandHandler): HResult; stdcall;
function  OnDestroyUICommand(commandId: SYSUINT; typeID: UI_COMMANDTYPE;
      const commandHandler: IUICommandHandler): HResult; stdcall;

A potem trzeba je wdrożyć:

function TfrmTicketDetail.OnViewChanged(viewId: SYSUINT;
     typeID: UI_VIEWTYPE; const view: IUnknown; verb: UI_VIEWVERB;
     uReasonCode: SYSINT): HResult;
var
    cy: integer;
begin
    Result := S_OK;

    //viewID: The ID for the view. Only a value of zero is valid.
    if viewID <> 0 then
       Exit;

    //typeID: The only declared typeID is UI_VIEWTYPE_RIBBON
    if typeID <> UI_VIEWTYPE_RIBBON then
       Exit;

    case verb of //there are only 4 verbs: create, destroy, size, error
    UI_VIEWVERB_CREATE:
        begin
            {   The view was resized.
                In the case of the Ribbon view, the application should call
                GetHeight() to determine the height of the Ribbon.}
            (view as IUIRibbon).GetHeight(cy);
            bvTopSpacer.Height := cy;
        end;
    UI_VIEWVERB_SIZE:
        begin
            {   The view was resized.
                In the case of the Ribbon view, the application should call
                GetHeight() to determine the height of the Ribbon.}
            (view as IUIRibbon).GetHeight(cy);
            bvTopSpacer.Height := cy;
        end;
    UI_VIEWVERB_DESTROY: {nop};
    UI_VIEWVERB_ERROR: {nop};
    end;

    Result := S_OK;
end;

function TfrmTicketDetail.OnCreateUICommand(commandId: SYSUINT;
  typeID: UI_COMMANDTYPE; out commandHandler: IUICommandHandler): HResult;
begin
    commandHandler := Self; //this form will handle all commands on the ribbon;
    Result := S_OK;
end;

function TfrmTicketDetail.OnDestroyUICommand(commandId: SYSUINT; typeID: UI_COMMANDTYPE;
      const commandHandler: IUICommandHandler): HResult;
begin
   Result := E_NOTIMPL;
end;

I wtedy też musisz

  • implementacja IUICommandHandler
  • autor wstążki XML plik
  • skompiluj plik XML wstążki za pomocą kompilatora wstążki
  • Dołącz skompilowaną wstążkę jako zasób:

    {$RESOURCE '..\Resource\UIRibbon\Ribbon_frmTicketDetails.res'}

Oto zrzut wstążki XML, który mam dla mojej aplikacji:

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://schemas.microsoft.com/windows/2009/Ribbon">

    <!-- Commands are like actions, with a name, a numeric ID, caption (LabelTitle), Large and Small images, etc -->
    <Application.Commands>
        <Command Name="cmdNew" Id="0xE100" Symbol="ID_CMD_NEW" LabelTitle="New document" />
        <Command Name="cmdSaveAs" Id="0xE102" Symbol="ID_CMD_SAVEAS" LabelTitle="Save as" />
        <Command Name="cmdOpen" Id="0xE103" Symbol="ID_CMD_OPEN" LabelTitle="Open" />
        <Command Name="cmdExit" Id="0xE104" Symbol="ID_CMD_EXIT" LabelTitle="Exit" />
        <Command Name="cmdUndo" Id="0xE105" Symbol="ID_CMD_UNDO" LabelTitle="Undo" />

        <Command Name="cmdCut" Id="0xE110" Symbol="ID_CMD_CUT" LabelTitle="Cut" />
        <Command Name="cmdCopy" Id="0xE111" Symbol="ID_CMD_COPY" LabelTitle="Copy" />
        <Command Name="cmdPaste" Id="0xE112" Symbol="ID_CMD_PASTE" LabelTitle="Paste" />
        <Command Name="cmdDelete" Id="0xE113" Symbol="ID_CMD_DELETE" LabelTitle="Delete" />
        <Command Name="cmdZoom" Id="0xE114" Symbol="ID_CMD_ZOOM" LabelTitle="Zoom" />

        <Command Name="tabHome" LabelTitle="Home" />

            <Command Name="grpActions" LabelTitle="Actions" />
                <Command Name="cmdSaveAndClose" Id="1101" Symbol="ID_ACTION_SAVEANDCLOSE" LabelTitle="Save and Close">
                    <Command.TooltipTitle>Save and Close (Alt+S)</Command.TooltipTitle>
                    <Command.TooltipDescription>Saves the current ticket and closes the detail screen.</Command.TooltipDescription>
                    <Command.LargeImages>
                        <Image Source="SaveAndClose.bmp" />
                    </Command.LargeImages>
                </Command>
                <Command Name="cmdBack" Id="1102" LabelTitle="Back" />
                <Command Name="cmdControlPanel" Id="1103" LabelTitle="Control Panel" />
                <Command Name="cmdSave" Id="1104" LabelTitle="Save" />

            <Command Name="grpShow" Id="1201" LabelTitle="Show" />
                <Command Name="cmdShowTicket" Id="1202" LabelTitle="Ticket" ></Command>
                <Command Name="cmdShowDiaryEntries" Id="1203" LabelTitle="Diary Entries" >
                    <Command.LargeImages>
                        <Image Source="PencilLog_32x32.bmp" />
                    </Command.LargeImages>
                </Command>
                <Command Name="cmdShowAttachments" Id="1204" LabelTitle="Attachments" />
                <Command Name="cmdShowAuditLog" Id="1205" LabelTitle="Audit Log" />
                <Command Name="cmdShowAdditional" Id="1206" LabelTitle="Additional" />

            <Command Name="grpActivity" LabelTitle="Activity" />
                <Command Name="cmdStartWorking" Id="1301" LabelTitle="Start Working"></Command>
                <Command Name="cmdStopWorking" Id="1302" LabelTitle="Stop Working"></Command>
                <Command Name="cmdPrint" Id="1303" LabelTitle="Print" >
                    <Command.LargeImages>
                        <Image Source="Printer - 256x256.bmp" />
                    </Command.LargeImages>
                    <Command.SmallImages>
                        <Image Source="Printer_16x16.bmp" />
                    </Command.SmallImages>
                </Command>
                <Command Name="cmdDuplicateTicket" Id="1304" LabelTitle="Duplicate Ticket" >
                    <Command.SmallImages>
                        <Image Source="DuplicateTicket16.bmp" />
                    </Command.SmallImages>
                </Command>

            <Command Name="grpTicketStatus" LabelTitle="Ticket Status" />
                <Command Name="cmdCloseTicket" Id="1402" LabelTitle="Close Ticket" />
                <Command Name="cmdOnHold" Id="1403" LabelTitle="On Hold" />
                <Command Name="cmdReadyForInstall" Id="1404" LabelTitle="Ready for install" />
                <Command Name="cmdReopenTicket" Id="1405" LabelTitle="Reopen Ticket" />

    </Application.Commands>

    <!-- Above is all the commands (i.e. Actions). Now we get to the tool on screen (i.e. a DFM) -->
    <Application.Views>
        <Ribbon>

            <!-- Items that appear under the "round button" menu -->
            <Ribbon.ApplicationMenu>
                <ApplicationMenu CommandName="cmdFileMenu">
                    <MenuGroup>
                        <Button CommandName="cmdNew" />
                        <Button CommandName="cmdOpen" />
                        <Button CommandName="cmdSave" />
                        <Button CommandName="cmdSaveAs" />
                    </MenuGroup>
                    <MenuGroup>
                        <Button CommandName="cmdExit" />
                    </MenuGroup>
                </ApplicationMenu>
            </Ribbon.ApplicationMenu>

            <!--What commands to add to the quick access toolbar
                    Right now only Save and Undo, just for fun-->
            <Ribbon.QuickAccessToolbar>
                <QuickAccessToolbar>
                    <QuickAccessToolbar.ApplicationDefaults>
                        <Button CommandName="cmdSave" />
                        <Button CommandName="cmdUndo" />
                    </QuickAccessToolbar.ApplicationDefaults>
                </QuickAccessToolbar>
            </Ribbon.QuickAccessToolbar>

            <!-- And now finally the actual tabs -->
            <Ribbon.Tabs>
                <!--Our one and only tab is "Home" -->
                <Tab CommandName="tabHome">
                    <Tab.ScalingPolicy>
                        <ScalingPolicy>
                            <ScalingPolicy.IdealSizes>
                                <Scale Group="grpActions" Size="Medium"/>
                                <Scale Group="grpShow" Size="Medium"/>
                                <Scale Group="grpActivity" Size="Medium"/>
                                <Scale Group="grpTicketStatus" Size="Medium"/>
                            </ScalingPolicy.IdealSizes>
                            <Scale Group="grpActions" Size="Small"/>
                            <Scale Group="grpShow" Size="Small"/>
                            <Scale Group="grpActivity" Size="Small"/>
                            <Scale Group="grpTicketStatus" Size="Small"/>
                        </ScalingPolicy>
                    </Tab.ScalingPolicy>

                    <!-- Home\Actions -->
                    <Group CommandName="grpActions" SizeDefinition="FourButtons">
                        <Button CommandName="cmdSaveAndClose" />
                        <Button CommandName="cmdBack" />
                        <Button CommandName="cmdControlPanel" />
                        <Button CommandName="cmdSave" />
                    </Group>

                    <!-- Home\Show group -->
                    <Group CommandName="grpShow" SizeDefinition="FiveButtons">
                        <ToggleButton CommandName="cmdShowTicket" />
                        <ToggleButton CommandName="cmdShowDiaryEntries" />
                        <ToggleButton CommandName="cmdShowAttachments" />
                        <ToggleButton CommandName="cmdShowAuditLog" />
                        <ToggleButton CommandName="cmdShowAdditional" />
                    </Group>

                    <!-- Home\Activity group, with a custom sizing definition 
                            so i get my "FourButtons-TwoBigTwoSmall" look -->
                    <Group CommandName="grpActivity" >
                        <SizeDefinition>
                            <ControlNameMap>
                                <ControlNameDefinition Name="button1"/>
                                <ControlNameDefinition Name="button2"/>
                                <ControlNameDefinition Name="button3"/>
                                <ControlNameDefinition Name="button4"/>
                            </ControlNameMap>
                            <GroupSizeDefinition Size="Large">
                                <ControlSizeDefinition ControlName="button1" ImageSize="Large" IsLabelVisible="true" />
                                <ControlSizeDefinition ControlName="button2" ImageSize="Large" IsLabelVisible="true" />
                                <ColumnBreak ShowSeparator="true"/>
                                <ControlSizeDefinition ControlName="button3" ImageSize="Large" IsLabelVisible="true" />
                                <ControlSizeDefinition ControlName="button4" ImageSize="Large" IsLabelVisible="true" />
                            </GroupSizeDefinition>
                            <GroupSizeDefinition Size="Medium">
                                <ControlSizeDefinition ControlName="button1" ImageSize="Large" IsLabelVisible="true" />
                                <ControlSizeDefinition ControlName="button2" ImageSize="Large" IsLabelVisible="true" />
                                <ColumnBreak ShowSeparator="true"/>
                                <Row>
                                    <ControlSizeDefinition ControlName="button3" ImageSize="Small" IsLabelVisible="true" />
                                </Row>
                                <Row>
                                    <ControlSizeDefinition ControlName="button4" ImageSize="Small" IsLabelVisible="true" />
                                </Row>
                            </GroupSizeDefinition>
                            <GroupSizeDefinition Size="Small">
                                <Row>
                                    <ControlSizeDefinition ControlName="button1" ImageSize="Small" IsLabelVisible="true" />
                                    <ControlSizeDefinition ControlName="button3" ImageSize="Small" IsLabelVisible="false" />
                                </Row>
                                <Row>
                                    <ControlSizeDefinition ControlName="button2" ImageSize="Small" IsLabelVisible="true" />
                                    <ControlSizeDefinition ControlName="button4" ImageSize="Small" IsLabelVisible="false" />
                                </Row>
                            </GroupSizeDefinition>
                        </SizeDefinition>

                        <Button CommandName="cmdStartWorking" />
                        <Button CommandName="cmdStopWorking" />
                        <Button CommandName="cmdPrint" />
                        <Button CommandName="cmdDuplicateTicket" />
                    </Group>

                    <!-- Home\Ticket Status group -->
                    <Group CommandName="grpTicketStatus" SizeDefinition="FourButtons">
                        <Button CommandName="cmdCloseTicket" />
                        <Button CommandName="cmdOnHold" />
                        <Button CommandName="cmdReadyForInstall" />
                        <Button CommandName="cmdReopenTicket" />
                    </Group>
                </Tab>
            </Ribbon.Tabs>
            <!-- End of the actual tabs -->

        </Ribbon>
    </Application.Views>
</Application>
 7
Author: Ian Boyd,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-13 11:16:17