Expression Blend 4 - Školení Gopas - den 1.

Rozložení panelů programu Blend 4
Menu

• File / New Project - založení nového projektu
• Tools / Options - nastavení prostředí a zkratek
• Windows / Workspace - přepínání klávesou F6. Možnost vytvořit si vlastní pracovní prostor a uložit si ho.

Levá strana

• Projects - (Solution Explorer)
• Assets - prostředky controls (ToolBox)
• Triggers
• States - prohlížení visual states
• Objects & Timeline - visuální strom (něco jako DOM)

Pravá strana

• Propertyes - Vlastnosti, události (atributy), které je možné filtrovat.
• Resources -
• Data a Data Context - umožňuje bindování pomocí Drag & Drop

Hlavní panel

• F4 - skryje všechny panely
• V - operace výběr prvku
• H - operace přesunutí plátna
• Scrool - Zoomování

Pohledy

• Design - pouze návrh
• XAML - pouze XAML kód
• Split - obojí
• Přepínání pomocí klávesy F11

Odlišnosti oprosti Visual Studia
Zoom pomocí Ctrl + Scrool
Tools / Options | Workspace - Theme = Expression light
Světlé téma
Tools / Options | Artboard - Mouse wheel = Ctrl + mouse wheel

Návrh UI
Přes shevron vlevo dole se rozbalí seznam Controlů kde je mořné vyhledávat podle názvu. Tlačítko pod shevronem umožňuje vložit posledně použitý control.

Styly
Styl mění již existující vlastnosti
Definujeme je v Resources. Mají platnost do hloubky od s vojí definice.
Pojmenovaný a implicitní styl
Pojmenovaný styl musím připojit ke controlu přes Style = {StaticResource ...}
implicitní styl se připojí ke všem elementům se stejným TargetTypem

Šablony (Templates)
Šablona mění implicitní styl prvku. Mění to jak prvek vypadá např. tlačítko je obdelník.
<Button Click="Button_Click"  >
    <Button.Content>
     <TextBlock>Naše tlačítko</TextBlock>
    </Button.Content>
    <Button.Template>
     <ControlTemplate TargetType="Button">
      <Grid>
       <Ellipse Width="120" Height="20" Fill="LightBlue" StrokeThickness="3"></Ellipse>
       <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
      </Grid>  
     </ControlTemplate>
    </Button.Template>
   </Button>

Pro seznamy
<StackPanel IsItemHost = "True" > 
</StackPanel>

Na zvoleném prvku vyvolám kontextovou nabídku a tam zvolím EditTemplate / EditCurrent
Toto mi umožní editovat pouze šablonu zvoleného prvku.
Klávesová zkratka G přepne do editace gradientu štětce.

Vytvoření kope výchozí šablony elementu
EditTemplate / Edit a Copy

Editace šablony položky ListBoxu
EditAditionallTemplate / Edit ... ItemTemplate / EditCurrent

Vytvoření ukázkových dat
V pravém panelu záložka Data kliknout na tlačítko [CreateSampleData] (tři elipsy a +)
[NewSampleData]

Databinding DataContext