{"id":4303,"date":"2008-06-17T10:30:00","date_gmt":"2008-06-17T10:30:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/vbteam\/2008\/06\/17\/protein-is-good-for-you-part-2-matt-gertz\/"},"modified":"2024-07-05T14:21:25","modified_gmt":"2024-07-05T21:21:25","slug":"protein-is-good-for-you-part-2-matt-gertz","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/vbteam\/protein-is-good-for-you-part-2-matt-gertz\/","title":{"rendered":"Protein is Good for You, part 2 (Matt Gertz)"},"content":{"rendered":"

In yesterday’s blog post, I walked through an engine for translating DNA to its amino acid results via messenger RNA.  <\/span>In today’s blog, we’ll work on the visualization using WPF StackPanels.  <\/span>(This example requires VS2008, although it could certainly be written in WinForms as well with just a little bit of extra work.)<\/font><\/p>\n

Caution<\/b>:  <\/span>The point of this blog is to demonstrate StackPanels, and specifically how you can control their orientation and nesting.  <\/span>Consequently, for the sake of that argument, I’m creating a lot of text objects (one for each base and each amino) and nesting them to demonstrate this.  <\/span>For a really robust program, I would ditch the extra objects and just do owner draw directly.  <\/span>In other words, don’t use this example on enormous 20000-sequence strands of DNA, as neither you nor your PC would like the performance results.<\/font><\/font><\/p>\n

StackPanels<\/font><\/h2>\n

In the last post, I added a ScrollViewer to the Window, changed it to scroll horizontally instead of vertically, but otherwise left it alone.  <\/span>Now we’ll dig into the details of how we’ll populate it with StackPanels.  <\/span><\/font><\/font><\/p>\n

StackPanels expose a very easy way to organize a set of drawable objects on the screen.  <\/span>StackPanels <\/span>expose a Children collection, and when you add objects to the that collection, they’ll display in the order you add them and in the direction you specify.  <\/span>What’s really cool is that StackPanels will nest with each other, and I’ll take advantage of that fact by creating three StackPanels that organize information horizontally (one each for DNA, mRNA, and aminos), and then adding them to a parent StackPanel so that they line up with each other.  <\/span>I’ll then add the parent StackPanel to the ScrollViewer so that the alignment of all three sub-panels can be seen.<\/font><\/p>\n

Each of the sub-panels will contain one of more text objects which either contain the abbreviation of a base, the abbreviation of an amino, or blank space (representing unused intron material).  <\/span>Aminos correspond to three bases, and so those text objects need to be three times wider.  <\/span>I’ll create some helper functions to return the appropriate text objects:<\/font><\/p>\n

    <\/span>Const<\/span> baseWidth As<\/span> Integer<\/span> = 16<\/p>\n

<\/span><\/p>\n

<\/p>\n

 <\/p>\n

<\/span><\/p>\n

    <\/span>Private<\/span> Function<\/span> DrawBase(ByVal<\/span> base As<\/span> Char<\/span>) As<\/span> TextBlock<\/p>\n

<\/span><\/p>\n

        <\/span>Dim<\/span> baseTextBlock As<\/span> New<\/span> TextBlock<\/p>\n

<\/span><\/p>\n

        <\/span>Select<\/span> Case<\/span> base ‘ Switch for colors<\/p>\n

<\/span><\/span><\/p>\n

            <\/span>Case<\/span> “C”<\/p>\n

<\/span><\/span><\/p>\n

                <\/span>baseTextBlock.Background = Brushes.LightSalmon<\/p>\n

<\/span><\/p>\n

            <\/span>Case<\/span> “G”<\/p>\n

<\/span><\/span><\/p>\n

                <\/span>baseTextBlock.Background = Brushes.LightGoldenrodYellow<\/p>\n

<\/span><\/p>\n

            <\/span>Case<\/span> “A”<\/p>\n

<\/span><\/span><\/p>\n

                <\/span>baseTextBlock.Background = Brushes.LightGreen<\/p>\n

<\/span><\/p>\n

            <\/span>Case<\/span> “T”<\/p>\n

<\/span><\/span><\/p>\n

                <\/span>baseTextBlock.Background = Brushes.LightSkyBlue<\/p>\n

<\/span><\/p>\n

            <\/span>Case<\/span> “U”<\/p>\n

<\/span><\/span><\/p>\n

                <\/span>baseTextBlock.Background = Brushes.LightSteelBlue<\/p>\n

<\/span><\/p>\n

        <\/span>End<\/span> Select<\/p>\n

<\/span><\/span><\/p>\n

<\/p>\n

 <\/p>\n

<\/span><\/p>\n

        <\/span>baseTextBlock.Inlines.Add(New<\/span> Bold(New<\/span> Run(base)))<\/p>\n

<\/span><\/p>\n

        <\/span>baseTextBlock.Height = 32<\/p>\n

<\/span><\/p>\n

        <\/span>baseTextBlock.Width = baseWidth<\/p>\n

<\/span><\/p>\n

        <\/span>baseTextBlock.TextAlignment = TextAlignment.Center<\/p>\n

<\/span><\/p>\n

<\/p>\n

 <\/p>\n

<\/span><\/p>\n

        <\/span>Return<\/span> baseTextBlock<\/p>\n

<\/span><\/p>\n

    <\/span>End<\/span> Function<\/p>\n

<\/span><\/span><\/p>\n

<\/p>\n

 <\/p>\n

<\/span><\/p>\n

That last function will be used by both DNA and RNA, creating and returning a fixed block of an appropriate color (a different one for each base) 16 x 32 pixels with the base abbreviation (passed into the function) centered within it.  I’ve chosen light colors so that the dark text will show up against the background properly.  <\/span><\/font><\/p>\n

<\/span>F<\/font>or the amino chains, it’s pretty similar, except that each block is three times wider, to keep the amino lined up with the codon:<\/font><\/p>\n

    <\/span>Private<\/span> Function<\/span> DrawAmino(ByVal<\/span> amino As<\/span> String<\/span>) As<\/span> TextBlock<\/p>\n

<\/span><\/p>\n

        <\/span>Dim<\/span> aminoTextBlock As<\/span> New<\/span> TextBlock<\/p>\n

<\/span><\/p>\n

        <\/span>Select<\/span> Case<\/span> amino ‘ Switch for colors<\/p>\n

<\/span><\/span><\/p>\n

            <\/span>Case<\/span> “Phe”<\/p>\n

<\/span><\/span><\/p>\n

                <\/span>aminoTextBlock.Background = Brushes.AliceBlue<\/p>\n

<\/span><\/p>\n

        &nbs\np;   <\/span>Case<\/span> “Leu”<\/p>\n

<\/span><\/span><\/p>\n

                <\/span>aminoTextBlock.Background = Brushes.Beige<\/p>\n

<\/span><\/p>\n

            <\/span>Case<\/span> “Ser”<\/p>\n

<\/span><\/span><\/p>\n

                <\/span>aminoTextBlock.Background = Brushes.Cyan<\/p>\n

<\/span><\/p>\n

            <\/span>Case<\/span> “Tyr”<\/p>\n

<\/span><\/span><\/p>\n

                <\/span>aminoTextBlock.Background = Brushes.LightSeaGreen<\/p>\n

<\/span><\/p>\n

       <\/span>    <\/span>‘ (Etc… the other aminos omitted for brevity’s sake; see final code for full list.)<\/p>\n

<\/span><\/span><\/p>\n

<\/p>\n

 <\/p>\n

<\/span><\/p>\n

        <\/span>End<\/span> Select<\/p>\n

<\/span><\/span><\/p>\n

        <\/span>aminoTextBlock.Inlines.Add(New<\/span> Bold(New<\/span> Run(amino)))<\/p>\n

<\/span><\/p>\n

        <\/span>aminoTextBlock.Height = 32<\/p>\n

<\/span><\/p>\n

        <\/span>aminoTextBlock.Width = baseWidth * 3<\/p>\n

<\/span><\/p>\n

        <\/span>aminoTextBlock.TextAlignment = TextAlignment.Center<\/p>\n

<\/span><\/p>\n

        <\/span>Return<\/span> aminoTextBlock<\/p>\n

<\/span><\/p>\n

    <\/span>End<\/span> Function<\/p>\n

<\/span><\/span><\/p>\n

And for empty space, I just pass in the number of spaces required and multiple it by the baseWidth:<\/font><\/p>\n

    <\/span>Private<\/span> Function<\/span> DrawNoMap(ByVal<\/span> noMapSize As<\/span> Integer<\/span>) As<\/span> TextBlock<\/p>\n

<\/span><\/p>\n

        <\/span>Dim<\/span> noMapTextBlock As<\/span> New<\/span> TextBlock<\/p>\n

<\/span><\/p>\n

        <\/span>noMapTextBlock.Background = ScrollViewer1.Background<\/p>\n

<\/span><\/p>\n

        <\/span>noMapTextBlock.Height = 32<\/p>\n

<\/span><\/p>\n

        <\/span>noMapTextBlock.Width = baseWidth * noMapSize<\/p>\n

<\/span><\/p>\n

        <\/span>Return<\/span> noMapTextBlock<\/p>\n

<\/span><\/p>\n

    <\/span>End<\/span> Function<\/p>\n

<\/span><\/span><\/p>\n

<\/p>\n

 <\/p>\n

<\/span><\/p>\n

Now I have the tools; we can put them to good use.  <\/span>First, let’s create & populate the DNA StackPanel:<\/font><\/p>\n

    <\/span>Private<\/span> Function<\/span> DrawBases(ByVal<\/span> s As<\/span> String<\/span>) As<\/span> StackPanel<\/p>\n

<\/span><\/p>\n

        <\/span>‘ DNA goes here (horizontal orientation):<\/p>\n

<\/span><\/span><\/p>\n

        <\/span>Dim<\/span> myStackPanel As<\/span> New<\/span> StackPanel<\/p>\n

<\/span><\/p>\n

        <\/span>myStackPanel.HorizontalAlignment = System.Windows.HorizontalAlignment.Left<\/p>\n

<\/span><\/p>\n

        <\/span>myStackPanel.VerticalAlignment = System.Windows.VerticalAlignment.Top<\/p>\n

<\/span><\/p>\n

        <\/span>myStackPanel.Orientation = Orientation.Horizontal<\/p>\n

<\/span><\/p>\n

<\/p>\n

 <\/p>\n

<\/span><\/p>\n

        <\/span>‘Add child elements to the parent StackPanel.<\/p>\n

<\/span><\/span><\/p>\n

        <\/span>For<\/span> i As<\/span> Integer<\/span> = 0 To<\/span> s.Length – 1<\/p>\n

<\/span><\/p>\n

            <\/span>myStackPanel.Children.Add(DrawBase(s(i)))<\/p>\n

<\/span><\/p>\n

        <\/span>Next<\/p>\n

<\/span><\/span><\/p>\n

<\/p>\n

 <\/p>\n

<\/span><\/p>\n

        <\/span>Return<\/span> myStackPanel<\/p>\n

<\/span><\/p>\n

    <\/span>End<\/span> Function<\/p>\n

<\/span><\/span><\/p>\n

<\/p>\n

 <\/p>\n

<\/span><\/p>\n

This is a simple function that does three things:<\/font><\/p>\n

(1)<\/font>    <\/span><\/span><\/span>Create a stack panel that has horizontal orientation, containing object that start from the top left.<\/font><\/p>\n

(2)<\/font>    <\/span><\/span><\/span>Step through each base in the DNA or RNA and add the TextBlock for it created in DrawBase.<\/font><\/p>\n

(3)<\/font>    <\/span><\/span><\/span>Return the completed StackPanel<\/font><\/p>\n

I can use this for both DNA and mRNA just by passing in the appropriate string.  <\/span>Aminos are a bit trickier because I’ve decided to save them as lists of strings rather than one long string (to make it easier to access individual proteins should I wish to expand this program in the future):<\/font><\/p>\n

    <\/span>Private<\/span> Function<\/span> DrawAminos() As<\/span> StackPanel<\/p>\n

<\/span><\/p>\n

        <\/span>‘ Aminos go here (horizontal orientation):<\/p>\n

<\/span><\/span><\/p>\n

        <\/span>Dim<\/span> myStackPanelAminos As<\/span> New<\/span> StackPanel<\/p>\n

<\/span><\/p>\n

        <\/span>myStackPanelAminos.HorizontalAlignment = System.Windows.HorizontalAlignment.Left<\/p>\n

<\/span><\/p>\n

        <\/span>mySta<\/span><\/p><\/p>\n","protected":false},"excerpt":{"rendered":"

In yesterday’s blog post, I walked through an engine for translating DNA to its amino acid results via messenger RNA.  In today’s blog, we’ll work on the visualization using WPF StackPanels.  (This example requires VS2008, although it could certainly be written in WinForms as well with just a little bit of extra work.) Caution:  The […]<\/p>\n","protected":false},"author":258,"featured_media":8818,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[22,195],"tags":[101,166,183],"class_list":["post-4303","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-matt-gertz","category-visual-basic","tag-matt-gertz","tag-vb2008","tag-wpf"],"acf":[],"blog_post_summary":"

In yesterday’s blog post, I walked through an engine for translating DNA to its amino acid results via messenger RNA.  In today’s blog, we’ll work on the visualization using WPF StackPanels.  (This example requires VS2008, although it could certainly be written in WinForms as well with just a little bit of extra work.) Caution:  The […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts\/4303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/users\/258"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/comments?post=4303"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts\/4303\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/media\/8818"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/media?parent=4303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/categories?post=4303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/tags?post=4303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}