My Master's Thesis Problems and solutions encountered…

11Apr/101

Grid Controls – Rows with Variable Height

When making the layout for your application you will most often use Grid Controls and/or WrapPanels. I needed a layout to be a single box that was always centered vertically and had a variable sized height, depending on the amount of text inside the box.

Initially, you need to define the basic grid layout. Open your new Silverlight project, and select the MainPage.xaml. It probably looks something like this (depending on your Visual Studio version):


<UserControl x:Class="Test.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">

  </Grid>
</UserControl>

You will need to add some measurements to the Grid definition, so it says:


<Grid x:Name="LayoutRoot" Background="White" Width="Auto" Height="Auto" ShowGridLines="True">

This only sets the color of the background and makes sure the size of the grid changes with the size of the window. Also, the ShowGridlines makes sure you can see the changes you will make next. When you are finished, you can set it to false.

With the grid control we create a 3 x 3 grid, and we need to specify the number and width/height of the columns and the rows. This is done in the Grid.RowDefinitions and Grid.ColumnDefinitions::

<UserControl x:Class="QM_v1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008">
  <!--Background layout-->
   <Grid x:Name="LayoutRoot" Background="White" Width="Auto" Height="auto" ShowGridLines="True">

       <!--We define the grid, ie. number of rows and number of columns-->
        <Grid.RowDefinitions>
            <RowDefinition Height="130"></RowDefinition>
            <RowDefinition Height="200"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="500"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>

    </Grid>
</UserControl>

As it can be seen, we have defined three columns, where only the middle as a fixed size. The first and third column will just occupy the space left in the window. The first two rows have initially a fixed height, while the last just occupies the remaining. If you run your program, it will look something like this:

The cell in the middle is where we will place our text (and eventually the whole application). You are maybe asking yourself why we defined a fixed height to the second row, when want it to be variable... This was just to show you how the grid works, and in the following, we set the second row height to auto. But we need to insert some text into this cell, otherwise the cell height i set to 0, and can therefore not be seen.

Changes to be noted in the code below:

  • RowDefinition Height has been changed for the second row, so it's now set to auto.
  • We have added a border that defines where the textblock is to be placed ( Grid.Column="1" & Grid.Row="1">), and a StackPanel, that defines the margin.
  • The new textblock inserts the texts, and its TextWrapping = "Wrap" ensures that the text is wrapped by the border.

<UserControl x:Class="QM_v1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008">
  <!--Background layout-->
   <Grid x:Name="LayoutRoot" Background="White" Width="Auto" Height="auto" ShowGridLines="true">

       <!--We define the grid, ie. number of rows and number of columns-->
        <Grid.RowDefinitions>
            <RowDefinition Height="130"></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="500"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>


<!--the border-->
        <Border BorderThickness="2"
                    BorderBrush="#D1CACA"
                    Margin="10"
                    CornerRadius="10"
                    Background="#E8E8E8"
                    Grid.Column="1"
                    Grid.Row="1">
            <!--The text-->
            <StackPanel Margin="10">
                <TextBlock Text="The height of this row depends on the amount of text to be wrapped. Make sure you have your middle row set to 'auto' and the TextWrapping set to 'Wrap'."
                           Margin="5"
                           TextWrapping="Wrap"
                 /><!--Important to wrap the text!-->
            </StackPanel>
        </Border>
    </Grid>
</UserControl>

If you run this code, you'll see something like this:

Grid, variable row size

As said before, you can just set the ShowGridlines to false when you are finished.

So, by using the code above you have created a grid, where the middle cells has fixed width, but the height depends on the amount of text you have inserted into the Textblock.

Filed under: Silverlight, XAML 1 Comment
8Apr/103

How to insert XAML code into WordPress

Initially, I had difficulties inserting XAML into the WordPress blog, as the characters < and > are used in XAML, which conflicted with the WordPress HTML. As the XAML code didn't show properly, I went looking for plugins to use, and found what I was looking for:

With the SyntaxHighlighter Evolved you can insert code into WordPress that looks like this:


(...)

<ScrollViewer VerticalScrollBarVisibility ="Auto">
    <Grid x:Name="LayoutRoot" Background="#00000000" Width="Auto" Height="Auto">
  <!--Comment-->

            <Grid.RowDefinitions>
            <RowDefinition Height="130"></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
(...)

All you need to do is the following:

  1. Go to this page and download the WordPress plugin
  2. Open an FTP program and access your website's server
  3. Copy and paste the plugin-folder to the wp-content/plugins folder
  4. Go to your WordPress admin page and click on Plugins in the administration panel
  5. Activate your SyntaxHighlighter plugin

That's it!

On your post, you need to insert the following code snippet:

[-sourcecode language="XML"]
... your code ...
[-/sourcecode]

OBS!! You need to remove the two "-". I had to put them there, so the code wouldn't be interpreted.

The SyntaxHighlighter supports many laguages, including Java, Perl, C# (csharp), Python, Ruby, Scala, SQL, VB... and XML. Not XAML, but close enough. Just replace language = XML above with for example language = java or language = csharp.

On this page you can read more about posting source code in WordPress. There are many extensions. For example:

  • Disable the URLs in your posted code: Insert autolinks = false
  • Collapse the code box when the page loads, requiring the visitor to click to expand it. Insert collapse= true
  • Remove the line numbering. Insert gutter = false.
  • Highlight specific lines of code. Insert highlight = "11, 12" if you want lines 11 and 12 to be highlighted.
  • When posting only one or two lines of code, you can simplify the code highlighting. Insert light = true.

The code snippet below has been made by writing [-sourcecode language="XML" autolinks="false" collapse="true" highlight="3,4"] (again, without the first "-").

   <UserControl x:Class="Smuk.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
  >  <ScrollViewer VerticalScrollBarVisibility ="Auto">

Enjoy!

Filed under: Wordpress 3 Comments
4Apr/100

Beautiful LaTeX table

The trouble with writing your Thesis in LaTex is that it's someties difficult to make things beautiful, because it's so relatively hard to change formats, colors and such. Making a table can also be a bit time-consuming, but it's really not _that_ difficult.

I needed a table for my chapter on Requirements, and I wanted something special: I wanted that every second row was a different color and that the top and bottom line where thicker that the others. Below you can see a picture of the table:

Beautiful LaTeX table

First, you have to add the following code in your Preamble.tex:

 \usepackage[table]{xcolor}

The code for the table is as follows:


\begin{center}
\rowcolors{1}{white}{gray}
\begin{tabular}{  p{3cm}  |  p{8cm} }
\bottomrule
\textbf{Name} &amp; \textbf{Description}\\  \hline

        Text & Text  \\ \hline
        Text & Text  \\ \hline
        Text & Text  \\ \hline
        Text & Text  \\ \hline
        Text & Text. \\ \hline
        Text & Text  \\ \hline

\bottomrule
\end{tabular}
\end{center}


And that's it!

Short explanation.

You have to notice two things: First,

\rowcolors{1}{white}{gray}



is what adds color to every second row. Second, it's the

 \bottomrule


that makes the first and the last line thicker.

Also, you'll notice that the rows in the picture are not gray. This is because I have defined a new color and used instead, as I really didn't like any of the deafult colors. New colors are defined it the Preable.tex like this:

\definecolor{orange}{RGB}{253,245,230}

As you can see, you can define a color by knowing the RGB-values. In this example, I have named the color "orange", which I then write in the table code: It will say

\rowcolors{1}{white}{orange}

instead of

\rowcolors{1}{white}{gray}

Adding new colors is not at all necessary. You can always use the deafult colors, so the last part is completely optional.

Filed under: LaTeX No Comments