Monthly Archives: April 2013

Quick and Easy: Move a Rectangle Using C# In a Windows Store App

Leave a reply

My overall blog philosophy is that it’s perfectly fine to blog about old, settled subjects that have been covered to death elsewhere.  I assume this topic is one of those, but I’m blogging it anyway.

I’ve been working on a window store app and I’m at the part where I need to do some animating.  To this end, I’ve been figuring out bits and pieces of windows store app animation which, as it turns out, is quite close to, but not exactly like, XAML based animations in .NET (I’m still coming to grips with the fact that WinRT <> .NET 🙂 ).

This morning I wanted to get a handle on drag and drop operations.  En route to that, I got bogged down moving a rectangle instead :).  Here’s the code that moves a rectangle when the user clicks a button:

   1:   
   2:              MatrixTransform ct = (MatrixTransform)rectBig.RenderTransform;
   3:              Matrix m = ct.Matrix;
   4:              m.OffsetX += 10;
   5:              m.OffsetY += 10;
   6:              ct.Matrix = m;
   7:              rectBig.RenderTransform = ct;

The trick here is that I can’t directly change OffsetX or OffsetY.  There may be a more clever way of doing this (and if you know and feel like, please post in the comments). 

In order to do this, I need to:

1. Get the MatrixTransform of the rectangle (by casting RenderTransform).

2. Get the Matrix of that guy.

3. Change the Matrix’s offsets.

4. Reassign the Matrix back to the MatrixTransform.

5. Reassign the MatrixTransform back to the Rectangle.

To test it, I put a rectangle and button the screen. When I click the button, the above logic executes and moves the rectangle immediately.

At some point, I’d like to animate this but I have no idea how to get a DoubleAnimation to work on it (Storyboard.SetTargetProperty() is a mystery to me on this for the time being).

</end>

undefinedSubscribe to my blog.

Follow me on Twitter at http://www.twitter.com/pagalvin

Setting the Height of ListboxItems In a ListBox Programmatically for Windows Store App

Leave a reply

I’m working on a windows store application and one of the things I want to do in the app is display a log that shows status messages and other informational tidbits as the user works things.  To this end, I added a ListBox as follows:

<ListBox x:Name="GameStateLog" HorizontalAlignment="Center" Height="221" VerticalAlignment="Top" Width="499" Padding="0" FontSize="10">

 

The C# code to populate the listbox at runtime was along the lines of:

GameStateLog.Items.Insert(0, GameStateCounter++ + ": New game state: waiting for player 1 name");

This worked out fine enough but the UI showed a crazy amount of padding around the individual messages as they were added.  That makes sense if I want end users to be able to select these items but does not make sense when I just want to show a running series of log messages – users won’t select these, just view them.  It was strangely hard to find an easy way to do this and arguably, the way I found it isn’t necessarily “easy” but I got it working OK.  The key insight came from this posting here (http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/c4a6f694-bd46-4779-ab83-b1c2fcb2397c) from Bob Relyea.  Instead of adding strings to the Items collection on the ListBox, add ListBoxItems.  By adding a string, the ListBox was creating its own ListBoxItem on its own.  I wasn’t able to affect anything about that ListBoxItem after the fact.  The new code is:

        private void AddGameStateLogMessage(string theMessage)
        {
            ListBoxItem li = new ListBoxItem();
            li.Content = theMessage;
            li.MaxHeight = 25;

            Thickness thisPadding = new Thickness(5, 0, 5, 0);
            li.Padding = thisPadding;

            GameStateLog.Items.Insert(0,li);
        }

 

Here I’m creating ListBoxItem’s and inserting them.  I removed the excess padding by setting its thickness.

This is pretty flexible as I do intend to do some color coding to highlight particular types of messages and by directly adding ListBoxItems I get to style them any way I want.

Hope this helps someone!

</end>

undefinedSubscribe to my blog.

Follow me on Twitter at http://www.twitter.com/pagalvin