Task Bar Hide/Show when mouse over like Accordion panel in Examples -Desktop control

  1. #1

    Task Bar Hide/Show when mouse over like Accordion panel in Examples -Desktop control

    Hi Sir,

    I have a requirement related to the taskbar in desktop control.

    Is it possible to Hide/show Taskbar(Includes startmenu and part of other controls) like as we show accordion panel in right side of the desktop control(Ex.net Examples)

    Attached screen shot and I'm expecting same behavior to the task bar in desktop control. If possible

    Thank you,
    Vamsi.
    Attached Thumbnails Click image for larger version. 

Name:	ShowHide.jpg 
Views:	8 
Size:	91.4 KB 
ID:	25428  
  2. #2
    Can you demonstrate what you have tried so far?
    Geoffrey McGill
    Founder & CEO
  3. #3
    Hi sir,

    I have not tried in my application and I have done some changes in ext.Net examples application itself. Added MessageBusListeners and MouseDistanceSensor same as accordion panel.

    <%@ Page Language="C#" %>
    
    <%@ Register Src="modules/AccordionWindow.ascx" TagPrefix="mod" TagName="AccordionWindow" %>
    <%@ Register Src="modules/GridWindow.ascx" TagPrefix="mod" TagName="GridWindow" %>
    <%@ Register Src="modules/SystemStatus.ascx" TagPrefix="mod" TagName="SystemStatus" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                // dynamic module loading via DesktopModuleProxy
                this.LoadControl("modules/WhatsNew.ascx");
    
                // Fixes some theme-specific settings
                var curTheme = Ext.Net.ResourceManager.GetInstance(HttpContext.Current);
    
                switch (curTheme.Theme)
                {
                    case Ext.Net.Theme.Triton:
                        // For this one the value specified in markup is good.
                        break;
                    case Ext.Net.Theme.Classic:
                    case Ext.Net.Theme.Gray:
                        Desktop1.TaskBar.QuickStartWidth = 50;
                        //.TaskBar.TrayWidth = 90;
                        break;
                    case Ext.Net.Theme.CrispTouch:
                    case Ext.Net.Theme.NeptuneTouch:
                        Desktop1.TaskBar.QuickStartWidth = 84;
                        // Desktop1.TaskBar.TrayWidth = 127;
                        break;
                    case Ext.Net.Theme.Crisp:
                    case Ext.Net.Theme.Neptune:
                        Desktop1.TaskBar.QuickStartWidth = 64;
                        //  Desktop1.TaskBar.TrayWidth = 114;
                        break;
                    case Ext.Net.Theme.Aria:
                        Desktop1.TaskBar.QuickStartWidth = 64;
                        // Desktop1.TaskBar.TrayWidth = 119;
                        break;
                    case Ext.Net.Theme.Graphite:
                        CustomToolbar.Defaults.Add(new Ext.Net.Parameter("width", "145", ParameterMode.Raw));
                        CustomToolbar.Width = 725;
                        Desktop1.StartMenu.Width = 350;
                        Desktop1.TaskBar.QuickStartWidth = 112;
                        // Desktop1.TaskBar.TrayWidth = 174;
                        GreetingWindow.Width = 260;
                        GreetingWindow.Height = 110;
                        StartMenuToolbar.Width = 150;
                        break;
                    case Ext.Net.Theme.Material:
                        CustomToolbar.Defaults.Add(new Ext.Net.Parameter("width", "135", ParameterMode.Raw));
                        CustomToolbar.Width = 725;
                        Desktop1.StartMenu.Width = 310;
                        Desktop1.TaskBar.QuickStartWidth = 112;
                        // Desktop1.TaskBar.TrayWidth = 183;
                        GreetingWindow.Width = 200;
                        GreetingWindow.Height = 110;
                        StartMenuToolbar.Width = 130;
                        break;
                }
            }
        }
    
        protected void Logout_Click(object sender, DirectEventArgs e)
        {
            // Logout from Authenticated Session
            this.Response.Redirect("Default.aspx");
        }
    
        [DirectMethod(ShowMask = true)]
        public void CreateWindow()
        {
            Desktop.GetInstance().CreateWindow(new Window
            {
                Title = "New window",
                Width = 300,
                Height = 300,
                CloseAction = CloseAction.Destroy,
                Html = "The window is created"
            });
        }
    
        [DirectMethod(ShowMask = true)]
        public void AddNewModule()
        {
            Desktop.GetInstance().RemoveModule("add-module");
            DesktopModuleProxy control = Ext.Net.Utilities.ControlUtils.FindControl<Ext.Net.DesktopModuleProxy>(this.LoadControl("modules/TabWindow.ascx"));
            control.RegisterModule();
        }
    
        [DirectMethod(ShowMask = true)]
        public void AddAnotherModule()
        {
            Desktop.GetInstance().RemoveModule("add1-module");
            DesktopModule m = new DesktopModule
            {
                ModuleID = "dyn-mod",
                Shortcut = new DesktopShortcut
                {
                    Name = "Dynamic Module"
                },
    
                Launcher = new Ext.Net.MenuItem
                {
                    Text = "Dynamic module"
                },
    
                Window =
                {
                    new Window
                    {
                        Title = "Dynamic Window",
                        Width = 300,
                        Height = 300,
                        DefaultRenderTo = Ext.Net.DefaultRenderTo.Form,
                        Icon = Icon.ApplicationAdd
                    }
                },
    
                AutoRun = true
            };
    
            Desktop1.AddModule(m);
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET Examples</title>
    
        <link href="resources/desktop.css" rel="stylesheet" />
    
        <script>
            var tile = function () {
                Ext.net.Desktop.desktop.tileWindows();
            };
    
            var cascade = function () {
                Ext.net.Desktop.desktop.cascadeWindows();
            };
    
            var initSlidePanel = function () {
                this.setHeight(Ext.net.Desktop.desktop.body.getHeight());
    
                if (!this.windowListen) {
                    this.windowListen = true;
                    this.show();
    
                    this.el.alignTo(Ext.net.Desktop.desktop.body, 'tl-tr', [0, 0]);
                    Ext.on("resize", initSlidePanel, this);
                }
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server">
            <%-- <Listeners>
                    <WindowResize Handler="Ext.net.Bus.publish('App.Desktop.ready');" Buffer="500" />
                </Listeners>--%>
        </ext:ResourceManager>
    
        <ext:Desktop ID="Desktop1" runat="server">
            <Modules>
                <ext:DesktopModule ModuleID="Hello">
                    <Shortcut Name="Test" IconCls="x-notepad-shortcut" SortIndex="1" />
                    <Window>
                        <ext:Window runat="server"
                            ID="GreetingWindow"
                            Plain="true"
                            Padding="10"
                            Width="150"
                            Height="100"
                            Title="Greeting"
                            Maximizable="false"
                            Minimizable="false">
                            <Content>
                                Welcome to Ext.Net desktop!
                               
                            </Content>
                        </ext:Window>
                    </Window>
                </ext:DesktopModule>
    
                <ext:DesktopModule ModuleID="notepad">
                    <Shortcut Name="Notepad" IconCls="x-notepad-shortcut" SortIndex="2" />
                    <%-- <Launcher Text="Notepad" Icon="ApplicationForm" />--%>
                    <Window>
                        <ext:Window runat="server"
                            Title="Notepad"
                            Width="750"
                            Height="400"
                            Icon="ApplicationForm"
                            AnimCollapse="false"
                            Border="false"
                            HideMode="Offsets"
                            Header="false"
                            Layout="FitLayout"
                            CloseAction="Destroy">
                            <Items>
                                <ext:HtmlEditor
                                    runat="server"
                                    Text="Some <b>rich</b> <font color='red'>text</font> goes <u>here</u><br>Give it a try!" />
                            </Items>
                        </ext:Window>
                    </Window>
                </ext:DesktopModule>
    
                <ext:DesktopModule ModuleID="create-module">
                    <Shortcut Name="Create window" Handler="function () {#{DirectMethods}.CreateWindow();}" SortIndex="3">
                    </Shortcut>
                </ext:DesktopModule>
    
                <ext:DesktopModule ModuleID="add-module">
                    <Shortcut Name="Render dynamic module" Handler="function () {#{DirectMethods}.AddNewModule();}" X="200" Y="100" TextCls="x-long-label">
                    </Shortcut>
                </ext:DesktopModule>
    
                <ext:DesktopModule ModuleID="add1-module">
                    <Shortcut Name="Render another module" Handler="function () {#{DirectMethods}.AddAnotherModule();}" X="200" Y="300" TextCls="x-long-label">
                    </Shortcut>
                </ext:DesktopModule>
            </Modules>
    
            <DesktopConfig Wallpaper="resources/wallpapers/desk.jpg" ShortcutDragSelector="true">
    
                <%-- <ShortcutDefaults IconCls="x-default-shortcut" />--%>
                <%-- <ContextMenu>
                        <ext:Menu runat="server">
                            <Items>
                                <ext:MenuItem runat="server" Text="Change Settings" />
                                <ext:MenuSeparator runat="server" />
                                <ext:MenuItem runat="server" Text="Tile" Handler="tile" Icon="ApplicationTileVertical" />
                                <ext:MenuItem runat="server" Text="Cascade" Handler="cascade" Icon="ApplicationCascade" />
                            </Items>
                        </ext:Menu>
                    </ContextMenu>--%>
    
                <Content>
    
                    <ext:Image runat="server" ImageUrl="resources/logo.png" StyleSpec="position:absolute;top: 50%;left: 50%;width: 77px; height: 78px;margin-top: -39px; margin-left: -39px;" />
                    <%--  <ext:Image runat="server" ImageUrl="resources/powered.png" StyleSpec="position:absolute;right:10px;bottom:20px;width:300px;height:39px;"/>
                       <ext:DisplayField runat="server" Text="You can place controls to desktop" FieldStyle="color:white;font-size:24px;" StyleSpec="position:absolute;left: 50%; bottom: 100px;margin-left: -180px;"/>
                       <ext:DisplayField runat="server" Text="Move mouse to the right edge -->" FieldStyle="color:white;font-size:24px;" StyleSpec="position:absolute;right:50px;top:50px;"/>--%>
    
                    <ext:Toolbar ID="CustomToolbar" runat="server" Width="545" Floating="true" ClassicButtonStyle="true" Flat="true" Border="false" Shadow="false">
                        <Defaults>
                            <ext:Parameter Name="IconAlign" Value="top" />
                            <ext:Parameter Name="Width" Value="105" />
                            <ext:Parameter Name="Icon" Value="Application" />
                            <ext:Parameter Name="Scale" Value="large" />
                            <ext:Parameter Name="Handler" Value="function () {Ext.Msg.alert('Launch', this.text);}" Mode="Raw" />
                        </Defaults>
                        <Items>
                            <ext:Button runat="server" Text="Word" />
                            <ext:Button runat="server" Text="Excel" />
                            <ext:Button runat="server" Text="Notepad" />
                            <ext:Button runat="server" Text="Paint" />
                            <ext:Button runat="server" Text="Explorer" />
                        </Items>
                        <MessageBusListeners>
                            <ext:MessageBusListener Name="App.Desktop.ready" Handler="this.el.anchorTo(Ext.net.Desktop.desktop.body, 'c-b', [0, -50]);" />
                        </MessageBusListeners>
                    </ext:Toolbar>
                </Content>
            </DesktopConfig>
    
            <StartMenu Title="Ext.Net Desktop" Icon="Application" Height="300">
                <ToolConfig>
                    <ext:Toolbar ID="StartMenuToolbar" runat="server" Width="100">
                        <Items>
                            <ext:Button runat="server" Text="Settings" Icon="Cog" />
                            <ext:Button runat="server" Text="Logout" Icon="Key">
                                <DirectEvents>
                                    <Click OnEvent="Logout_Click">
                                        <EventMask ShowMask="true" Msg="Good Bye..." MinDelay="1000" />
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </ToolConfig>
            </StartMenu>
    
            <TaskBar QuickStartWidth="130" TrayWidth="125">
    
                <MessageBusListeners>
                    <ext:MessageBusListener Name="App.Desktop.ready" Fn="initSlidePanel" />
                </MessageBusListeners>
                <Plugins>
                    <ext:MouseDistanceSensor runat="server" Opacity="false" Threshold="25">
                        <Listeners>
                            <Near Handler="this.component.el.alignTo(Ext.net.Desktop.desktop.body, 'c-b', [0, -50], true);" />
                            <Far Handler="this.component.el.alignTo(Ext.net.Desktop.desktop.body, 'c-b', [0, -50], true);" />
                        </Listeners>
                    </ext:MouseDistanceSensor>
                </Plugins>
                <QuickStart>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button runat="server" Handler="tile" Icon="ApplicationTileVertical" OverflowText="Tile windows">
                                <QTipCfg Text="Tile windows" />
                            </ext:Button>
    
                            <ext:Button runat="server" Handler="cascade" Icon="ApplicationCascade" OverflowText="Cascade windows">
                                <QTipCfg Text="Cascade windows" />
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </QuickStart>
    
    
                <Tray>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button ID="LangButton" runat="server" Text="EN" Cls="x-bold-text" MenuAlign="br-tr" ArrowVisible="false">
                                <Menu>
                                    <ext:Menu runat="server">
                                        <Items>
                                            <ext:CheckMenuItem runat="server" Group="lang" Text="English" Checked="true" CheckHandler="function (item, checked) {checked && #{LangButton}.setText('EN');}" />
                                            <ext:CheckMenuItem runat="server" Group="lang" Text="French" CheckHandler="function (item, checked) {checked && #{LangButton}.setText('FR');}" />
                                            <ext:MenuSeparator runat="server" />
                                            <ext:MenuItem runat="server" Text="Show the Language Bar" />
                                        </Items>
                                    </ext:Menu>
                                </Menu>
                            </ext:Button>
                            <ext:ToolbarFill runat="server" />
                        </Items>
                    </ext:Toolbar>
                </Tray>
            </TaskBar>
            <Listeners>
                <Ready BroadcastOnBus="App.Desktop.ready" />
            </Listeners>
        </ext:Desktop>
    
        <ext:Panel runat="server" Title="Slide panel" Frame="true" Width="250" Layout="AccordionLayout" Floating="true" Shadow="false" Hidden="true">
            <Items>
                <ext:Panel runat="server" Title="Section 1" Icon="User" />
                <ext:Panel runat="server" Title="Section 2" Icon="UserB" />
                <ext:Panel runat="server" Title="Section 3" Icon="UserB" />
                <ext:Panel runat="server" Title="Section 4" Icon="UserB" />
                <ext:Panel runat="server" Title="Section 5" Icon="UserB" />
            </Items>
            <%-- <MessageBusListeners>
                    <ext:MessageBusListener Name="App.Desktop.ready" Fn="initSlidePanel" />
                </MessageBusListeners>
                <Plugins>
                    <ext:MouseDistanceSensor runat="server" Opacity="false" Threshold="25">
                        <Listeners>
                            <Near Handler="this.component.el.alignTo(Ext.net.Desktop.desktop.body, 'tr-tr', [0, 0], true);" />
                            <Far Handler="this.component.el.alignTo(Ext.net.Desktop.desktop.body, 'tl-tr', [0, 0], true);" />
                        </Listeners>
                    </ext:MouseDistanceSensor>
                </Plugins>--%>
        </ext:Panel>
    
        <%--Modules from User controls--%>
        <mod:AccordionWindow runat="server" />
        <mod:GridWindow runat="server" />
        <mod:SystemStatus runat="server" />
    </body>
    </html>
  4. #4
    The sample you provided throws an exception.

    Can you remove all the code from the sample you provided that is not directly related to the scenario? Pasting in a giant wall of code is not helpful.
  5. #5
    Hello Sir,

    I'm asking is there any option to show/hide task bar?Is it possible? How you guys are hiding in Accordion panel (desktop control)

    Thank you,
    Vamsi.
  6. #6
    Maybe Desktop1.TaskBar.Hide()?
    Geoffrey McGill
    Founder & CEO

Similar Threads

  1. Replies: 3
    Last Post: Jan 16, 2020, 9:14 PM
  2. Replies: 2
    Last Post: Mar 08, 2013, 7:32 AM
  3. [CLOSED] Creating Desktop Window dynamicly - Task bar Minimizing
    By inteligencija in forum 2.x Legacy Premium Help
    Replies: 10
    Last Post: Nov 20, 2012, 12:42 PM
  4. [CLOSED] Desktop Task bar options
    By schellappa in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 03, 2011, 5:40 PM
  5. [CLOSED] Issue with Tree Grid and Desktop task bar
    By ducnt in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 29, 2010, 9:07 AM

Posting Permissions