This project is read-only.

Styling questions

May 24, 2013 at 7:04 PM
Edited May 24, 2013 at 7:07 PM
Markus,

Here is an image of an edit form:
Image

There are a ton of values shown. I need to organize them so that they are viewable. I have a couple of questions.

Here is the xaml header:
<mvvm:View xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:mvvm="clr-namespace:CODE.Framework.Wpf.Mvvm;assembly = CODE.Framework.Wpf.Mvvm"
Title = "Application Configuration"
Style = "{DynamicResource CODE.Framework-Layout-EditFormLayout}">

After that, I have a series of label/textboxes defined as well as some checkboxes.

Questions:
1) By default, the text sizes too small, so I need to make the display really large so that I can read the text. How do I set the minimum font size without modifying the CODE FW style. I believe I just create a new style based on the FW style and add the minimum size to that. But I am not quite sure which value to set.

2) The checkboxes are indented for some reason. The xaml for the first checkbox (which also includes a group break) is:
<CheckBox IsChecked="{Binding closeFormOnSave}"
Content="closeFormOnSave:"
mvvm:View.GroupTitle="Other Options"
mvvm:View.GroupBreak="true"
mvvm:View.IsStandAloneEditControl="true"/>

The rest of the checkboxes in the group do not include the Group info. But it seems that I do need the IsStandAloneEditControl for each checkbox or the rest of the UI gets messed up. What do I specify so that they are left aligned with the text?

3) A number of the controls seem to have part of the control missing (as if the next control is overlapping the previous.) Do you know why? More importantly what do I set so that this doesn't happen?

4) I would like to put each group (Default Values, Other Options, etc.) in a box and have the controls wrap inside that box and the boxes wrap around each other. So if the width is enough, then 2 boxes would be side by side. If not, then they stack (standard wrap panel behavior). And the control pairs inside the box would layout horizontally and wrap. Is this something that can be done fairly easily with a modified style or do I need to do all the layout myself?

5) There is a 2nd column visible in the image. In reality, there are many columns necessary to hold all the settings. I would like to be able to specify that all the items should be in a pageframe and have an option like:
mvvm:View.SectionBreak="True" that would have this and subsequent controls appear in the next "section" - in the case of a pageframe, the next section would be the next page.

My goal is to find out which of these questions are relatively easy for me to implement (given a little direction) and which might be more complicated. I have no problem using standard wpf/xaml to layout the items for now - but if I do that, I lose all the wonderful CODE FW theme support.

While much can be done with the styles, you do have a fair amount of code supporting the styles and I am not quite sure how I would override that code (say to add the support for sections/pages).

And I am hoping that you (EPS) has had to create forms that are somewhat similar and that what I want can be done with the current styles without much modification.
So I want to check with you before I assume I have no other choice.

I know this is a long question, but I have a large number of forms that will require similar grouping (addresses for example) and I am sure that others will have the same dilemma.

Thanks,

Fletcher
May 24, 2013 at 8:24 PM
1) By default, the text sizes too small, so I need to make the display really large so that I can read the text. How do I set the minimum font size without modifying the CODE FW style. I believe I just create a new style based on the FW style and add the minimum size to that. But I am not quite sure which value to set.
The font size of the individual control depends on what controls they are. For instance, if you use an actual <Label> element, then whatever the default style of the label is will be used here. If not changed, then the default label style will pick up the default font size defined in the fonts dictionary. Same for other controls such as textboxes. And it is OK to change the font size there if you want. You could also just change the font size resource within your theme-specific resource file.

You are using the EditForm layout in your example. The default style for an edit form control in the Battleship theme is defined like this:
<Style TargetType="ItemsControl" x:Key="CODE.Framework-Layout-EditFormLayout">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <Layout:EditForm Margin="10" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Style.Resources>
            <Style TargetType="Label">
                <Setter Property="Foreground" Value="{DynamicResource CODE.Framework-Application-ForegroundBrush1}" />
                <Setter Property="FontSize" Value="{DynamicResource FontSize-Normal}"/>
                <Setter Property="FontFamily" Value="{DynamicResource DefaultFont}"/>
                <Setter Property="Foreground" Value="{DynamicResource CODE.Framework-Application-ForegroundBrush1}"/>
                <Setter Property="Margin" Value="0" />
                <Setter Property="Padding" Value="0" />
            </Style>
        </Style.Resources>
    </Style>
This is actually a pretty interesting definition as far as the technique goes. It defines a style within a style. This means that the label style this defines only applies for labels within the edit form control. As you can see, it is bound to the normal font size resource. You can take this entire style and copy them into either your theme folder to redefine that style for the whole app you are creating, or you could copy it into the XXX.Battleship.xaml resource file for a specific view and change things such as the font size for the label there.
May 24, 2013 at 8:28 PM
OK, item #2: :-)
The rest of the checkboxes in the group do not include the Group info. But it seems that I do need the IsStandAloneEditControl for each checkbox or the rest of the UI gets messed up. What do I specify so that they are left aligned with the text?
The best way to go would probably be to use just a label for the first checkbox ("Other Options:") and then have the first checkbox follow that and then have the next few checkboxes flagged as stand-alone controls so they are equally far indented. I think that would look best in that case.

I think what you are asking is slightly different though, right? You want the first checkbox to not be indented at all. The edit form layout currently doesn't do that, actually. It lays all the items out with indentation. That is kind of the purpose of that control.

Note: A slightly different approach to laying out a form like this is a "FlowForm". This is a layout panel I have developed in a recent project and we already have a limited version of that in an internal build of ours (the missing part is that it doesn't support grouping yet). That one might get you closer to the behavior you would like to see.
May 24, 2013 at 8:32 PM
And the remainder:
3) A number of the controls seem to have part of the control missing (as if the next control is overlapping the previous.) Do you know why? More importantly what do I set so that this doesn't happen?
That is pretty odd. It shouldn't do that, and I haven't seen that happen. What exact controls are you using for the labels? Labels or TextBlocks? Or something else?
4) I would like to put each group (Default Values, Other Options, etc.) in a box and have the controls wrap inside that box and the boxes wrap around each other. So if the width is enough, then 2 boxes would be side by side. If not, then they stack (standard wrap panel behavior). And the control pairs inside the box would layout horizontally and wrap. Is this something that can be done fairly easily with a modified style or do I need to do all the layout myself?
I think you could just use a WPF WrapPanel for that, couldn't you?
5) There is a 2nd column visible in the image. In reality, there are many columns necessary to hold all the settings. I would like to be able to specify that all the items should be in a pageframe and have an option like: mvvm:View.SectionBreak="True" that would have this and subsequent controls appear in the next "section" - in the case of a pageframe, the next section would be the next page.
Hm, yes. That is a little trickier though. That would take some custom development of at least a custom layout panel.

Basic rule of thumb in WPF is this: It is relatively easy to lay things out and move things around. It is difficult when you start stuffing things into another container on the fly, or add new controls on the fly, because that is really quite different in nature from just laying things out.


Markus