jfo's coding : Cider

Beta2 is out -- What's new in Cider

jfoscoding — Mon, 26 Oct 2009 22:36:00 GMT

Mark shows off some of the new and exciting features in Cider Beta 2, including:

DataSources window now works in Silverlight (as well as WPF) - you can now drag and drop from this window to your design surface to automatically hook up to data.
Property Inspector window gets a facelift -- now lets you sort by property source (e.g. see all the locally set versus inherited properties grouped together)
{d:DataContext} markup extension lets you set design time data across Cider and Blend.
UserControls can now use resources from App.xaml
Designer now loads with broken controls -- a red x shows you the control that could not load, and a gold bar shows you the exact exception. Previously you would have only gotten a "Problem Loading" screen.

We would love to get your feedback on these new features!

Some of these pages are no longer intentionally left blank.

jfoscoding — Wed, 13 Sep 2006 18:15:00 GMT

One thing we neglected to mention in the release notes is that you can now load up roots other than Window and Grid in the August CTP. The list I believe is anything deriving from Panel, Page, UserControl and ContentControl.

So if you have the latest installed - try replacing your window1.xaml with this:

<Button x:Class="WindowsApplication65.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="75" Width="100">
Hello world!
</Button>

If you want to drag and drop into it, replace the contents with a Grid. For button you may have to size the grid in code, as the button layout sizes grid to zero.

More interestingly, you can now design user controls.

Have fun!

Scott starts blogging, and lets us know about Winforms/WPF gotchas

jfoscoding — Sat, 09 Sep 2006 20:57:00 GMT

If you're doing Winforms and WPF you might just want to check it out.

Upgrading to June CTP? Your layout might be different.

jfoscoding — Thu, 29 Jun 2006 05:18:00 GMT

There's a breaking change to the WPF control templates, which you might need to know about.

The controls I've noticed that need a double check are:

Button
ComboBox
ListBox
TextBox
PasswordBox
Slider
Thumb
ToolBar
TreeView
ProgressBar
TabControl
GridSplitter

What is Rich Data Visualization Anyways?

jfoscoding — Mon, 12 Jun 2006 01:04:00 GMT

One of the things you hear over and over again with WPF is the ability to do Rich Data Visualization. It has always made me cringe, as it always seems like to fit into that category you need a 3D rotating panda, or some sort of alien chart form that would make Edward Tufte cringe.

The other day, I had a gestalt, with much thanks to Chris Anderson. Six years ago, I was doing a primitive form of “rich data visualization”, I just didn’t know it. In one of my first projects at Microsoft, I was building up a report viewer. I built up an XML data island, an XSLT, and using the magic that is the XSLT transform I created HTML that hydrated an office chart control.

Looking back, what I spent a lot of time on was really the shape of my data to make it easily accessible from XSLT. (…and then the other half of the time was negotiating the syntax of XSLT.) I started off with the data, came up with a primitive display, and I had a designer help me beef up the presentation. I had to, in effect, decide what data was important, then build my UI around that.

The problem with XSLT was that I had to spend a lot of time turning my SQL query into an XML data island that had the correct data that I wanted to bind to. I would frequently change the shape of my data so that it would make it easier to negotiate the syntax in XSLT. In WPF, there are some basic things that make some stuff easier to bind to, but pretty much I don’t have to fiddle with generating the right XML, I can just databind to my custom object – no worries.

Working with Windows Forms, the problem was totally the opposite. In order to build up an application, you need to first think about how you want to display the information, then pick the controls, then work with the data. This is mainly because of limitations with the common control set. If I wanted to show a treeview, that was totally simple. If I wanted to show each tree node with a mix of fonts – bold, followed by unbold text, I would have to move to owner draw. If I wanted to show a panel of information when the treeview was expanded, I had to throw out using the TreeView control altogether and build something up from scratch. In other words, to be successful with Windows Forms and common controls, you have to know roughly what you want your user interface to look like before you get started.

Working with WPF, you’ll quickly find that it is heavily based on composition. Pretty much anything can go into anything else – if you want your node in your TreeView to show a panel of information, just go ahead and slap in a list box, or grid or whatever you need. In WPF there isn’t a whole lot of “you picked the wrong control, back to square one!”.

In WPF the workflow is slightly different that you may be used to – for anything serious, you’ll find yourself being data driven. I have this piece of data, how can I generate controls on the fly to represent it? This is where data templates (sort of the analog to XSLT) come into play. I can say I have a list of folks that are working at my company. I want to display them by “who reports to who”, and when it’s expanded I can see information about their title, how long they’ve worked here, where their office is etc. So I’ll create a data template for an Employee – whenever I see one I’ll create a TreeViewItem, with a StackPanel of TextBlocks to display the information. With confidence I can pick a TreeView, knowing that I basically want to display it in a hierarchy – and later on when I want to make it “pretty” I likely wont have to start all over from square one with a different control.

I guess my key takeaway is that rich data visualization is for everyone, whether you are building up a fancy map or chart control, a rotating panda, or just displaying a fancy tree in a treeview. You’ll likely use it without even knowing you’re doing it.

Brian discusses the evolution of user input and feedback in the designer

jfoscoding — Tue, 18 Apr 2006 08:35:00 GMT

Brian walks through the history of the implementation of grab handles and snaplines in the designer, and how through the magic of the new architecture in Cider for the first time grab handles, snaplines and other "adorners" will have proper access to keyboard input as well as mouse.

Also, don't miss Jim's solution to adding a "DesignMode" property using Cider's extension architecture.

Mike shows us how to localize a hybrid application

jfoscoding — Thu, 06 Apr 2006 03:10:00 GMT

Mike Henderlight has walked through a sample on how to localize a WPF/WindowsForms hybrid application.

More information for XAML in particular:

Localization requirements for your XAML resources
Globalization for the Windows Presentation Foundation

What's the difference between the "EmbeddedResource", "Page" and "Resource" Build Actions?

jfoscoding — Thu, 06 Apr 2006 03:04:00 GMT

Jim has posted the results of his recent inquiry on this subject as well as some other goodness about WPF resources.

Commanding in WPF

jfoscoding — Thu, 02 Mar 2006 09:05:00 GMT

There's a nice article out on commanding in WPF.

Feb CTP is out

jfoscoding — Sat, 25 Feb 2006 18:28:00 GMT

Feb CTP is out. Rather than have a separate install, Cider is now integrated into the Visual Studio "Orcas" Development Tools for WinFX. (Note the designer requires a full version of Visual Studio 2005.)

Tim and Karsten have posted a list of "breaking changes" between Jan and Feb CTPs (most notable is the Mapping PI - which *was* the way to effectively do a "using" statement in XAML - now it's a much cleaner one-line thing). Rob has posted his tool which helps you automagically migrate to the new syntax.

Note, if you're using Expression, then read this first before upgrading... you may want to wait till March to get the matching Expression designer.

Some "Avalon" goodness...

jfoscoding — Wed, 15 Feb 2006 08:00:00 GMT

I thought I'd put up a few good reads:

Mapping PIs are going away in the next CTP. Rob promises to post a tool to help convert your apps. (In the next CTP, the RichTextBox stuff will start working.)

Rob talks about Attached Properties and Markup Extensions XAML.

Charles Petzold talks about the ContentPropertyAttribute.

The Cider team is looking for sample applications using styles, templates and resources. If you've got an application you think we should look at drop me a line.

Kevin & Robby show "The Power of Templates"

jfoscoding — Fri, 03 Feb 2006 08:57:00 GMT

There's a nice new MSDN TV episode talking about Data Templates and Control Templates.

Tell us what you think about the Grid!

jfoscoding — Sat, 28 Jan 2006 02:08:00 GMT

As you may know the Jan CTP is out, with improvements to the Cider Grid design time experience. We want to know what you think.

More on "Avalon" RichTextBox

jfoscoding — Mon, 16 Jan 2006 20:33:00 GMT

As promised, I learned more so I'm sharing. Last time I figured out how to stuff plain text into the RichTextBox, but that's not very "rich", is it?

How do I put RTF (rich text format) into a RichTextBox?
It turns out the support for this seems to be through the TextRange class. TextRange offers a "Load" method which takes a string representing a data format (which you can pick from the DataFormats class) and a stream. If you currently have a string of RTF formatting, you can stuff the string in a MemoryStream, then pass it to the TextRange. Here's a handy helper function for it:

private static void LoadRTF(string rtf, RichTextBox richTextBox) {

            if (string.IsNullOrEmpty(rtf)) {
                throw new ArgumentNullException();
            }

TextRange textRange = new TextRange(richTextBox.Document.ContentStart, richTextBox.Document.ContentEnd);

            //Create a MemoryStream of the Rtf content

            using (MemoryStream rtfMemoryStream = new MemoryStream()) {
                using (StreamWriter rtfStreamWriter = new StreamWriter(rtfMemoryStream)) {
                    rtfStreamWriter.Write(rtf);
                    rtfStreamWriter.Flush();
                    rtfMemoryStream.Seek(0, SeekOrigin.Begin);

                    //Load the MemoryStream into TextRange ranging from start to end of RichTextBox.
                    textRange.Load(rtfMemoryStream, DataFormats.Rtf);
                }
            }
        }

How do I load a file with "rich" content in it?
Here again, you can use the TextRange class to load, but you pass in a FileStream instead of a MemoryStream.

   private static void LoadFile(string filename, RichTextBox richTextBox) {
            if (string.IsNullOrEmpty(filename)) {
                throw new ArgumentNullException();
            }
            if (!File.Exists(filename)) {
                throw new FileNotFoundException();
            }

            // open the file for reading
            using (FileStream stream = File.OpenRead(filename)) {
                // create a TextRange around the entire document
                TextRange documentTextRange = new TextRange(richTextBox.Document.ContentStart, richTextBox.Document.ContentEnd);

                // sniff out what data format you've got
                string dataFormat = DataFormats.Text;
                string ext = System.IO.Path.GetExtension(filename);
                if (String.Compare(ext, ".xaml",true) == 0) {
                    dataFormat = DataFormats.Xaml;
                }
                else if (String.Compare(ext, ".rtf", true) == 0) {
                    dataFormat = DataFormats.Rtf;
                }
                documentTextRange.Load(stream, dataFormat);
            }
        }

How do I Save a file with "rich" content in it?
TextRange also has a Save! Here's the code

    private static void SaveFile(string filename, RichTextBox richTextBox) {
            if (string.IsNullOrEmpty(filename)) {
                throw new ArgumentNullException();
            }

            // open the file for reading
            using (FileStream stream = File.OpenWrite(filename)) {
                // create a TextRange around the entire document
                TextRange documentTextRange = new TextRange(richTextBox.Document.ContentStart, richTextBox.Document.ContentEnd);

                // sniff out what data format you've got
                string dataFormat = DataFormats.Text;
                string ext = System.IO.Path.GetExtension(filename);
                if (String.Compare(ext, ".xaml", true) == 0) {
                    dataFormat = DataFormats.Xaml;
                }
                else if (String.Compare(ext, ".rtf", true) == 0) {
                    dataFormat = DataFormats.Rtf;
                }
                documentTextRange.Save(stream, dataFormat);
            }
        }

Putting it all together - a very simple editor

Replacing the contents of the Window with this DockPanel, adding the SaveFile, LoadFile helper methods and the event handlers for open and save, we can get a very simple rich text editor.


<DockPanel>
    <Menu DockPanel.Dock="Top">
      <MenuItem Header="_File">
        <MenuItem Header="_Open File" Click="OnOpenFile"/>
        <MenuItem Header="_Save" Click="OnSaveFile"/>
        <Separator/>
        <MenuItem Header="E_xit" Click="OnExit"/>
      </MenuItem>
    </Menu>
    <RichTextBox Name="richTextBox1"></RichTextBox>
</DockPanel>

        // Window1.xaml.cs
        private void OnExit(object sender, EventArgs e) {
            this.Close();
        }
        private void OnOpenFile(object sender, EventArgs e) {
            Microsoft.Win32.OpenFileDialog ofd = new Microsoft.Win32.OpenFileDialog();
            ofd.Filter = "Text Files (*.txt; *.xaml; *.rtf)|*.txt;*.xaml;*.rtf";
            ofd.Multiselect = false;
            if (ofd.ShowDialog() == true) {
                LoadFile(ofd.SafeFileName, richTextBox1);
            }

        }
        private void OnSaveFile(object sender, EventArgs e) {
            Microsoft.Win32.SaveFileDialog sfd = new Microsoft.Win32.SaveFileDialog();
            sfd.Filter = "Text Files (*.txt; *.xaml; *.rtf)|*.txt;*.xaml;*.rtf";
            if (sfd.ShowDialog() == true) {
                SaveFile(sfd.SafeFileName, richTextBox1);
            }
        }

Some tricks for working with WPF’s RichTextBox

jfoscoding — Sat, 14 Jan 2006 10:19:00 GMT

I’ve been playing around with the RichTextBox, and as Richard points out, the free spell checking on WPF TextBoxes is really cool – especially for the “spelling challenged” such as myself.

The programming model for the WPF RichTextBox is quite a bit richer than the Windows Forms wrapper around the rich edit control – however it’s a bit more complex to work with. I’m still working out all the details of how to work with it, but I thought I’d write down what I’ve figured out:

To get to your actual content, you’ve gotta work with a Document object. This is the place where the actual text content can be manipulated. From here you can get what’s currently selected through the RichTextBox.Document.Selection property, or access “blocks” of text through the RichTextBox.Document.Blocks property.

Adding content to your RichTextBox in XAML:

In XAML. this is really easy… just add paragraphs and insert your formatting as you go.

This is a richTextBox. I can <Bold>Bold</Bold>, <Italic>Italicize</Italic>, <Hyperlink>Hyperlink stuff</Hyperlink> right in my document.

</Paragraph>

</FlowDocument>

</RichTextBox>

Shrinking down the space between paragraphs:

Every time you have a newline in your text, this adds a new paragraph to your document. By default, there is a margin separating out the paragraphs, so it feels as if there is a blank line between paragraphs (I guess this keeps with the “P” html tag versus the “BR”?)

This is my first paragraph... see how there is...

</Paragraph>

a huge amount of space between it and the second paragraph?

</Paragraph>

</FlowDocument>

</RichTextBox>

Anyways, in order to shrink down your spacing between paragraphs, you can make use of the styling features in WPF. You can say, “hey whenever I see a paragraph created within this rich textbox, reset its margins to 0”. The magic is done by a “Style” XAML tag, and by not specifying a particular key, and specifying a TargetType of Paragraph, all Paragraphs that are a child of the RichTextBox get the appropriate style. For more info on styles, the styles chapter of Chris Sells and Ian Griffith’s book is online.

<RichTextBox.Resources>

</Style>

</RichTextBox.Resources>

This is my first paragraph... see how there is...

</Paragraph>

a no space anymore between it and the second paragraph?

</Paragraph>

</FlowDocument>

</RichTextBox>

So then the next question is how do I put plain text into the RichTextBox?

Unless you want to replace the currently selected text (RichTextBox.Document.Selection.Text), you will need to access the RichTextBox.Document.Blocks collection to add more text to the textbox.

Here’s a quick code sample for replacing all text in a RichTextBox:

private void LoadTextFile(RichTextBox richTextBox, string filename) {

richTextBox.Document.Blocks.Clear();

using (StreamReader streamReader = File.OpenText(filename)) {

Paragraph paragraph = new Paragraph();

paragraph.Text = streamReader.ReadToEnd();

richTextBox.Document.Blocks.Add(paragraph);

}

How do I get Text back out of the RichTextBox?

To get the text back out of the RichTextBox, you need to use the TextRange class:

private string GetText(RichTextBox richTextBox) {

// use a TextRange to fish out the Text from the Document

TextRange textRange = new TextRange(richTextBox.Document.ContentStart, richTextBox.Document.ContentEnd);

return textRange.Text;

}

These were the next things I needed to know to use the control - when I find out more I'll keep you updated!

[Update: Part 2 here]