Silverlight DataGrid Updating SelectedItem from code - silverlight-3.0

When I update a datagrid SelectedItem from code (via a bound object in a ViewModel), how to I get the visual grid to highlight the newly selected item?
Thanks,
Mark
UPDATE: This is still an issue for me. My SelectedItem property already implements change notification, but the datagrid is not VISUALLY displaying which row has been selected - i.e. it is not getting highlighted.

I guess that you really verified that the SelectedItem has changed (you could set the Binding Mode to TwoWay temporarily to see if it works the other way round, by clicking the row you should see the highlight and SelectedItem's set-method executed). If yes, verify that you really exactly match the Property Name on PropertyChanged method invoke. Since you're not typesafe here, you might have made a spelling error. If no, check if your Databinding Attribute is set correctly. Another idea is that you might have changed the DataGrid's styles or template and now you are missing some of the Visual States. The DataGridRow can be styled using a style template. You have three selected states, called UnfocusedSelected (probably the right one), NormalSelected and MouseOverSelected.
You could try to make your own Visual State by using this template:
<Style TargetType="local:DataGridRow">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:DataGridRow">
<localprimitives:DataGridFrozenGrid Name="Root">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="NormalAlternatingRow">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="0"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To=".5"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="NormalSelected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="MouseOverSelected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="UnfocusedSelected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
<ColorAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Fill).Color" To="#FFE1E7EC"/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="ValidationStates">
<vsm:VisualState x:Name="Valid"/>
<vsm:VisualState x:Name="Invalid">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetName="InvalidVisualElement" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<Storyboard x:Key="DetailsVisibleTransition">
<DoubleAnimation Storyboard.TargetName="DetailsPresenter" Storyboard.TargetProperty="ContentHeight" Duration="00:00:0.1" />
</Storyboard>
</Grid.Resources>
<Rectangle x:Name="BackgroundRectangle" Grid.RowSpan="2" Grid.ColumnSpan="2" Opacity="0" Fill="#FFBADDE9"/>
<Rectangle x:Name="InvalidVisualElement" Grid.RowSpan="2" Grid.ColumnSpan="2" Opacity="0" Fill="#FFF7D8DB"/>
<localprimitives:DataGridRowHeader Grid.RowSpan="3" Name="RowHeader" localprimitives:DataGridFrozenGrid.IsFrozen="True" />
<localprimitives:DataGridCellsPresenter Grid.Column="1" Name="CellsPresenter" localprimitives:DataGridFrozenGrid.IsFrozen="True" />
<localprimitives:DataGridDetailsPresenter Grid.Row="1" Grid.Column="1" Name="DetailsPresenter" />
<Rectangle Grid.Row="2" Grid.Column="1" Name="BottomGridLine" HorizontalAlignment="Stretch" Height="1" />
</localprimitives:DataGridFrozenGrid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This is a copy-paste from a good MSDN Article on customizing the DataGrid Styles. You could, for example, modify the UnfocusedSelected part of the template and see if you see any change when, for example, adding a red border around it or something.
Maybe it's worth a try. I hope that you know how to apply own styles. If not, here is another MSDN Resource.
I know, these are just tips, but maybe helpful at last.

You need to implement the INotifyPropertyChanged interface on your ViewModel and have its SelectedItem property invoke the PropertyChanged event when its value is changes.

Related

Windows Phone ListBox/ScrollView control won't update

I'm new to Windows Phone 7.1 development. I work in VB.NET.
I'm working on an application similar with 'How to: Create a Basic Local Database Application for Windows Phone'.
I've managed to write the add and delete code using the sample above.
But the update code... when I return to the page where all the data is displayed, it won't update with the new informations. The information is save (submitted), because when I view the records details in a separate page, they are there.
The XAML page code where all the data is displayed is this:
<ScrollViewer Margin="12,148,12,90" Name="scrollViewerVendors">
<ItemsControl ItemsSource="{Binding AllVendors}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" CornerRadius="12" Margin="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" VerticalAlignment="Center">
<TextBlock Text="{Binding Name}" FontSize="28" />
</StackPanel>
<StackPanel Grid.Row="1" Grid.Column="0" Orientation="Horizontal" VerticalAlignment="Center">
<TextBlock Text="{Binding Address}" />
</StackPanel>
<Button Grid.Row="0" Grid.Column="1" Grid.RowSpan="2"
x:Name="EditVendorButton"
BorderThickness="1"
Click="EditVendorButton_Click">
<Image Source="/Images/AppBar/appbar.edit.rest.png" />
</Button>
<Button
Grid.Row="0" Grid.Column="2" Grid.RowSpan="2"
x:Name="DeleteVendorButton"
BorderThickness="1"
Click="DeleteVendorButton_Click">
<Image Source="/Images/AppBar/appbar.delete.rest.png" />
</Button>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
The update code I've written in the Edit page:
Using DemoAppDB As New DemoAppContext.DemoAppContext("Data Source=isostore:/DemoApp.sdf")
Dim CurrentVendor = From VendorDetails In DemoAppDB.Vendors Where VendorDetails.VendorID = CInt(sVendorID) Select VendorDetails
For Each Vendor In CurrentVendor
Vendor.Name = TextBox1.Text
Vendor.Address = TextBox2.Text
Vendor.ContactPerson = TextBox3.Text
Vendor.Phone = TextBox4.Text
Vendor.Email = TextBox5.Text
Vendor.Notes = TextBox6.Text
Next
'Save changes to the database
DemoAppDB.SubmitChanges()
End Using
The VendorID is passed successfully betweend pages. I've checked.
The database updates, but I can't seem to get the ScrollView record to update. I've also tried with a ListView control.. same result.
The model class Implements INotifyPropertyChanged, INotifyPropertyChanging.
The viewmodel class Implements INotifyPropertyChanged.
If you need any other details, please ask me. Thank you for reading this!
Having had a look at the tutorial I'd say you've missed off
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
// Define the query to gather all of the to-do items.
var toDoItemsInDB = from ToDoItem todo in toDoDB.ToDoItems
select todo;
// Execute the query and place the results into a collection.
ToDoItems = new ObservableCollection<ToDoItem>(toDoItemsInDB);
// Call the base method.
base.OnNavigatedTo(e);
}
where, for you, you'd be updating AllVendors.
What is happening here is that, after the app has navigated back to the main page it is reloading the ObservableCollection that holds the data.

Get click event of a button placed in App.xaml

I have a style in my App.xaml page as shown below
<Style x:Key="ListBoxMore" TargetType="ListBox">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Visible"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}">
<StackPanel>
<ItemsPresenter/>
<Button Content="Load More..." Click="btnLoadMore_Click" Name="btnLoadMore" Visibility="Visible" Background="White" Foreground="Black"></Button>
</StackPanel>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am using this style in 4 different pages. I need to get the click event of the "Load More" button in those pages. How can I get this in my windows phone application?
You can't.
Instead, try using a Command which you can bind to the ViewModel.
Alternatively, turn your restyled listbox into a custom control and then you can have a centralised eventhandler there.

Wpf animation - like shaking icons on iOS

I would like to have an image animation in wpf where the image shakes lightly in order to delete it, as it happens for apps in iOS.
Do you know something that would help ? Something that already built?
Thanks a lot.
Here's a complete sample of shaking the text of button. You should be able to adapt this to shake an image, and improve it using easing functions.
<Grid.Resources>
<ControlTemplate x:Key="ShakingButtonTemplate" TargetType="Button">
<Border Margin="5" BorderBrush="Aquamarine" BorderThickness="5" CornerRadius="5">
<ContentPresenter HorizontalAlignment="Center" Content="{TemplateBinding Content}">
<ContentPresenter.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="Position"/>
</TransformGroup>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard x:Name="ShakeIt">
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="Position"
Storyboard.TargetProperty="X"
RepeatBehavior="5x"
>
<EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="2"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.20" Value="-2"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<!--
<DoubleAnimation
Storyboard.TargetName="Position"
Storyboard.TargetProperty="X"
From="-2" To="2"
Duration="0:0:0:0.1"
AutoReverse="True"
RepeatBehavior="10x">
</DoubleAnimation>
-->
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="ShakingButton" TargetType="Button">
<Setter Property="Template" Value="{StaticResource ShakingButtonTemplate}"/>
</Style>
</Grid.Resources>
<StackPanel>
<Button Style="{StaticResource ShakingButton}" Content="This is a button" />
</StackPanel>

Styling TimePicker control

I'm trying style the TimePicker control that appears on the form so that the text colour changes accordingly to the phone's style with a transparent background. For normal text, I just use:
Style="{StaticResource PhoneTextNormalStyle}"
However, this won't work for the TimePicker and I get an error when I try to build the project.
Sorry for the severe lack of detail right now, I current don't have access to my development box right now. When I get home I'll post a screenshot of the control and the error.
The easy way to do this would be in Expression Blend. Open up the project in there, right-click on the control and select "Edit Style" -> "Edit a copy". This will put a style element into the page.resources section that looks like the following snippet
<Style x:Key="TimePickerStyle1" TargetType="toolkit:TimePicker">
<Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="PickerPageUri" Value="/Microsoft.Phone.Controls.Toolkit;component/DateTimePickers/TimePickerPage.xaml"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:TimePicker">
<StackPanel>
<ContentControl ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{StaticResource PhoneSubtleBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="12,0,12,-4"/>
<Button x:Name="DateTimeButton" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Content="{TemplateBinding ValueString}" Foreground="{TemplateBinding Foreground}" FontFamily="{TemplateBinding FontFamily}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Height="72"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and your control definition will look like this:
<toolkit:TimePicker Name="TimePickerInstance" Style="{StaticResource TimePickerStyle1}"></toolkit:TimePicker>
Of course, you can put this snippet in there yourself, and reference it in the same way in the control. It will all work the same way - Expression Blend just makes the process of doing it much simpler.
You should be able to manipulate that as you need to from there, probably changing the 2nd and 4th lines to
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
Hope that helps.

WP7 - group of textboxes into some sort of template?

I'm still pretty new at Silverlight so there might be a way to do this, but I'm just unfamiliar with the terminology...
I basically have this grouping of textboxes and textblocks and I would like to repeat this same grouping whenever the addNew button is clicked. Is there a way to do this by creating some sort of template? Or do I have to add each item individually.
<Grid>
<toolkit:ListPicker Height="70" HorizontalAlignment="Right" Name="listPicker1" VerticalAlignment="Top" Width="56" ItemTemplate="{StaticResource PickerItemTemplate}" FullModeItemTemplate="{StaticResource PickerFullModeItemTemplate}" Margin="0,97,167,0"></toolkit:ListPicker>
<TextBlock Height="33" HorizontalAlignment="Left" Margin="10,7,0,0" Name="tbDate" Text="Date:" VerticalAlignment="Top" Width="266" />
<TextBlock Height="42" HorizontalAlignment="Left" Margin="9,55,0,0" Name="tbItem" Text="Item:" VerticalAlignment="Top" Width="90" />
<TextBox Height="75" HorizontalAlignment="Left" Margin="92,33,0,0" Name="tbItemName" Text="" VerticalAlignment="Top" Width="341" />
<TextBlock Height="42" HorizontalAlignment="Left" Margin="5,118,0,0" Name="tbServing" Text="Serving:" VerticalAlignment="Top" Width="99" />
<TextBox Height="70" HorizontalAlignment="Left" Margin="90,96,0,0" Name="tbServingValue" Text="" VerticalAlignment="Top" Width="75" />
<TextBlock Height="42" HorizontalAlignment="Left" Margin="156,120,0,0" Name="tbUOM" Text="UOM:" VerticalAlignment="Top" Width="60" />
<Button Content="" HorizontalAlignment="Right" Height="63" Margin="0,100,13,0" VerticalAlignment="Top" Width="132" RenderTransformOrigin="0.455,0.286" Style="{StaticResource wp7_buttonAddNew}" x:Name="btnAddNewItem" Click="btnAddNewItem_Click"/>
</Grid>
Thanks!
Merry Christmas!
Yes, you can create a template using a DataTemplate and then very easy using this datatemplate everywhere and whenever you want. You can have a look here: DataTemplate for some examples and full details.
Hint: When you put the DataTemplate in the resources, you can access it and use it many times.
I hope this helps. Cheers.
A User Control is another option that may be worth considering for your requirements.
Here's a walkthrough.
Snowfall (User Control Sample)

Resources