BETA
Aby się zalogować, najpiew wybierz portal.
Aby się zarejestrować, najpiew wybierz portal.
Podaj słowa kluczowe
Słowa kluczowe muszą mieć co najmniej 3 sąsiadujące znaki alfanumeryczne
Pole zawiera niedozwolone znaki

Baza wiedzy











Pierwsza aplikacja Silverlight dla Windows 8 (Apps) ze zmianą kafelka

27-10-2011 10:15 | Jacek Matulewski
thumb
Artykuł opisuje przygotowanie prostej aplikacji dla Windows 8, która aktualizuje opis na swoim kafelku

Pierwsza aplikacja Silverlight dla Windows 8 (Apps)

Interfejs

Uruchamiany Visual Studio 11. Z menu File wybieramy New Project.... W oknie New project wybieramy na zakładce szablonów Visual C#, Windows Windows 8 UI Style, Application. W polu Name wpisujemy nazwę "Kolory" i klikamy OK. Po chwili zobaczymy widok projektowania strony głównej aplikacji (rysunek 1). Ustaw powiększene podglądu, które jest widoczne z lewej strony listwy rozdzielającej podgląd strony i jej kod XAML. Rozwińmy i przypnijmy Toolbox, a następnie przeciągnijmy na dodany przed chwilą panel kontrolkę Rectangle, cztery suwaki Slider, pole tekstowe TextBox i przycisk Button. Możemy wstępnie rozmieścić je myszką według wzoru na rysunku 1, ale konieczna będzie również edycja kodu XAML. Ostatecznie powinien on wyglądać tak, jak na listingu 1 (proszę zwrócić na atrybuty Name):

Listing 1. Zawartość kontrolki UserControl w pliku MainPage.xaml
<Grid x:Name="LayoutRoot" Background="Navy">
   <Rectangle Name="Rectangle1" HorizontalAlignment="Stretch"  Height="308" Margin="100,100,100,0" Stroke="Black" VerticalAlignment="Top">
      <Rectangle.Fill>
         <SolidColorBrush Color="#50AAFF"/>
      </Rectangle.Fill>
   </Rectangle>
   <Slider Name="SliderR" HorizontalAlignment="Stretch" Height="16" Margin="100,448,100,0" VerticalAlignment="Top" Maximum="255"/>
   <Slider Name="SliderG" HorizontalAlignment="Stretch" Height="16" Margin="100,478,100,0" VerticalAlignment="Top" Maximum="255"/>
   <Slider Name="SliderB" HorizontalAlignment="Stretch" Height="16" Margin="100,508,100,0" VerticalAlignment="Top" Maximum="255"/>
   <Slider Name="SliderA" HorizontalAlignment="Stretch" Height="16" Margin="100,538,100,0" VerticalAlignment="Top" Maximum="255"/>
   <TextBlock Name="TextBlock1" HorizontalAlignment="Left" Height="100" Margin="100,562,0,0" TextWrapping="Wrap" Text="R=0, G=0, B=0, A=255" FontSize="20" VerticalAlignment="Top" Width="372"/>
   <Button Content="Zamknij" HorizontalAlignment="Right" Height="80" Margin="0,0,100,100" VerticalAlignment="Bottom" Width="255"/>
</Grid> 

Rysunek 1. Projektowanie interfejsu "appsa" w Windows 8


 

Metody zdarzeniowe

Klikamy dwukrotnie przycisk na podglądzie formy. Zostajemy przeniesieni do pliku MainPage.xaml.cs, gdzie do metody Button1_Clickdodajemy polecenie widoczne na listingu 2:

Listing 2. Zamykanie aplikacji
private void Button_Click(object sender, RoutedEventArgs e)
{
   //App.Current.Exit();
   Window.Current.Close();
}
 
 

Metody związane z suwakami stworzymy z poziomu kodu XAML. W tym celu wszystkie znaczniki Slider w kodzie XAML uzupełniamy o atrybut ValueChanged="Sliders_ValueChanged". Następnie w pliku MainPage.xaml.cs wskazujemy przestrzeń nazw zawierającą pędzle: using Windows.UI.Xaml.Media;. Definiujemy dwie metody pomocnicze przygotowujące opisy kolory:

Listing 3. Metody przygotowujące łańcuchy z opisem składowych RGB koloru
private static string SkładoweKoloruDec(Color kolor) { return "R=" + kolor.R.ToString() + ", G=" + kolor.G.ToString() + ", B=" + kolor.B.ToString() + ", A=" + kolor.A.ToString(); } private static string SkładoweKoloruHex(Color kolor) { return "#" + kolor.R.ToString("X") + kolor.G.ToString("X") + kolor.B.ToString("X"); }

 

Wreszcie definiujemy metodę Sliders_ValueChanged:

Listing 4. Metoda reagująca na zmiane pozycji suwaków
private void Sliders_ValueChanged(object sender, RoutedPropertyChangedEventArgs e) { Color kolor = new Color() { R = (byte)SliderR.Value, G = (byte)SliderG.Value, B = (byte)SliderB.Value, A = (byte)SliderA.Value }; (Rectangle1.Fill as SolidColorBrush).Color = kolor; TextBlock1.Text = SkładoweKoloruDec(kolor) + "\n"; TextBlock1.Text += "HEX: " + SkładoweKoloruHex(kolor); }

 

Aby uzgodnić położenie suwaków z kolorem prostokąta do konstruktora klasy MainPagedodajmy następujący kod:

Listing 5. Konstruktor klasy opisującej stronę
public MainPage() { InitializeComponent(); Color kolor = (Rectangle1.Fill as SolidColorBrush).Color; SliderR.Value = kolor.R; SliderG.Value = kolor.G; SliderB.Value = kolor.B; SliderA.Value = kolor.A; }

 

Po uruchomieniu aplikacja powinna wyglądać jak na rysunku 2.

Rysunek 2. Wygląd aplikacji po uruchomieniu


Kafelek

W projekcie znajdziemy plik Package.appxmanifest zawierający ustawienia naszego "Appsa" dotyczące m.in. wyglądu aplikacji na ekranie Start w Windows 8. Kliknijmy go dwukrotnie w podoknie Solution Explorer. Zobaczymy okno ustawień, w którym przypiszmy obraz do pozycji Wide Logo. Obraz musi mieć rozmiar 310x150 pikseli. Najprościej przygotować go za pomocą Painta powiększając jeden z obrazów umieszczonych w podkatalogu Kolory\Kolory\Images. Po tej zmianie, po uruchomieniu aplikacji, jeżeli naciśniemy klawisz Windows i klikniemy na kafelku aplikacji prawym klawiszem myszy, w menu na pasku przy dolnej krawędzi pulpitu (rysunek 3) pojawi się ikona Larger. Klikając ją powiększymy kafelek tak, że będzie zajmował dwa pola.

Rysunek 3. Strona Start systemu Windows 8 z nową aplikacją

Wróćmy do kodu aplikacji. Zdefiniujmy nowe pole klasy typu TileUpdateri dwie metody zmieniające zawartość kafelka. Pierwsza będzie na nim wyświetlać tylko tekst (za to w trzech liniach), druga - obraz z opisem:

Listing 6. Metody zmieniające zawartość kafelka
TileUpdater tu = TileUpdateManager.CreateTileUpdaterForApplication(); public void zmienWygladKafelka(Color kolor) { XmlDocument xml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText01); IXmlNode wezelTekst = xml.GetElementsByTagName("text").First(); wezelTekst.AppendChild(xml.CreateTextNode("Kolory:")); wezelTekst = xml.GetElementsByTagName("text").Item(1); wezelTekst.AppendChild(xml.CreateTextNode(SkładoweKoloruDec(kolor))); wezelTekst = xml.GetElementsByTagName("text").Item(2); wezelTekst.AppendChild(xml.CreateTextNode("HEX: " + SkładoweKoloruHex(kolor))); tu.Update(new TileNotification(xml)); } public void zmienWygladKafelkaZObrazem(Color kolor) { XmlDocument xml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideImageAndText); IXmlNode wezelTekst = xml.GetElementsByTagName("text").First(); wezelTekst.AppendChild(xml.CreateTextNode(SkładoweKoloruDec(kolor))); XmlElement elementObraz = xml.GetElementsByTagName("image").First() as XmlElement; elementObraz.SetAttribute("src", "package://images\\WideLogo.png"); elementObraz.SetAttribute("alt", SkładoweKoloruHex(kolor)); tu.Update(new TileNotification(xml)); }

 

Jedną z metod, proponuję pierwszą, wywołajmy na końcu metody Button1_Click i konstruktora podając jako argument lokalne zmienne kolor. Po uruchomieniu aplikacji naciśnijmy klawisz Windows, aby przywołać okno Start. Zawartość kafelka zmieni się tak, jak na rysunku 4.

Rysunek 4. Nowy wygląd kafelka w oknie Start

Podobne artykuły

Komentarze 1

t0x3e8
t0x3e8
0 pkt.
Nowicjusz
31-10-2011
oceń pozytywnie 1
Ok, wszystko fajnie tylko dlaczego w artykule autor pisze o tworzeniu aplikacji w Silverlight, a tak naprawdę tworzy ją przy użyciu biblioteki WinRT i szablonu Metro Style Apps? Obecność Xaml nie oznacza, że jest to Silverlight czy WPF. pozdrawiam
pkt.

Zaloguj się lub Zarejestruj się aby wykonać tę czynność.