We Keep Coding

Return to viewmodel disables canexcute of commands (Caliburn Micro - Windows Phone 8.1)

First time I'm using Caliburn Micro for Windows Phone 8.1.
I am using a button with a command doing the binding by convention, which executes a method in my viewmodel in which it has a "CanExecute". So far so good, but when I log in (method of this button) and return (log out) to my Login view, the commands of all the buttons on my login screen stop working (I believe the problem is in CanExecute ), Then it is no longer possible to login without having to exit the application and return.
Below are the methods used to login and logout and their "can execute".
Login (in LoginViewModel.cs):
public async void LoginCommand()
{
var retorno = await _loginService.LoginAsync(Usuario, Senha);
if (retorno.User != null)
{
Ambiente.Instance.Configuracao.Configurar(retorno.User);
Ambiente.Instance.Carregar();
DefinirEstadoInicial();
navigationService.NavigateToViewModel(typeof(HomeViewModel));
}
...
}
public bool CanLoginCommand
{
get { return !string.IsNullOrEmpty(Usuario) && !string.IsNullOrEmpty(Senha); }
}
private string _usuario;
public string Usuario
{
get { return _usuario; }
set
{
_usuario = value;
NotifyOfPropertyChange();
NotifyOfPropertyChange(() => CanLoginCommand);
}
}
private string _senha;
public string Senha
{
get { return _senha; }
set
{
_senha = value;
NotifyOfPropertyChange();
NotifyOfPropertyChange(() => CanLoginCommand);
}
}
Logout (in HomeViewModel.cs)
public async void SairCommand()
{
await MessageBox("Deseja fazer logout do aplicativo?", "Logout", textoBotaoEsquerda: "Não", codeBotaoDireita: new System.Action(() =>
{
Ambiente.Instance.Recarregar();
navigationService.NavigateToViewModel(typeof(LoginViewModel));
}), textoBotaoDireita: "Sim");
}
LoginView.xaml
<StackPanel Margin="0,30,0,0" Name="StackLogin">
<Image Source="ms-appx:///Assets/Images/logo_login#2x.png" MaxWidth="240" Stretch="UniformToFill" />
<TextBlock Text="Login" Margin="0,50,0,0" Style="{StaticResource PageTitle}"/>
<TextBlock Text="Use sua conta Muambator/Pacotes para continuar rastreando suas encomendas"
Margin="0,20,0,0"
TextWrapping="Wrap" Style="{StaticResource PageDescription}" HorizontalAlignment="Center" />
<Border Background="White" Margin="0,30,0,0" CornerRadius="3" MaxWidth="320">
<Grid VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="ms-appx:///Assets/Images/icon_login#2x.png" Margin="10,0,0,0" Width="20" />
<TextBox Grid.Column="1" Text="{Binding Path=Usuario, Mode=TwoWay}" PlaceholderText="LOGIN" Style="{StaticResource LoginTextBox}"/>
<Border Grid.ColumnSpan="2" BorderBrush="LightGray" BorderThickness="0,0,0,1" />
<Image Grid.Row="1" Source="ms-appx:///Assets/Images/icon_password#2x.png" Margin="10,0,0,0" Width="20" />
<PasswordBox Grid.Row="1" Grid.Column="1" x:Name="Senha" PlaceholderText="SENHA" Style="{StaticResource LoginPasswordBox}" VerticalAlignment="Center" />
<Button Click="MostrarEsqueciMinhaSenhaCommand_Click"
x:Name="MostrarEsqueciMinhaSenhaCommand"
Grid.Row="1"
Grid.Column="1"
Width="50"
Style="{StaticResource EsqueciMinhaSenhaButtonStyle}"
HorizontalAlignment="Right"/>
</Grid>
</Border>
<Button x:Name="LoginCommand" Width="322" Height="40" Margin="0,20,0,0" HorizontalAlignment="Stretch" Background="#6EAF2D" BorderThickness="0" Style="{StaticResource ButtonStyle}" >
<Grid>
<TextBlock Style="{StaticResource ButtonText}">ENTRAR</TextBlock>
<Image Margin="20,0,-75,0" Height="15" Source="ms-appx:///Assets/Images/icon_arrow_white_normal#2x.png" />
</Grid>
</Button>
</StackPanel>
Update 1:
The viewmodels are inheriting and implementing from "Screen" and "INotifyPropertyChangedEx"

The codebehind of LoginView.xaml had a line in which it caused the problem, just remove the line and everything worked perfectly.
This.NavigationCacheMode = NavigationCacheMode.Required;

Set button margin with auto window size

I've created a simple custom messagebox that automatically scales depending on the length of the text to be displayed :
public partial class CustomMessageBox : Window
{
public CustomMessageBox(string title, string text)
{
InitializeComponent();
ResizeMode = ResizeMode.NoResize;
label.Content = text;
Title = title;
}
public static void Show(string title, string text)
{
CustomMessageBox box = new CustomMessageBox(title, text);
box.SizeToContent = SizeToContent.WidthAndHeight;
box.ShowDialog();
}
private void button_Click(object sender, RoutedEventArgs e)
{
Close();
}
}
This works nicely however my button is clamping to the bottom side of the window because the window automatically scales :
And the button seems to be moving once the message gets longer :
How would I make sure the button stays centered and have a margin of around 10px from the bottom so it doesn't look that clamped?
I tried to set the Margin manually but that doesn't seem to work.
XAML (largely generated by the designer) :
<Window x:Class="RapidEvent.CustomMessageBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:RapidEvent"
mc:Ignorable="d"
Background="{DynamicResource WindowBackgroundBrush}"
Title="" Height="Auto" Width="Auto">
<Grid>
<StackPanel>
<Label x:Name="label" Content="" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Top" FontSize="13px" RenderTransformOrigin="0.392,0.486"/>
<Button x:Name="button" x:FieldModifier="public" IsDefault="True" Content="_Ok" HorizontalAlignment="Left" Margin="110,40,0,0" VerticalAlignment="Top" Width="80" Height="21" Click="button_Click"/>
</StackPanel>
</Grid>
</Window>

Simply change your StackPanel to a Grid and the HorizonalAlignment of your button to Center and take off all but the bottom margin. You'll also need to set the VerticalAlignment to Bottom. You also need to put the button on row 1.
This way the button will be clamped to the bottom of the dialog and always centred.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label x:Name="label" Content=""
HorizontalAlignment="Left" Margin="10,0,0,0"
VerticalAlignment="Top" FontSize="13px"
RenderTransformOrigin="0.392,0.486"/>
<Button Grid.Row="1" x:Name="button" x:FieldModifier="public"
IsDefault="True" Content="_Ok"
HorizontalAlignment="Center" Margin="0,0,0,20"
VerticalAlignment="Bottom" Width="80" Height="21"/>
</Grid>

Use grid instead of StackPanel:
<Grid >
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<telerik:Label x:Name="label" Content="LSFFD" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Top" FontSize="13px" RenderTransformOrigin="0.392,0.486"/>
<Button Grid.Row="1" x:Name="button" x:FieldModifier="public" Content="_Ok" HorizontalAlignment="Center" Margin="0 0 0 10" VerticalAlignment="Bottom" Width="80" Height="21" Click="button_Click"/>
</Grid>

Invalidate Thumb position when IsDirectionReversed changes

I'm using a slider control in a C# WPF application and want to offer the ability for users to invert the control on the fly.
I've already established that the slider control has a built in IsDirectionReversed property which works well for changing the direction of the control (effectively swapping its minimum and maximum values to opposite ends of the control). However, when the property is changed on the fly, the thumb position remains where it is (visually implying an incorrect value) but its value remains the same (as I would expect).
(After inverting the control, clicking anywhere on the track causes the thumb to update to either +1 or -1 of its current value but repositions the thumb into its correct visual position)
Can anyone suggest a way of forcing the thumb to update its position when the inverted property is changed?
XAML
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
Title="MainWindow" Height="139" Width="303">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Slider Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Name="SliderControl" HorizontalAlignment="Left" VerticalAlignment="Top" Width="276" IsDirectionReversed="{Binding Inverted}" Maximum="100" Minimum="1" SmallChange="1"/>
<TextBlock Grid.Row="2" Grid.Column="1" Text="Value:" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock Grid.Row="2" Grid.Column="2" Text="{Binding ElementName=SliderControl, Path=Value}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock Grid.Row="3" Grid.Column="1" Text="Inverted:" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock Grid.Row="3" Grid.Column="2" Text="{Binding ElementName=SliderControl, Path=IsDirectionReversed}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Button Grid.Row="4" Grid.Column="2" Content="Flip!" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
</Grid>
</Window>
C#
public partial class MainWindow : Window, INotifyPropertyChanged
{
public bool mSliderInverted = false;
public bool Inverted
{
get
{
return mSliderInverted;
}
}
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
mSliderInverted = !mSliderInverted;
OnPropertyChanged("Inverted");
}
protected void OnPropertyChanged(PropertyChangedEventArgs e)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
handler(this, e);
}
protected void OnPropertyChanged(string propertyName)
{
OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
}
public event PropertyChangedEventHandler PropertyChanged;
}

It seems flipping the IsDirectionInversed property doesn't cause the control to rerender, I'd say this is a bug in WPF (Bug in WPF!? No way!).
By trial and error, I discovered that if you invalidate the PART_Track part of the slider (The element that contains the RepeatButtons and the Thumb), it magically switches it around and everything works the way it should!
So if you just modify your Button_Click handler to look like this, everything should work just fine. :-)
private void Button_Click(object sender, RoutedEventArgs e)
{
mSliderInverted = !mSliderInverted;
OnPropertyChanged("Inverted");
// Retrieve the Track from the Slider control
var track = SliderControl.Template.FindName("PART_Track", SliderControl) as Track;
// Force it to rerender
track.InvalidateVisual();
}

Using A checkbox inside a ListBox

I have this List box:
Here is the Code for my ListBox:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox x:Name="List" Grid.Row="0" ItemsSource="{Binding ShoppingItems}" FontSize="42" FontWeight="Light" FontFamily="Segoe WP Light" HorizontalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Visible">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Margin="0,-15,0,22">
<Checkbox x:Name="MyCheckBox" IsChecked="{Binding IsChecked,Mode=TwoWay}"/>
</Grid>
<Grid x:Name="MyGrid" Margin="0,-15,0,22" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding DisplayingItem}" FontSize="46" Grid.Column="0" Grid.Row="0" TextWrapping="Wrap" />
<TextBlock Text="quantity" FontSize="32" Grid.Row="1" Margin="6,0,0,0" Grid.Column="0" TextWrapping="Wrap"/>
<TextBlock Text="{Binding DisplayingQuantity}" FontSize="32" Grid.Column="1" Grid.Row="1" Margin="32,0,12,12" TextWrapping="Wrap"/>
<TextBlock Grid.Column="2" Grid.Row="1" FontSize="32" Margin="32,0,12,12" Text="{Binding DisplayingPackaging}" TextWrapping="Wrap"/>
<TextBlock Text="price" Margin="6,0,0,0" FontSize="32" Grid.Row="2" Grid.Column="0" TextWrapping="Wrap"/>
<TextBlock Text="$" FontSize="32" Grid.Row="2" Grid.Column="1" Margin="32,0,12,12" TextWrapping="Wrap"/>
<TextBlock Grid.Column="3" FontSize="32" Grid.Row="2" Margin="32,0,12,12" Text="{Binding DisplayingPrice}" TextWrapping="Wrap"/>
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
it has a checkbox inside, the ListBox is populated by data from a SQLite db. I want when I check the Checkbox to receive a message showing me the name of the SelectedItem of the ListBox.
Here is the Property for my CheckBox
private bool isChecked;
public bool IsChecked
{
get
{
if(this.SelectedItem != null)
{
return this.selectedItem.IsChecked;
}
return false;
}
set
{
this.isChecked = value;
}
}
When I check my Checkbox and Click This Button:
private void CheckedItem(object p)
{
if (this.IsChecked != false)
{
MessageBox.Show("Checked");
}
}
Nothing Happens.
I have included my Checkbox in my SelectedItem Like this:
private ShowingModel selectedItem;
public ShowingModel SelectedItem
{
get
{
return selectedItem;
}
set
{
if(this.selectedItem != value)
{
this.selectedItem = value;
if (this.selectedItem != null)
{
this.product = selectedItem.DisplayingItem;
this.price = selectedItem.DisplayingPrice;
this.qty = selectedItem.DisplayingQuantity;
this.package = selectedItem.DisplayingPackaging;
this.isChecked = selectedItem.IsChecked;
}
RaisePropertyChanged("MyPackage");
RaisePropertyChanged("MyPrice");
RaisePropertyChanged("MyProduct");
RaisePropertyChanged("MyQty");
RaisePropertyChanged("IsChecked");
}
}
}
So Where is the Problem.

Not an answer but too much for a comment
This is just messed up
You need to read up on data binding and start over
The following get and set don't refer to the same value
private bool isChecked;
public bool IsChecked
{
get
{
if(this.SelectedItem != null)
{
return this.selectedItem.IsChecked;
}
return false;
}
set
{
this.isChecked = value;
}
}
No indication SelectedItem is bound to anything
On CheckedItem that is not the signature of an event handler

Like #Blam said your immediate problem is resolveable by actually setting an event handler for the CheckBox "MyCheckBox."
<CheckBox x:Name="MyCheckBox" IsChecked="{Binding IsChecked,Mode=TwoWay}"
Checked="MyCheckBox_Checked"/>
private void MyCheckBox_Checked(object sender, RoutedEventArgs e)
{
MessageBox.Show("Checked");
}
2 other things:
If you keep the property public ShowingModel SelectedItem, then I would move the RaisePropertyChanged inside of the if statement. Better yet, make each of the variables you're setting their own property like:
double MyPrice
{
get {return price;}
set { if(price >= 0.0)/* Don't want a negative price. \m/*/
{ price = value; RaisePropertyChanged("MyPrice"); } }
}
If you have it this way for deleting an item, then I would suggest making that clearer for future reference.
I would highly suggest you take a look at few other resources:
Databinding a listbox to an ObservableCollection in code. <-- The question was correct, and has the best way to do this.
Databinding a listbox to an ObservableCollection in XAML.
WPF Tutorial | DataTemplates.
Making the list item check the checkbox.

How to change a grid layout when orientation is changed

I'm creating a win8 app and I need to change the layout of my grid so everything fits on screen when the user flips between orientations. I understand I need to use VisualStateManager but I can't understand any tutorials. If I have this code:
<Grid>
<Button x:Name="button1" Margin="188,73,286,0" VerticalAlignment="Top"/>
<Button x:Name="button2" Margin="236,73,238,0" VerticalAlignment="Top"/>
<Button x:Name="button3" Margin="284,73,190,0" VerticalAlignment="Top"/>
</Grid>
How would I use visual state manager to change the buttons so they are now orientated in a column (one above the other) instead of in a row when the orientation is changed to portrait from landscape?
Thanks

xaml code
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" SizeChanged="Page_SizeChanged_1">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="FullScreenLandscape">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="Button1" HorizontalAlignment="Center" VerticalAlignment="Center"></Button>
<Button Content="Button2" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"></Button>
<Button Content="Button3" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center"></Button>
</Grid>
<Grid x:Name="Snapped">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Button Content="Button1" HorizontalAlignment="Center" VerticalAlignment="Center"></Button>
<Button Content="Button2" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"></Button>
<Button Content="Button3" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center"></Button>
</Grid>
</Grid>
C# code
private void Page_SizeChanged_1(object sender, SizeChangedEventArgs e)
{
switch (ApplicationView.Value)
{
case ApplicationViewState.FullScreenLandscape:
VisualStateManager.GoToState(this, "FullScreenLandscape", false);
Snapped.Visibility = Visibility.Collapsed;
break;
case ApplicationViewState.Snapped:
VisualStateManager.GoToState(this, "Snapped", false);
FullScreenLandscape.Visibility = Visibility.Collapsed;
Snapped.Visibility = Visibility.Visible;
break;
default:
return;
}
}
Another Method
xaml code
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="landscape">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBox x:Name="t1" Grid.Column="0" FontSize="24" Height="100"/>
<TextBox x:Name="t2" Grid.Column="1" FontSize="24" Height="100"/>
<TextBox x:Name="t3" Grid.Column="2" FontSize="24" Height="100"/>
</Grid>
<Grid x:Name="snap" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
</Grid>
</Grid>
C# code
private void Page_SizeChanged_1(object sender, SizeChangedEventArgs e)
{
if (Windows.UI.ViewManagement.ApplicationView.Value == Windows.UI.ViewManagement.ApplicationViewState.FullScreenLandscape)
{
landscape.Visibility = Windows.UI.Xaml.Visibility.Visible;
snap.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
t1.SetValue(Grid.ColumnProperty, 0);
t2.SetValue(Grid.ColumnProperty, 1);
if (t1.Parent != landscape)
{
snap.Children.Remove(t1);
snap.Children.Remove(t2);
landscape.Children.Add(t1);
landscape.Children.Add(t2);
}
}
else if(Windows.UI.ViewManagement.ApplicationView.Value == Windows.UI.ViewManagement.ApplicationViewState.Snapped)
{
landscape.Children.Remove(t1);
landscape.Children.Remove(t2);
landscape.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
snap.Visibility = Windows.UI.Xaml.Visibility.Visible;
t1.SetValue(Grid.RowProperty, 0);
t2.SetValue(Grid.RowProperty, 1);
if (t1.Parent != snap)
{
landscape.Children.Remove(t1);
landscape.Children.Remove(t2);
snap.Children.Add(t1);
snap.Children.Add(t2);
}
}
}