Click here to Skip to main content
14,661,016 members
Rate this:
Please Sign up or sign in to vote.
See more:
Hi, am trying to achieve the functionality of Outlook style of Datepicker control.

I have a textbox which am applying a style which looks exactly same as in Outlook but my problem is popup having a calendar and two button as Today and none.As soon as click on Today button the textbox value should set to todays date and if i click None the text box value has to set as none.

The style i have used is
<Style x:Key="tbCalendarStyle" TargetType="{x:Type TextBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Grid>
                        <Border BorderThickness="1" BorderBrush="DarkGray">
                            <ScrollViewer x:Name="PART_ContentHost" />
                        </Border>
                        <ToggleButton Template="{StaticResource IconButton}"

                              MaxHeight="21" 

                              Margin="-1,0,0,0" 

                              Name="PopUpImageButton" 

                              Focusable="False"

                              IsChecked="False">
                            <ToggleButton.Content>
                                <Path x:Name="btnArrow4" Margin="4" VerticalAlignment="Center" Width="10" Fill="Black" Stretch="Uniform" HorizontalAlignment="Right" Data="F1 M 301.14,-189.041L 311.57,-189.041L 306.355,-182.942L 301.14,-189.041 Z "/>
                            </ToggleButton.Content>                        
                            

                        </ToggleButton>
                        <Popup IsOpen="{Binding Path=IsChecked, ElementName=PopUpImageButton, Mode=TwoWay}" x:Name="CustomPopup" Margin="0,-1,0,0" PopupAnimation="Fade" StaysOpen="False">
                           
                            <StackPanel Orientation="Vertical" removed="BlueViolet">
                                <Grid >
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="164"/>
                                        <RowDefinition Height="10"/>
                                    </Grid.RowDefinitions>
                                    <Calendar Grid.Row="0" Margin="0,-1,0,0" x:Name="CalDisplay"

                                      SelectedDate="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Text, Mode=TwoWay, Converter={StaticResource calendarConverter}}" 

                                      Focusable="False" 

                                      DisplayDate="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Text, Mode=OneWay, Converter={StaticResource calendarConverter}}"    

                                      >
                                        <Control.Triggers>
                                            <EventTrigger RoutedEvent="Calendar.SelectedDatesChanged">
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <BooleanAnimationUsingKeyFrames Storyboard.TargetName="PopUpImageButton" Storyboard.TargetProperty="IsChecked">
                                                            <DiscreteBooleanKeyFrame KeyTime="00:00:00" Value="False"></DiscreteBooleanKeyFrame>
                                                        </BooleanAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger>
                                        </Control.Triggers>
                                    </Calendar>
                                </Grid>
                                <StackPanel Orientation="Horizontal" FlowDirection="LeftToRight">
                                    <Button Content="Today" Grid.Row="1" Width="50" VerticalAlignment="Center" Margin="20 0 0 10" Name="btnToday">
                                        <Button.Triggers>
                                            <EventTrigger RoutedEvent="Button.Click">
                                                // what should i do to achieve the above logic
                                            </EventTrigger>
                                        </Button.Triggers>
                                    </Button>

                                    <Button Content="None" Grid.Row="1" Margin="30 0 0 10" Width="50" VerticalAlignment="Center" Name="btnNone">
                                        <Button.Triggers>
                                            <EventTrigger RoutedEvent="Button.Click">

                                            </EventTrigger>
                                        </Button.Triggers>
                                    </Button>
                                </StackPanel>
                            </StackPanel>
                        </Popup>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Visibility" TargetName="PopUpImageButton" Value="Visible" />
                        </Trigger>
                        <Trigger Property="IsFocused" Value="true">
                            <Setter Property="Visibility" TargetName="PopUpImageButton" Value="Visible" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>



Any help or idea to achieve this would be highly appreciated.
Posted
Updated 6-Jun-18 21:13pm
v2

Rate this:
Please Sign up or sign in to vote.

Solution 1

If can try following:
<Button Content="Today" Grid.Row="1" Width="50" VerticalAlignment="Center" Margin="20 0 0 10" Name="btnToday" Command="{Binding MyCommand}"/>

In your viewModel you need to write follwoing:
private ICommand _myCommand;
public ICommand MyCommand
{
    get
    {
        if (_myCommand != null) return _myCommand;

        _myCommand = new RelayCommand(OnClick);
        return _myCommand;
    }
}

And your method for this command should look like :
private void OnClick(object sender)
{
//your code
}
   
Comments
keerth516 7-Nov-13 12:25pm
   
Thanks Alexander !!! unfortunately am not using MVVM structure in WPF at this moment.Any other idea or process to achieve this?
Alexander Dymshyts 8-Nov-13 2:43am
   
Did you try to use Click event?
keerth516 8-Nov-13 5:32am
   
Thanks for the help , i figured out my problem and implmented ausercontrol
Alexander Dymshyts 8-Nov-13 5:37am
   
You are welcome
Rate this:
Please Sign up or sign in to vote.

Solution 3

If you have a custom control then I suggest you to override the method OnApplyTemplate and use GetTemplatedChild to find the Button, subscribe to its click and thats it except you will have to find the TextBox and set its Text inside the handler.

If you cannot do so for whatever reason here is a small trick how to make it still work

1.Take a look at this:


<resourcedictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WPFControls.Generic"
xmlns:local="clr-namespace:WPFControls">


<setter property="Template">
<setter.value>
<controltemplate targettype="{x:Type local:MyChildControl}">
<border background="{TemplateBinding Background}">
SnapsToDevicePixels="True"&gt;
<stackpanel>
<textbox x:name="tbx1" xmlns:x="#unknown" />
<button content="{TemplateBinding Content}" click="OnClick" />
</stackpanel>
</border>
</controltemplate>
</setter.value>
</setter>

....

2.and add this code
public partial class Generic
{
public void OnClick(object sender, RoutedEventArgs e)
{
MyChildControl control = FindAncestor<mychildcontrol>((DependencyObject)sender);
TextBox tbx = control.Template.FindName("tbx1", control) as TextBox;
tbx.Text = "It works!";
}

public static T FindAncestor<t>(DependencyObject current) where T : DependencyObject
{
current = VisualTreeHelper.GetParent(current);

while (current != null)
{
if (current is T)
{
return (T)current;
}

current = VisualTreeHelper.GetParent(current);
};

return null;
}
}

3.This is mine MainWindow.xaml:

<window ....="">
<grid>
<local:mychildcontrol content="Click me!" xmlns:local="#unknown">

   
Comments
keerth516 19-Nov-13 8:39am
   
I have created a user control for this instead of custom control...thanks
Rate this:
Please Sign up or sign in to vote.

Solution 4

Created user control for the above outlook style time picker control
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100