יצירת עיצוב כללי לפרויקט/לפקדים

יצירת עיצוב כללי לפרויקט - לכל העמודים

לחיצה ימנית על שם הפרויקט - הוספה:

New item → Resource Dictionary

ניצור תגית עיצוב לכל סוג פקד שנרצה לעצב, כך:

<Style TargetType="Button">
    ...
</Style>

כל תכונה שנרצה להוסיף לפקד, נוסיף באמצעות תגית:

<Setter Property="Background" Value="#FFD1DC"/>

Property - שם התכונה. Value - ערך התכונה.

דוגמה לעיצוב כפתור

לדוגמה, עיצוב מלא לכפתור ורוד עם קצוות מעוגלים וגודל ממוצע:

<Style TargetType="Button">
    <Setter Property="Background" Value="#FFD1DC"/>
    <Setter Property="Foreground" Value="#555555"/>
    <Setter Property="Padding" Value="15,8"/>
    <Setter Property="MinHeight" Value="35"/>
    <Setter Property="MinWidth" Value="80"/>
    <Setter Property="MaxHeight" Value="35"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="{TemplateBinding Background}"
                        CornerRadius="15">
                    <ContentPresenter HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      Margin="{TemplateBinding Padding}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

התכונות שבדוגמה: צבע רקע, צבע כתב, רווח פנימי, גובה מינימלי, רוחב מינימלי, גובה מקסימלי ומסגרת עגולה.

רישום קובץ העיצוב בפרויקט

כדי שקובץ העיצוב שיצרת יוכר בכל הפרויקט, יש לרשום אותו בקובץ הראשי App.xaml בתוך Application.Resources.

כך (Style.xaml הוא שם עמוד העיצוב):

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Style.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

אם נרצה שלא כל הפקדים מאותו סוג ברחבי הפרויקט יקבלו את אותו עיצוב, נוכל להוסיף "מזהה" לעיצוב שיצרנו, ולתת אותו רק לפקדים הרצויים.

עיצוב לפקד TextBox

בדוגמה, TextBox הוא שם הפקד ו־SimpleTextBox הוא המזהה הייחודי:

<Style x:Key="SimpleTextBox" TargetType="TextBox">
    <Setter Property="Background" Value="White"/>
    <Setter Property="BorderBrush" Value="#D1D1D1"/>
    <Setter Property="Padding" Value="5"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TextBox">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="1"
                        CornerRadius="5">
                    <ScrollViewer x:Name="PART_ContentHost" Margin="2"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

כעת לא יקבלו את העיצוב כל הפקדים בפרויקט מסוג זה, אלא רק אלו אשר "נחבר" להם את העיצוב באמצעות ה־key.

לדוגמה:

<TextBox Style="{StaticResource SimpleTextBox}"
         Width="200"
         Height="35"
         Text="הקלד כאן..."/>

שילוב הפקדים בחלון

ניצור חלון עם כפתורים ופקד קלט. העיצוב יתקבל אוטומטית מקובצי העיצוב שיצרתי:

<Grid>
    <StackPanel Orientation="Horizontal">
        <Button Content="Go to Sign In" Click="GoToSignin_Click" Margin="10"/>
        <Button Content="Go to Sign In" Click="GoToSignin_Click" Margin="10"/>
        <TextBox Style="{StaticResource SimpleTextBox}"
                 Width="200"
                 Height="35"
                 Text="הקלד כאן..."/>
    </StackPanel>
</Grid>