Blog (220)
Komentarze (4k)
Recenzje (1)
@djfoxerPierwszy dodatek do Visual Studio — timer w okienku IDE

Pierwszy dodatek do Visual Studio — timer w okienku IDE

17.03.2017 18:06, aktualizacja: 21.03.2017 22:05

Przyszedł czas na mięsko. W tym wpisie przedstawię sposób na stworzenie wtyczki do Visual Studio, która będzie timerem odliczającym 25 minut w dół (technika Pomodoro ).

Stworzony dodatek będzie pływającym okienkiem, które będzie można przypiąć w dowolne miejsce w ekranie roboczym Visual Studio.

617839

Zaczynamy!

Tworzymy projekt!

Pierwsze kroki zaczynamy od stworzenia nowego projektu VSIX Project. Jest to podstawowy szablon używany przy budowaniu rozszerzeń do Visual Studio.

617843

Na początku dostaniemy pusty projekt z plikiem source.extension.vsixmanifest.

617845

W tym miejscu ustalamy wszelakie opcje odnośnie tworzonej wtyczki. Wybierzemy zatem wersje Visual Studio, na jakie można będzie zainstalować tworzony plugin, wymagane biblioteki w systemie użytkownika czy opis i ikony dodatku.

617847

Teraz dodajmy nowy plik do projektu: Custom Tool Window.

617849

W ten sposób Visual Studio przygotuje gotowe okno, które można będzie dostosować do własnych potrzeb. Dostaniemy kilka plików, które warto omówić.

617851

TimerToolWindowPackage.vsct zawiera opis tego, gdzie w Visual Studio ma się pojawić odnośnik do naszego okna.


      <Button guid="guidTimerToolWindowPackageCmdSet" id="TimerToolWindowCommandId"
        priority="0x0100" type="Button">
        <Parent guid="guidSHLMainMenu" id="IDG_VS_WNDO_OTRWNDWS1"/>
        <Icon guid="guidImages" id="bmpPic1" />
        <Strings>
          <ButtonText>TimerToolWindow</ButtonText>
        </Strings>
      </Button>
    </Buttons>

Powyższy kod umiejscawia przycisk (button) w menu Other Windows (<Parent guid="guidSHLMainMenu" id="IDG_VS_WNDO_OTRWNDWS1"/>).

Elementy do naszego okna są grupowane w paczkę, która zawiera niezbędne klasy odpowiadające za inicjalizację i ustawienie wszelakich opcji. Na tym etapie stworzone przez Visual Studio pliki wystarczą nam w zupełności. Przejdźmy jednak do pliku TimerToolWindowControl.xaml, który jest zwykłym widokiem xaml.

Budujemy okienko narzędziowe

W tym momencie osoby mające styczność z WPFem będą się czuły jak w domu. Tworzymy i oprogramowujemy widok, który będzie zawarty w pływającym oknie.

617858

Widok będzie jak najbardziej prosty jak tylko można. Trzy przyciski i timer odliczający 25 minut w dół. Kiedy zegar dojdzie do końca (00 : 00) tło zmienia kolor na czerwony i tyle. Można będzie rozpocząć odliczanie, zatrzymać i wyczyścić.

Kod nie będzie również specjalnie wymyślny, tak aby był jak najprostszy. DispatcherTimer będzie odpowiadał za odświeżanie timer co 1 sekundę i pokazywanie pozostałego czasu.


        DispatcherTimer disTimer = new DispatcherTimer();
        uint seconds = 0;
        uint maxSeconds = 1500;

        /// <summary>
        /// Initializes a new instance of the <see cref="TimerToolWindowControl"/> class.
        /// </summary>
        public TimerToolWindowControl()
        {
            this.InitializeComponent();
            DataContext = this;
            disTimer.Interval = TimeSpan.FromSeconds(1);
            disTimer.Tick += DisTimer_Tick;
            seconds = maxSeconds;
            BackgroundColor = Brushes.Black;
            SetTimerText();
        }

        private void DisTimer_Tick(object sender, System.EventArgs e)
        {
            if (seconds <= 0)
            {
                disTimer.Stop();
                BackgroundColor = Brushes.Red;
            }
            else
            {
                seconds--;
            }
            SetTimerText();
        }

        private void Button_Click_start(object sender, RoutedEventArgs e)
        {
            disTimer.Start();
            BackgroundColor = Brushes.Black;
        }

        private void Button_Click_stop(object sender, RoutedEventArgs e)
        {
            disTimer.Stop();
        }

        private void Button_Click_clear(object sender, RoutedEventArgs e)
        {
            seconds = maxSeconds;
            SetTimerText();
            disTimer.Stop();
            BackgroundColor = Brushes.Black;
        }

        private void SetTimerText()
        {
            SecondsText = ((seconds - (seconds % 60)) / 60).ToString("D2") + " : " + (seconds % 60).ToString("D2");
        }

Sprawdźmy naszą wtyczkę w działaniu

Przyszedł czas na debugowanie. Odpalamy projekt, który otworzy specjalną instancję Visual Studio. Wybieramy z menu View, Other Windows i nasze utworzone okno TimerToolWindow.

617864

Otwarte okienko można umieścić w dowolnym miejscu IDE. Jak przypiąłem ją na dole, pod Solution Explorerem.

617866
617867

Podstawowe rzeczy jakie możemy stworzyć do wtyczki nie są skomplikowane. Na Githubie od Microsoftu znajdziemy wiele przykładowych gotowych pluginów, które idealnie nadadzą się do rozpoczęcia prac nad własnymi dodatkami do Visual Studio. Warto przejrzeć kod i podpatrzeć jak pewne rzeczy można wykonać. Oczywiście im dalej w las tym ciemniej. Bardziej customowe rzeczy i większe funkcjonalności wymagają już szerszej wiedzy. W kolejnych przykładach będą kolejne elementy, które przydadzą się do stworzenia finalnej wtyczki Healthy with Visual Studio na konkurs.

Źródła dostępne są na GitHubie (branch master i POC): https://github.com/djfoxer/healthyWithVS/
617870
Wybrane dla Ciebie
Komentarze (3)