Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement Touch Mode #4

Closed
batzen opened this issue Nov 3, 2014 · 9 comments
Closed

Implement Touch Mode #4

batzen opened this issue Nov 3, 2014 · 9 comments

Comments

@batzen
Copy link
Member

batzen commented Nov 3, 2014

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.

office2013

@shanhongyue
Copy link

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:
2014-12-06_143322

and add a dropdownButton:
2014-12-06_144557

to load different xaml files.

@HeinA
Copy link

HeinA commented Mar 27, 2015

Hi there

Is there a way to increase the tab item sizes?

Thanx
Hein

@batzen
Copy link
Member Author

batzen commented Mar 27, 2015

Please ask your question as a separate issue.

@batzen
Copy link
Member Author

batzen commented Mar 27, 2015

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.

@batzen batzen added the Waiting for user response 😕 Waiting for the reporter to respond to questions made by maintainer. label Mar 27, 2015
@batzen
Copy link
Member Author

batzen commented Apr 7, 2015

@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.

@batzen batzen removed the Waiting for user response 😕 Waiting for the reporter to respond to questions made by maintainer. label Apr 7, 2015
@maurosampietro
Copy link
Contributor

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

Do you think #298 can be related to this?

@batzen
Copy link
Member Author

batzen commented Apr 19, 2016

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

@maurosampietro
Copy link
Contributor

maurosampietro commented Jul 13, 2016

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
Copy link
Contributor

maurosampietro commented Sep 20, 2016

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants