Implement Touch Mode

[batzen]

Copied from CodePlex https://fluent.codeplex.com/workitem/22408

I was wondering is there any chance of implementing a touch screen mode like Office 2013.

[shanhongyue]

The differences between the two modes may be the margin、padding and icon, but the behaviour of some controls such as SplitButton, may change.

You can add two ResourceDictionary file:

and add a dropdownButton:

to load different xaml files.

[HeinA]

Hi there

Is there a way to increase the tab item sizes?

Thanx Hein

[batzen]

Please ask your question as a separate issue.

[batzen]

If no one is willing to contribute this feature, which has to work in all themes, i will close this issue in about two weeks.

[xan2622]

@batzen: Why do you want to close Issues that nobody seems to have interest in (for the moment at least)? I noticed that you even add deadlines (like "This issue will be closed in case no one shows interest till end of march.")..

I am really surprised by this behaviour. If you close valid issues, you make them less visible for the future developers who will want to help you and join your project later.

Many projects keep issues "open" as long as they haven't been fixed: https://github.com/OpenRA/OpenRA/issues https://github.com/mono/MonoGame/issues https://github.com/bountysource/frontend/issues ...

[batzen]

@x-a-n-a-x I want to close them because the original reporter does not respond anymore or it's a requested feature which no one seems to be interested in. But i reconsidered that and won't mark them for closing anymore.

[maurosampietro]

I think i have some time to spend on this from may on.

Do you think #298 can be related to this?

[batzen]

@maurosampietro That's really, kind of, related to #298.

[maurosampietro]

I really need this feature in my application so I did some research on touch mode. What i have done here already fits my needs very well but it is not a complete general solution and it is just meant to be discussed as a starting point.

The following applies to ToggleButton, Button, SplitButton, ColorGallery and DropDownButton only, all used in LargeIcon mode since the other modes are not really useful here to me (I use resistive imprecise monitors on which small controls can't do the job).

In touch mode we need the controls to be more distant from one another or larger. I started investigating the distance among controls but i immediately understood it was not enough to provide a good user experience. So I investigated custom control sizes also because it is requested in #298.

In Fluent ribbon, controls try to use less space as possible: this feature do not fit in touch mode so the first thing is to provide the possibility to set the Width of a control. This can be achieved very easily this way and in a similar way on most (if not all) controls:

<ControlTemplate x:Key="RibbonToggleButtonControlTemplate"
                    TargetType="{x:Type Fluent:ToggleButton}">
    <Border x:Name="border"
            Width="{TemplateBinding Width}" //add this
            MinWidth="{TemplateBinding MinWidth}" //add this
                ...

This way all controls can be sized as we wish (can it fix #298?). I size them all to the same size in order to provide a uniform way of interaction.

The current rule to use less space as possible can be achived by setting Width=Auto. So we don't lose that feature. At the time I switch between TouchMode and normal/mouse mode by the means on a property in my viewmodel (but this should be moved inside Fluent.Ribbon I think) this way:

<Style TargetType="{x:Type Fluent:ToggleButton}"  BasedOn="{StaticResource {x:Type Fluent:ToggleButton}}">
    <Style.Triggers>
        <DataTrigger Binding="{Binding Path=TouchMode}" Value="True">
            <Setter Property="MinWidth" Value="64"/>
        </DataTrigger>
    </Style.Triggers>
    <Setter Property="Width" Value="Auto"/>
</Style>

Now that we can change the width of our control we want to be able to display the TwoLineLabel on a single line. On particular controls that can show a glyph, if we choose to display all the text on a single line, we want to choose if the glyph has to be shown on the same line or on the second one (centered). In my opinion with custom widths LargeIcon controls the glyph should be on the second line and centered by default as it looks very good. Here some help is wanted but i was able to do the most with wpf inspector.

@batzen What about small icons? Do you think they are really needed in TouchMode? What are your feelings about this? How much is uncovered?

[maurosampietro]

Having regard to the utterly lack of interest in this point and other related points (#286, #298) i won't spend time working on them anymore since what i did in the first place already fits my needs perfectly.