Tuesday, March 26, 2013

How do I change a control's style during run time?

Now this one actually took me a while to figure out. You can create Styles in XAML much like you can create a CSS class (see earlier post). Then you assign the control's Style property to a different Style by referring to its name. See below:

Simple Comparison 

HTML:

.MyButtonStyle {
    width: 250px;
    background-color: black;
    color: goldenrod;
}

In code-behind:
btnMyButton.CssClass = "MyButtonStyle";

XAML:

<Style x:Name="MyButtonStyle" TargetType="Button">
    <Setter Property="Width" Value="250" />
    <Setter Property="Background" Value="Black" />
    <Setter Property="Foreground" Value="Goldenrod" />
</Style>

In code-behind:
btnMyButton.Style = Resources["MyButtonStyle"] as Style;

Now you might have thought, "But why not just directly assign the style by name?" Like this:

btnSetStyle.Style = MyButtonStyle;

I'm not sure why this doesn't work. It compiles and runs just fine but the style of the button will NOT change. I'm not advanced enough to understand why one method works and the other doesn't. If you know feel free to add a comment. :)



Wednesday, March 20, 2013

How do I create styles like those in a CSS file?

There's a Style element you can use to hold styles. They have to target a control type to work.

Simple Comparison 

HTML:

.MyButtonStyle {
    width: 250px;
    background-color: black;
    color: goldenrod;
}
In use:
<asp:Button Text="Hello" runat="server" CssClass="MyButtonStyle" /> 

XAML:

<Style x:Name="MyButtonStyle" TargetType="Button">
    <Setter Property="Width" Value="250" />
    <Setter Property="Background" Value="Black" />
    <Setter Property="Foreground" Value="Goldenrod" />
</Style>
In use:
<Button Content="Hello" Style="{StaticResource MyButtonStyle}" />

Tuesday, March 19, 2013

What do I use for a label element?

Your XAML equivalent is the TextBlock element.

Simple Comparison 

HTML:

<asp:Label Text="Hello" runat="server" />

XAML:

<TextBlock Text="Hello" />

Where is my table element?

The closest you're going to get to the table element is the Grid panel.

Simple Comparison 

HTML:

<table>
    <tr>
        <td>Stuff</td>
    </tr>
</table>

XAML:

<Grid>
    <TextBlock Text="Stuff"></TextBlock>
</Grid>

By default the XAML Grid has one row and one column. You can actually add more objects inside the grid but they will all be overlapping.

More Complex Comparison 

HTML:

<table>
    <tr>
        <td>Stuff in row 1</td>
    </tr>
    <tr>
        <td>Stuff in row 2</td>
    </tr>

</table>

XAML:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" Text="Stuff in row 1"></TextBlock>
    <TextBlock Grid.Row="1" Text="Stuff in row 2"></TextBlock>
</Grid>

Sunday, March 17, 2013

Where's my Page_Load event?

The event OnNavigatedTo is probably the closest to your Page_Load event.

It occurs when the page is about to be displayed in a Frame.

What's a Page?

As a web developer this will be easy for you to understand. Each "window" in your application is actually called a "page" (like a web page) and is based on an object called Page.

What's a Frame?

Think of a Frame like a web browser window. You navigate the web inside a browser. In your Windows store app, you navigate your application through the Frame with the Frame.Navigate method.

Simple Comparison

Website

With web development, when you launch your website a web browser is opened and your default page is navigated to.

Windows Store App

With your Windows Store app, when you launch our application a Frame is created and your default page is navigated to.