TimePunch Metro Wpf Library

Source code checked in, #23755

BitKFu — Wed, 20 Feb 2013 21:13:05 GMT

Don't accept touch input, if not explicit TouchInput is allowed.

Updated Wiki: Home

BitKFu — Sun, 10 Feb 2013 20:59:48 GMT

The TimePunch Metro WPF Library has been designed to have a an easy start into developing applications with Microsoft Metro Stil using WPF.

Using WPF as the design language has the advantage that also users with Windows XP can benefit of the modern and clean design.

The project is released under the MS-Public License. So you can use it for private and commercial purposes. We ourself uses the TimePunch Metro WPF Library in our time-recording software TimePunch. So you can be sure, that it will be supported by our development team. But we also appreciate help from the big and enthusiastic C# community.

NuGet:

The Library is now also available as a NuGet package. Only search for "TpMetroWpf" in Visual Studio or make use of the following url: https://nuget.org/packages/TpMetroWpf/

Updated Wiki: Home

BitKFu — Sun, 10 Feb 2013 20:59:30 GMT

NuGet:

The Library is now also available as a NuGet package. Only search for "TpMetroWpf" in Visual Studio or make use of the following url: https://nuget.org/packages/TpMetroWpf/

Updated Wiki: Home

BitKFu — Sun, 10 Feb 2013 20:59:12 GMT

NuGet: TpMetroWpf

The Library is now also available as a NuGet package. Only search for "TpMetroWpf" in Visual Studio or make use of the following url: https://nuget.org/packages/TpMetroWpf/

Released: TimePunch Metro WPF Library v1.2.2 (Feb 10, 2013)

Sun, 10 Feb 2013 20:13:37 GMT

This release contains some bug fixes and enhancements for the Picker Controls.

ListPicker

New support for quickselection, if the ItemSource objects implements the IItemFilter interface.

DatePicker, TimePicker, TimeSpanPicker

Added support for non touch devices. If the user does not own a touchdevice, than the picker can be used traditionally. This can also be switched by a new property called IsTouchSelectionEnabled.

Updated Release: TimePunch Metro WPF Library v1.2.2 (Feb 10, 2013)

BitKFu — Sun, 10 Feb 2013 20:13:37 GMT

This release contains some bug fixes and enhancements for the Picker Controls.

ListPicker

New support for quickselection, if the ItemSource objects implements the IItemFilter interface.

DatePicker, TimePicker, TimeSpanPicker

Added support for non touch devices. If the user does not own a touchdevice, than the picker can be used traditionally. This can also be switched by a new property called IsTouchSelectionEnabled.

Source code checked in, #23371

BitKFu — Sun, 10 Feb 2013 19:59:39 GMT

Adjusted the innosetup.iss

Source code checked in, #23369

BitKFu — Sun, 10 Feb 2013 19:51:30 GMT

Added nuget build packages

Source code checked in, #23368

BitKFu — Sun, 10 Feb 2013 19:37:39 GMT

Updated Assembly version because of missing files in release

Source code checked in, #23362

BitKFu — Sun, 10 Feb 2013 19:09:23 GMT

Added Calendar license file

Source code checked in, #23361

BitKFu — Sun, 10 Feb 2013 19:07:33 GMT

- Adjust assembly version - Moved the Calendar Image from the Style folder to the Images folder - Added a license information for the Calendar Image

Released: TimePunch Metro WPF Library v1.2 (Feb 09, 2013)

Sat, 09 Feb 2013 17:10:51 GMT

This release contains some bug fixes and enhancements for the Picker Controls.

ListPicker

New support for quickselection, if the ItemSource objects implements the IItemFilter interface.

DatePicker, TimePicker, TimeSpanPicker

Added support for non touch devices. If the user does not own a touchdevice, than the picker can be used traditionally. This can also be switched by a new property called IsTouchSelectionEnabled.

Created Release: TimePunch Metro WPF Library v1.2 (Feb 09, 2013)

bitkfu — Sat, 09 Feb 2013 17:10:51 GMT

This release contains some bug fixes and enhancements for the Picker Controls.

ListPicker

New support for quickselection, if the ItemSource objects implements the IItemFilter interface.

DatePicker, TimePicker, TimeSpanPicker

Added support for non touch devices. If the user does not own a touchdevice, than the picker can be used traditionally. This can also be switched by a new property called IsTouchSelectionEnabled.

Source code checked in, #23339

BitKFu — Sat, 09 Feb 2013 17:03:44 GMT

Added the setup file

Updated Wiki: ListPicker

BitKFu — Sat, 09 Feb 2013 16:19:45 GMT

List Picker

The ListPicker can be used to pick a unique object from a collection of objects. The ListPicker behaves like it does for Windows Phone 7.
On Touch or Click event a sub page opens where the user can select a single value by tapping it.

Here a two screenshots

How to define the ListPicker in XAML
At first it's really important that the page has set the KeepAlive flag. That's because of the implementation of the Picker Control, which needs to hold an ID to identify the current instance of the Picker Control. If the KeepAlive flag is missing the ID might change and the result of the FullPage Selector won't be accepted.

<Page x:Class="PickerControlDemo.Views.ExampleView"
      KeepAlive="True"  >

Here's an example that shows how to define the ListPicker in XAML.

<Picker:ListPicker Grid.Row="1"  
                   ItemsSource="{Binding Months}" 
                   Margin="{StaticResource WinMargin}"
                   DisplayMemberPath="Text"
                   FullModeHeader="Month selection"
                   SelectedItem="{Binding SelectedMonth, Mode=TwoWay}">
    <Picker:ListPicker.FullModeItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Text}" 
                       Style="{StaticResource WinTextNormalStyle}" 
                       Margin="{StaticResource WinMargin}"/>
        </DataTemplate>
    </Picker:ListPicker.FullModeItemTemplate>
</Picker:ListPicker>

How to define a Quick Selection
if the entries of your items source are implementing the IItemFilter interface, than the ListPicker will show the user a quick selection input box. The entries will than be filtered via the interface. Such a implementation could look like:

    public class Resource : IItemFilter
    {
        public bool IsValueAccepted(string filter)
        {
            return filter == null 
               || Text.StartsWith(filter, StringComparison.InvariantCultureIgnoreCase);
        }
    }

This would result in the following screen layout:

Updated Wiki: ListPicker

BitKFu — Sat, 09 Feb 2013 16:18:25 GMT

List Picker

<Page x:Class="PickerControlDemo.Views.ExampleView"
      KeepAlive="True"  >

Here's an example that shows how to define the ListPicker in XAML.

<Picker:ListPicker Grid.Row="1"  
                   ItemsSource="{Binding Months}" 
                   Margin="{StaticResource WinMargin}"
                   DisplayMemberPath="Text"
                   FullModeHeader="Month selection"
                   SelectedItem="{Binding SelectedMonth, Mode=TwoWay}">
    <Picker:ListPicker.FullModeItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Text}" 
                       Style="{StaticResource WinTextNormalStyle}" 
                       Margin="{StaticResource WinMargin}"/>
        </DataTemplate>
    </Picker:ListPicker.FullModeItemTemplate>
</Picker:ListPicker>

How to define a Quick Selection
If the entries of your items source are implementing the IItemFilter interface, than the ListPicker will show the user a quick selection input box. The entries get than filtered via the interface. Such a implementation could look like:

    public class Resource : IItemFilter
    {
        public bool IsValueAccepted(string filter)
        {
            return filter == null 
               || Text.StartsWith(filter, StringComparison.InvariantCultureIgnoreCase);
        }
    }

This would result in the following screen layout:

Updated Wiki: ListPicker

BitKFu — Sat, 09 Feb 2013 16:17:17 GMT

List Picker

<Page x:Class="PickerControlDemo.Views.ExampleView"
      KeepAlive="True"  >

Here's an example that shows how to define the ListPicker in XAML.

<Picker:ListPicker Grid.Row="1"  
                   ItemsSource="{Binding Months}" 
                   Margin="{StaticResource WinMargin}"
                   DisplayMemberPath="Text"
                   FullModeHeader="Month selection"
                   SelectedItem="{Binding SelectedMonth, Mode=TwoWay}">
    <Picker:ListPicker.FullModeItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Text}" 
                       Style="{StaticResource WinTextNormalStyle}" 
                       Margin="{StaticResource WinMargin}"/>
        </DataTemplate>
    </Picker:ListPicker.FullModeItemTemplate>
</Picker:ListPicker>

    public class Resource : IItemFilter
    {
        public bool IsValueAccepted(string filter)
        {
            return filter == null 
               || Text.StartsWith(filter, StringComparison.InvariantCultureIgnoreCase);
        }
     }

Updated Wiki: ListPicker

BitKFu — Sat, 09 Feb 2013 16:16:42 GMT

List Picker

<Page x:Class="PickerControlDemo.Views.ExampleView"
      KeepAlive="True"  >

Here's an example that shows how to define the ListPicker in XAML.

<Picker:ListPicker Grid.Row="1"  
                   ItemsSource="{Binding Months}" 
                   Margin="{StaticResource WinMargin}"
                   DisplayMemberPath="Text"
                   FullModeHeader="Month selection"
                   SelectedItem="{Binding SelectedMonth, Mode=TwoWay}">
    <Picker:ListPicker.FullModeItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Text}" 
                       Style="{StaticResource WinTextNormalStyle}" 
                       Margin="{StaticResource WinMargin}"/>
        </DataTemplate>
    </Picker:ListPicker.FullModeItemTemplate>
</Picker:ListPicker>

        public bool IsValueAccepted(string filter)
        {
            return filter == null || Text.StartsWith(filter, StringComparison.InvariantCultureIgnoreCase);
        }

Updated Wiki: TimeSpanPicker

BitKFu — Sat, 09 Feb 2013 16:12:41 GMT

TimeSpan Picker

Using the TimeSpan picker the user can select a timespan by scrolling the hour and minute selector panels.

Here's an example of the TimeSpanPicker

How to define the TimeSpanPicker in XAML
At first it's really important that the page has set the KeepAlive flag. That's because of the implementation of the Picker Control, which needs to hold an ID to identify the current instance of the Picker Control. If the KeepAlive flag is missing the ID might change and the result of the FullPage Selector won't be accepted.

<Page x:Class="PickerControlDemo.Views.ExampleView"
      KeepAlive="True"  >

The following example shows how to define the TimeSpanPicker in XAML.

        <Picker:TimeSpanPicker 
            FullModeHeader="Select the timespan"
            Margin="{StaticResource WinMargin}" 
            IsTouchSelectionEnabled="True"
            Grid.Row="7" 
            Value="{Binding SelectedTimeSpan, Mode=TwoWay}"/>

Remark to IsTouchSelectionEnabled
If IsTouchSelectionEnabled is not defined, the Framework will decided by it's own if a touch input dialog shall be shown or not. This depends if the user is working with a touchfriendly device or not. If you want to check that by your own, you can use the DeviceInfo.HasTouchInput() method to proof it.

Updated Wiki: TimePicker

BitKFu — Sat, 09 Feb 2013 16:12:02 GMT

Time Picker

Using the time picker the user can select a time by scrolling the hour and minute selector panels. The TimePicker behaves like it does on Windows Phone 7.

Here's an example of the TimePicker

How to define the TimePicker in XAML
At first it's really important that the page has set the KeepAlive flag. That's because of the implementation of the Picker Control, which needs to hold an ID to identify the current instance of the Picker Control. If the KeepAlive flag is missing the ID might change and the result of the FullPage Selector won't be accepted.

<Page x:Class="PickerControlDemo.Views.ExampleView"
      KeepAlive="True"  >

The following example shows how to define the TimePicker in XAML.

        <Picker:TimePicker 
            FullModeHeader="Select the time"
            Margin="{StaticResource WinMargin}" 
            IsTouchSelectionEnabled="True"
            Grid.Row="5" 
            Value="{Binding SelectedDate, Mode=TwoWay}"/>