Issue MonthPicker Size with MVVM Light toolkit

问题

I've a strange issue with my monthpicker. It has a huge width at initialization.

I'm using MVVM Light Toolkit and it seems that's causing the issue.

Indeed, with a standard WPF application, the same code works...

Another hint, without the popup control, this code works with MVVM Light Toolkit.

Here is my code:

<Window x:Class="MvvmLight1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    SizeToContent="WidthAndHeight"
    Title="MVVM Light Application"
    DataContext="{Binding Main, Source={StaticResource Locator}}">
<Grid>

        <Popup IsOpen="{Binding ElementName=btn, Path=IsChecked}" StaysOpen="False" >

            <Calendar  x:Name="_calendar" 
                       Loaded="_calendar_OnLoaded" 
                       DisplayModeChanged="_calendar_DisplayModeChanged" 
                       DisplayMode="Month"  />
        </Popup>
        <ToggleButton  Height="50" Width="100" Content="Click me" x:Name="btn" ClickMode="Release"/>
</Grid>

And here is the code Behind:

using System.Windows;
using MvvmLight1.ViewModel;
using System.Windows.Controls;

namespace MvvmLight1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void _calendar_DisplayModeChanged(object sender, CalendarModeChangedEventArgs e)
        {
            _calendar.DisplayMode = CalendarMode.Year;

        }
        private void _calendar_OnLoaded(object sender, RoutedEventArgs e)
        {
            _calendar.DisplayMode = CalendarMode.Year;
        }
    }
}

And here the result:

Nothing fancy... I'm struggling with it for a while now.. Any help would be appreciated!

Thanks in advance!

回答1:

Ok so I've found a solution to my issue. I've removed the on_Loaded and the DisplayModeChanged method of the calendar and put its content into the popup opened event.

Here is the full code for the month picker.

The xaml code (the ressources for the button are from Mahapps Metro):

    <StackPanel Orientation="Horizontal" Grid.Row="1">
        <Label  Width="100" Height="25" Content="{Binding DateCalendar, Converter={StaticResource MonthConverter} }"/>
        <Popup IsOpen="{Binding ElementName=btn, Path=IsChecked}" StaysOpen="False" Opened="Popup_Opened" PlacementTarget="{Binding ElementName=btn}" Placement="Right" >
            <Calendar  x:Name="_calendar" 
                           DisplayDate="{Binding DateCalendar}"
                           DisplayDateChanged="_calendar_DisplayDateChanged" 
                           DisplayMode="Month"/>
        </Popup>
        <ToggleButton Style="{StaticResource CircleButton}"  x:Name="btn" ClickMode="Release" >
            <Rectangle Width="16" Height="16" Fill="Black">
                <Rectangle.OpacityMask>
                    <VisualBrush Stretch="Fill"  Visual="{DynamicResource appbar_calendar}" />
                </Rectangle.OpacityMask>
            </Rectangle>
        </ToggleButton>
    </StackPanel>

Here is the code behind:

    private void _calendar_DisplayDateChanged(object sender, CalendarDateChangedEventArgs e)
    {
    //If the user click the button of the calendar to change year, the calendar must remains open
        if (e.RemovedDate.HasValue && e.AddedDate.HasValue)
        {
            if (e.RemovedDate.Value.Year == e.AddedDate.Value.Year)
            {
                btn.IsChecked = false;
            }
        }
    }

    private void Popup_Opened(object sender, EventArgs e)
    {
        _calendar.DisplayMode = CalendarMode.Year;
    }

And the converter:

class FullDateToMonthConverter : IValueConverter
{

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return ((DateTime)value).ToString("MMMM yyyy");
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

I hope it'll be usefull for someone!

来源：https://stackoverflow.com/questions/40491255/issue-monthpicker-size-with-mvvm-light-toolkit