horizontalalignment - Developer IT

Silverlight 3: ListBox DataTemplate HorizontalAlignment

- by Lee

I have a ListBox with it's ItemTemplate bound to a DataTemplate. My problem is I cannot get the elements in the template to stretch to the full width of the ListBox. <ListBox x:Name="listPeople" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0,0,0,0" Background="{x:Null}" SelectionMode="Extended" Grid.Row="1" ItemTemplate="{StaticResource PersonViewModel.BrowserDataTemplate}" ItemsSource="{Binding Mode=OneWay, Path=SearchResults}" > </ListBox> <DataTemplate x:Key="PersonViewModel.BrowserDataTemplate"> <ListBoxItem HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5,5,5,5"> <Border Opacity=".1" x:Name="itemBorder" Background="#FF000000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="5,5,5,5" MinWidth="100" Height="50"/> </Grid> </ListBoxItem> </DataTemplate> As you can see, I have added a border within the grid to indicate the width of the template. My goal is to see this border expand to the full width of the listbox. Currently its width is determined by its contents or MinWidth, which is the only thing at the moment keeping it visible at all.

Read the article

Considering HorizontalAlignment and VerticalAlignment while creating a custom panel

- by sudarsanyes

I am trying to create a custom panel in wpf. Here the doubts I have, How do I consider the HorizontalAlignment and VerticalAlignment factors while placing the items within my panel. Should I check for these flags in my ArrangeOverride method ?? Consider that I want to write a WrapPanel clone. If the panel's width is set to "Auto", how do I get the actual width of the panel to arrange my child items. I always get the ActualWidth/ActualHeight as 0. Am I missing something??? Please help.

Read the article

Visibility.Collapse does not work in WPF

- by nitin

Visibility.Collapse doesnt work in my case. below is the XAML. If i try to hide the lblCountry and cmbCountry a white space is shown between zip and practice fields. There is no option to hide an entire row of a Grid. <Grid> <Canvas Name="canDemographic" > </Canvas> <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid.ColumnDefinitions> <ColumnDefinition Width="auto"/> <ColumnDefinition Width="auto"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="40"/> <RowDefinition Height="40" /> <RowDefinition Height="40" /> <RowDefinition Height="40" /> <RowDefinition Height="40" /> <RowDefinition Height="40"/> <RowDefinition Height="40"/> <RowDefinition Height="40"/> <RowDefinition Height="40"/> <RowDefinition Height="40"/> <RowDefinition Height="40"/> <RowDefinition Height="40"/> <RowDefinition Height="40"/> </Grid.RowDefinitions> <TextBlock Width="800" Height="50" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="Arial" FontSize="30" FontWeight="Bold" Visibility="Collapsed"> Please review or enter your user information details: </TextBlock> <TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold"> *First Name: </TextBlock> <TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="3" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Text=" Middle Name:"></TextBlock> <TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="4" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold"> *Last Name: </TextBlock> <TextBlock Name="tbEmail" Width="200" Height="30" Grid.Column="0" Grid.Row="12" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold"> *Email Address: </TextBlock> <TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="5" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold"> *Address1: </TextBlock> <TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="6" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Text=" Address2:"></TextBlock> <TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="7" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold"> *City: </TextBlock> <TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="8" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold"> *State: </TextBlock> <TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="9" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold"> *Zip: </TextBlock> <TextBlock Name="lblCountry" Width="200" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="10" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Text=" *Country:" Visibility="Collapsed"="></TextBlock> <TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="11" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Text=" Practice/Affiliation:"></TextBlock>  <TextBox Name="txtFirstName" Width="200" Height="30" Grid.Column="1" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" MaxLength="20" TextChanged="txtFirstName_TextChanged" IsEnabled="True" /> <TextBox Name="txtMiddleName" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Grid.Column="1" Grid.Row="3" MaxLength="10" IsEnabled="True" /> <TextBox Name="txtLastName" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Grid.Column="1" Grid.Row="4" MaxLength="20" TextChanged="txtLastName_TextChanged" /> <TextBox Name="txtEmail" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Grid.Column="1" Grid.Row="12" MaxLength="100"/> <TextBox Name="txtAddress1" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Grid.Column="1" Grid.Row="5" MaxLength="100" TextChanged="txtAddress1_TextChanged" /> <TextBox Name="txtAddress2" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Grid.Column="1" Grid.Row="6" MaxLength="100"/> <TextBox Name="txtCity" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Grid.Column="1" Grid.Row="7" MaxLength="50" TextChanged="txtCity_TextChanged" /> <TextBox Name="txtState" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Grid.Column="1" Grid.Row="8" MaxLength="50" TextChanged="txtState_TextChanged" /> <TextBox Name="txtZip" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Grid.Column="1" Grid.Row="9" MaxLength="50" TextChanged="txtZip_TextChanged" /> <ComboBox Name="cmbCountry" Width="200" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Grid.Column="0" Grid.Row="10" Grid.ColumnSpan="2" SelectionChanged="cmbCountry_SelectionChanged" ItemsSource="{Binding}" Visibility="Collapsed" /> <TextBox Name="txtPractice" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Grid.Column="1" Grid.Row="11" MaxLength="50"/> </Grid> <Button Name="btnExit" Height="30" VerticalAlignment="Bottom" Width="100" HorizontalAlignment="Left" Margin="21,0,0,12" BorderThickness="1" FontFamily="arial" Background="LightGray" FontSize="12pt" FontWeight="Bold" Click="btnExit_Click">Back</Button> <Button Name="btnNext" Height="30" VerticalAlignment="Bottom" Width="100" HorizontalAlignment="Right" Margin="0,0,21,12" BorderThickness="1" FontFamily="arial" Background="LightGray" FontSize="12pt" FontWeight="Bold" Click="btnNext_Click" IsEnabled="False" >Next</Button> </Grid> </ScrollViewer>

Read the article

Visibility.Collapse doesnt work

- by nitin

Visibility.Collapse doesnt work in my case. below is the XAML. If i try to hide the lblCountry and cmbCountry a white space is shown between zip and practice fields. There is no option to hide an entire row of a Grid. <Grid> <Canvas Name="canDemographic" > </Canvas> <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid.ColumnDefinitions> <ColumnDefinition Width="auto"/> <ColumnDefinition Width="auto"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="40"/> <RowDefinition Height="40" /> <RowDefinition Height="40" /> <RowDefinition Height="40" /> <RowDefinition Height="40" /> <RowDefinition Height="40"/> <RowDefinition Height="40"/> <RowDefinition Height="40"/> <RowDefinition Height="40"/> <RowDefinition Height="40"/> <RowDefinition Height="40"/> <RowDefinition Height="40"/> <RowDefinition Height="40"/> </Grid.RowDefinitions> <TextBlock Width="800" Height="50" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="Arial" FontSize="30" FontWeight="Bold" Visibility="Collapsed"> Please review or enter your user information details: </TextBlock> <TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold"> *First Name: </TextBlock> <TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="3" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Text=" Middle Name:"></TextBlock> <TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="4" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold"> *Last Name: </TextBlock> <TextBlock Name="tbEmail" Width="200" Height="30" Grid.Column="0" Grid.Row="12" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold"> *Email Address: </TextBlock> <TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="5" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold"> *Address1: </TextBlock> <TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="6" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Text=" Address2:"></TextBlock> <TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="7" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold"> *City: </TextBlock> <TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="8" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold"> *State: </TextBlock> <TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="9" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold"> *Zip: </TextBlock> <TextBlock Name="lblCountry" Width="200" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="10" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Text=" *Country:" Visibility="Collapsed"="></TextBlock> <TextBlock Width="200" Height="30" Grid.Column="0" Grid.Row="11" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Text=" Practice/Affiliation:"></TextBlock>  <TextBox Name="txtFirstName" Width="200" Height="30" Grid.Column="1" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" MaxLength="20" TextChanged="txtFirstName_TextChanged" IsEnabled="True" /> <TextBox Name="txtMiddleName" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Grid.Column="1" Grid.Row="3" MaxLength="10" IsEnabled="True" /> <TextBox Name="txtLastName" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Grid.Column="1" Grid.Row="4" MaxLength="20" TextChanged="txtLastName_TextChanged" /> <TextBox Name="txtEmail" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Grid.Column="1" Grid.Row="12" MaxLength="100"/> <TextBox Name="txtAddress1" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Grid.Column="1" Grid.Row="5" MaxLength="100" TextChanged="txtAddress1_TextChanged" /> <TextBox Name="txtAddress2" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Grid.Column="1" Grid.Row="6" MaxLength="100"/> <TextBox Name="txtCity" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Grid.Column="1" Grid.Row="7" MaxLength="50" TextChanged="txtCity_TextChanged" /> <TextBox Name="txtState" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Grid.Column="1" Grid.Row="8" MaxLength="50" TextChanged="txtState_TextChanged" /> <TextBox Name="txtZip" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Grid.Column="1" Grid.Row="9" MaxLength="50" TextChanged="txtZip_TextChanged" /> <ComboBox Name="cmbCountry" Width="200" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Grid.Column="0" Grid.Row="10" Grid.ColumnSpan="2" SelectionChanged="cmbCountry_SelectionChanged" ItemsSource="{Binding}" Visibility="Collapsed" /> <TextBox Name="txtPractice" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Arial" FontSize="18" FontWeight="Bold" Grid.Column="1" Grid.Row="11" MaxLength="50"/> </Grid> <Button Name="btnExit" Height="30" VerticalAlignment="Bottom" Width="100" HorizontalAlignment="Left" Margin="21,0,0,12" BorderThickness="1" FontFamily="arial" Background="LightGray" FontSize="12pt" FontWeight="Bold" Click="btnExit_Click">Back</Button> <Button Name="btnNext" Height="30" VerticalAlignment="Bottom" Width="100" HorizontalAlignment="Right" Margin="0,0,21,12" BorderThickness="1" FontFamily="arial" Background="LightGray" FontSize="12pt" FontWeight="Bold" Click="btnNext_Click" IsEnabled="False" >Next</Button> </Grid> </ScrollViewer>

Read the article

strange sqares like hints in Silverlight application?

- by lina

Good day! Strange square appears on mouse hover on text boxes, buttons, etc (something like hint) in a silverlight navigation application - how can I remove it? a scrin shot an example .xaml page: <Code:BasePage x:Class="CAP.Views.Main" 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" mc:Ignorable="d" xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" xmlns:Code="clr-namespace:CAP.Code" d:DesignWidth="640" d:DesignHeight="480" Title="?????? ??????? ???????? ??? ?????"> <Grid x:Name="LayoutRoot"> <Grid.RowDefinitions> <RowDefinition Height="103*" /> <RowDefinition Height="377*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="120*" /> <ColumnDefinition Width="520*" /> </Grid.ColumnDefinitions> <Image Height="85" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="84" Margin="12,0,0,0" ImageFailed="image1_ImageFailed" Source="/CAP;component/Images/My-Computer.png" /> <TextBlock Grid.Column="1" Height="Auto" TextWrapping="Wrap" HorizontalAlignment="Left" Margin="0,12,0,0" Name="textBlock1" Text="Good day!" VerticalAlignment="Top" FontFamily="Verdana" FontSize="16" Width="345" FontWeight="Bold" /> <TextBlock Grid.Column="1" Grid.Row="1" TextWrapping="Wrap" Height="299" HorizontalAlignment="Left" Name="textBlock2" VerticalAlignment="Top" FontFamily="Verdana" FontSize="14" Width="441" > <Run Text="Some text "/><LineBreak/><LineBreak/><Run Text="and so on"/> <LineBreak/> </TextBlock> </Grid> xaml.cs: using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using System.Windows.Navigation; using CAP.Code; namespace CAP.Views { public partial class Main : BasePage { public Main() : base() { InitializeComponent(); MapBuilder.AddToMap(new SiteMapUnit() { Caption = "???????", RelativeUrl = "Main" },true); ((App)Application.Current).Mainpage.tvMainMenu.SelectedItems.Clear(); } // Executes when the user navigates to this page. protected override void OnNavigatedTo(NavigationEventArgs e) { } private void image1_ImageFailed(object sender, ExceptionRoutedEventArgs e) { } protected override string[] NeededPermission() { return new string[0]; } } } MainPage.xaml <UserControl x:Class="CAP.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Code="clr-namespace:CAP.Code" xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" xmlns:uriMapper="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation" mc:Ignorable="d" Margin="0,0,0,0" Width="auto" Height="auto" xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"> <ScrollViewer Width="auto" Height="auto" BorderBrush="White" BorderThickness="0" Margin="0,0,0,0" x:Name="sV" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" > <ScrollViewer.Content> <Grid Width="auto" Height="auto" x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}" Margin="0,0,0,0"> <StackPanel Width="auto" Height="auto" Orientation="Vertical" Margin="250,0,0,50"> <Border x:Name="ContentBorder2" Margin="0,0,0,0" >  <StackPanel Orientation="Vertical" Height="82" Width="Auto" HorizontalAlignment="Right" Margin="0,0,0,0" DataContext="{Binding}"> <TextBlock HorizontalAlignment="Right" Foreground="White" x:Name="ApplicationNameTextBlock4" Style="{StaticResource ApplicationNameStyle}" FontSize="20" Text="?????? ???????" Margin="20,16,20,0"/> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Image x:Name="imDoor" Visibility="Collapsed" MouseEnter="imDoor_MouseEnter" MouseLeave="imDoor_MouseLeave" Height="24" Stretch="Fill" Width="25" Margin="10,0,10,0" Source="/CAP;component/Images/sm_white_doors.png" MouseLeftButtonDown="bTest_Click" /> <TextBlock x:Name="bLogout" MouseEnter="bLogout_MouseEnter" MouseLeave="bLogout_MouseLeave" TextDecorations="Underline" Margin="0,6,20,4" Height="23" Text="?????" HorizontalAlignment="Right" Visibility="Collapsed" MouseLeftButtonDown="bTest_Click" FontFamily="Verdana" FontSize="13" FontWeight="Normal" Foreground="#FF1C1C92" /> </StackPanel> </StackPanel> </Border> <Border x:Name="bSiteMap" Margin="0,0,0,0" > <StackPanel x:Name="spSiteMap" Orientation="Horizontal" Height="20" Width="Auto" HorizontalAlignment="Left" Margin="0,0,0,0" DataContext="{Binding}">  </StackPanel> </Border> <Border Width="auto" Height="auto" x:Name="ContentBorder" Margin="0,0,0,0" > <navigation:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}" Source="Main" Navigated="ContentFrame_Navigated" NavigationFailed="ContentFrame_NavigationFailed" ToolTipService.ToolTip=" " Margin="0,0,0,0"> <navigation:Frame.UriMapper> <uriMapper:UriMapper>  <uriMapper:UriMapping Uri="RegistrateClient" MappedUri="/Views/Client/RegistrateClient.xaml"/>  </uriMapper:UriMapper> </navigation:Frame.UriMapper> </navigation:Frame> </Border> </StackPanel> <Grid x:Name="NavigationGrid" Style="{StaticResource NavigationGridStyle}" Margin="0,0,0,0" Background="{x:Null}" > <StackPanel Orientation="Vertical" Height="Auto" Width="250" HorizontalAlignment="Center" Margin="0,0,0,50" DataContext="{Binding}"> <Image Width="150" Height="90" HorizontalAlignment="Center" VerticalAlignment="Top" Source="/CAP;component/Images/logo__au.png" Margin="0,20,0,70"/> <Border x:Name="BrandingBorder" MinHeight="222" Width="250" Style="{StaticResource BrandingBorderStyle3}" HorizontalAlignment="Center" Opacity="60" Margin="0,0,0,0"> <Border.Background> <ImageBrush ImageSource="/CAP;component/Images/papka.png"/> </Border.Background> <Grid Width="250" x:Name="LichniyCabinet" Margin="0,10,0,0" HorizontalAlignment="Center" Height="211"> <Grid.ColumnDefinitions> <ColumnDefinition Width="19*" /> <ColumnDefinition Width="62*" /> <ColumnDefinition Width="151*" /> <ColumnDefinition Width="18*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="13" /> <RowDefinition Height="24" /> <RowDefinition Height="35" /> <RowDefinition Height="35" /> <RowDefinition Height="43" /> <RowDefinition Height="28" /> <RowDefinition Height="32*" /> </Grid.RowDefinitions> <TextBlock Visibility="Visible" Grid.Row="2" Height="23" HorizontalAlignment="Left" x:Name="tLogin" Text="?????" VerticalAlignment="Top" FontFamily="Verdana" FontSize="13" Foreground="White" Margin="1,0,0,0" Grid.Column="1" /> <TextBlock Visibility="Visible" FontFamily="Verdana" FontSize="13" Foreground="White" Height="23" HorizontalAlignment="Left" x:Name="tPassw" Text="??????" VerticalAlignment="Top" Grid.Row="3" Grid.Column="1" /> <TextBox Visibility="Visible" Grid.Column="2" Grid.Row="2" Height="24" HorizontalAlignment="Left" x:Name="logLogin" VerticalAlignment="Top" Width="150" /> <PasswordBox Visibility="Visible" Code:DefaultButtonService.DefaultButton="{Binding ElementName=bLogin}" PasswordChar="*" Height="24" HorizontalAlignment="Left" x:Name="logPassword" VerticalAlignment="Top" Width="150" Grid.Column="2" Grid.Row="3" /> <Button x:Name="bLogin" MouseEnter="bLogin_MouseEnter" MouseLeave="bLogin_MouseLeave" Visibility="Visible" Content="?????" Grid.Column="2" Grid.Row="4" Click="Button_Click" Height="23" HorizontalAlignment="Left" Margin="81,0,0,0" VerticalAlignment="Top" Width="70" /> <TextBlock MouseLeftButtonDown="ForgotPassword_MouseLeftButtonDown" MouseEnter="ForgotPassword_MouseEnter" MouseLeave="ForgotPassword_MouseLeave" Visibility="Visible" TextDecorations="Underline" Grid.ColumnSpan="2" Grid.Row="4" Height="23" HorizontalAlignment="Left" x:Name="ForgotPassword" Text="?????? ???????" VerticalAlignment="Top" Foreground="White" FontFamily="Verdana" FontSize="13" Grid.Column="1" /> <TextBlock MouseEnter="tbRegistration_MouseEnter" MouseLeave="tbRegistration_MouseLeave" MouseLeftButtonDown="tbRegistration_MouseLeftButtonDown" Grid.Column="2" Grid.Row="6" Height="23" x:Name="tbRegistration" TextDecorations="Underline" Text="???????????" VerticalAlignment="Top" FontFamily="Verdana" FontSize="13" TextAlignment="Center" HorizontalAlignment="Center" Foreground="#FF1C1C92" FontWeight="Normal" Margin="0,0,57,0" /> <TextBlock Cursor="Arrow" Height="23" HorizontalAlignment="Left" Margin="11,-3,0,0" Text="?????? ???????" VerticalAlignment="Top" Grid.ColumnSpan="3" Grid.RowSpan="2" FontFamily="Verdana" FontSize="13" FontWeight="Bold" Foreground="White" /> <Image Visibility="Collapsed" Height="70" x:Name="imUser" Stretch="Fill" Width="70" Grid.ColumnSpan="2" Margin="11,0,0,0" Grid.Row="2" Grid.RowSpan="2" Source="/CAP;component/Images/user2.png" /> <TextBlock x:Name="tbHello" Grid.Column="2" Visibility="Collapsed" Grid.Row="2" Height="auto" TextWrapping="Wrap" HorizontalAlignment="Left" Margin="6,0,0,0" Text="" VerticalAlignment="Top" FontFamily="Verdana" FontSize="13" Foreground="White" Width="145" /> </Grid> </Border> <Border x:Name="MenuBorder" Margin="0,0,0,50" Width="250" Visibility="Collapsed"> <StackPanel x:Name="spMenu" Width="240" HorizontalAlignment="Left"> <telerikNavigation:RadTreeView x:Name="tvMainMenu" Width="240" Selected="TreeView1_Selected" SelectedValuePath="Text" telerik:Theming.Theme="Windows7" FontFamily="Verdana" FontSize="12"/> </StackPanel> </Border> </StackPanel> </Grid> <Border x:Name="FooterBorder" VerticalAlignment="Bottom" Width="auto" Height="76"> <Border.Background> <ImageBrush ImageSource="/CAP;component/Images/footer2.png" /> </Border.Background> <TextBlock x:Name="tbFooter" Height="24" Width="auto" Margin="0,20,0,0" TextAlignment="Center" HorizontalAlignment="Stretch" VerticalAlignment="Center" Foreground="White" FontFamily="Verdana" FontSize="11"> </TextBlock> </Border> </Grid> </ScrollViewer.Content> </ScrollViewer> </UserControl> MainPage.xaml.cs using System; using System.Collections.Generic; using System.Linq; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Navigation; using CAP.Code; using CAP.Registrator; using System.Windows.Input; using System.ComponentModel.DataAnnotations; using System.Windows.Browser; using Telerik.Windows.Controls; using System.Net; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Navigation; using System.Windows.Shapes; namespace CAP { public partial class MainPage { public App Appvars = Application.Current as App; private readonly RegistratorClient registrator; public SiteMapBuilder builder; public MainPage() { InitializeComponent(); sV.SetIsMouseWheelScrollingEnabled(true); builder = new SiteMapBuilder(spSiteMap); try { //working with service } catch { this.ContentFrame.Navigate(new Uri(String.Format("ErrorPage"), UriKind.RelativeOrAbsolute)); } } /// Recursive method to update the correct scrollviewer (if exists) private ScrollViewer CheckParent(FrameworkElement element) { ScrollViewer _result = element as ScrollViewer; if (element != null && _result == null) { FrameworkElement _temp = element.Parent as FrameworkElement; _result = CheckParent(_temp); } return _result; } // If an error occurs during navigation, show an error window private void ContentFrame_NavigationFailed(object sender, NavigationFailedEventArgs e) { e.Handled = true; ChildWindow errorWin = new ErrorWindow(e.Uri); errorWin.Show(); } } }

Read the article

Windows store apps: ScrollViewer with dinamic content

- by Alexandru Circus

I have a scrollViewer with an ItemsControl (which holds rows with data) as content. The data from these rows is grabbed from the server so I want to display a ProgressRing with a text until the data arrives. Basically I want the content of the ScrollViewer to be a grid with progress ring and a text and after the data arrives the content to be changed with my ItemsControl. The problem is that the ScrollViewer does not accept more than 1 element as content. Please tell me how can I solve this problem. (I'm a C# beginner) <FlipView x:Name="OptionPagesFlipView" Grid.Row="1" TabNavigation="Cycle" SelectionChanged="OptionPagesFlipView_SelectionChanged" ItemsSource="{Binding OptionsPageItems}"> <FlipView.ItemTemplate> <DataTemplate x:Name="OptionMonthPageTemplate"> <ScrollViewer x:Name="OptionsScrollViewer" HorizontalScrollMode="Disabled" HorizontalAlignment="Stretch" VerticalScrollBarVisibility="Auto"> <ItemsControl x:Name="OptionItemsControl" ItemsSource="{Binding OptionItems, Mode=OneWay}" Visibility="Collapsed"> <ItemsControl.ItemTemplate> <DataTemplate x:Name="OptionsChainItemTemplate"> <Grid x:Name="OptionItemGrid" Background="#FF9DBDF7" HorizontalAlignment="Stretch"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions>  <TextBlock Text="Bid" Foreground="Gray" HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0" FontSize="18" Margin="5,0,5,0"/> <TextBlock x:Name="CallBidTextBlock" Text="{Binding CallBid}" Foreground="Blue" HorizontalAlignment="Left" Grid.Row="1" Grid.Column="0" Margin="5,0,5,5" FontSize="18"/>  <TextBlock Text="Ask" Foreground="Gray" HorizontalAlignment="Left" Grid.Row="2" Grid.Column="0" FontSize="18" Margin="5,0,5,0"/> <TextBlock x:Name="CallAskTextBlock" Text="{Binding CallAsk}" Foreground="Blue" HorizontalAlignment="Left" Grid.Row="3" Grid.Column="0" Margin="5,0,5,0" FontSize="18"/>  <TextBlock Text="Last" Foreground="Gray" HorizontalAlignment="Left" Grid.Row="0" Grid.Column="1" FontSize="18" Margin="5,0,5,0"/> <TextBlock x:Name="CallLastTextBlock" Text="{Binding CallLast}" Foreground="Blue" HorizontalAlignment="Left" Grid.Row="1" Grid.Column="1" Margin="5,0,5,5" FontSize="18"/>  <TextBlock Text="Net Ch" Foreground="Gray" HorizontalAlignment="Left" Grid.Row="2" Grid.Column="1" FontSize="18" Margin="5,0,5,0"/> <TextBlock x:Name="CallNetChTextBlock" Text="{Binding CallNetChange}" Foreground="{Binding CallNetChangeForeground}" HorizontalAlignment="Left" Grid.Row="3" Grid.Column="1" Margin="5,0,5,5" FontSize="18"/>  <TextBlock Text="Strike" Foreground="Gray" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="2" FontSize="18" Margin="5,0,5,0"/> <Border Background="{Binding StrikeBackground}" HorizontalAlignment="Center" Grid.Row="2" Grid.Column="2" Margin="5,0,5,5"> <TextBlock x:Name="StrikeTextBlock" Text="{Binding Strike}" Foreground="Blue" FontSize="18"/> </Border>  <TextBlock Text="Last" Foreground="Gray" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="3" FontSize="18" Margin="5,0,5,0"/> <TextBlock x:Name="PutLastTextBlock" Text="{Binding PutLast}" Foreground="Blue" HorizontalAlignment="Right" Grid.Row="1" Grid.Column="3" Margin="5,0,5,5" FontSize="18"/>  <TextBlock Text="Net Ch" Foreground="Gray" HorizontalAlignment="Right" Grid.Row="2" Grid.Column="3" FontSize="18" Margin="5,0,5,0"/> <TextBlock x:Name="PutNetChangeTextBlock" Text="{Binding PutNetChange}" Foreground="{Binding PutNetChangeForeground}" HorizontalAlignment="Right" Grid.Row="3" Grid.Column="3" Margin="5,0,5,5" FontSize="18"/>  <TextBlock Text="Bid" Foreground="Gray" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="4" FontSize="18" Margin="5,0,15,0"/> <TextBlock x:Name="PutBidTextBlock" Text="{Binding PutBid}" Foreground="Blue" HorizontalAlignment="Right" Grid.Row="1" Grid.Column="4" Margin="5,0,15,5" FontSize="18"/>  <TextBlock Text="Ask" Foreground="Gray" HorizontalAlignment="Right" Grid.Row="2" Grid.Column="4" FontSize="18" Margin="5,0,15,0"/> <TextBlock x:Name="PutAskTextBlock" Text="{Binding PutAsk}" Foreground="Blue" HorizontalAlignment="Right" Grid.Row="3" Grid.Column="4" Margin="5,0,15,5" FontSize="18"/>  <Rectangle Fill="Black" Height="1" Grid.ColumnSpan="5" VerticalAlignment="Bottom" Grid.Row="3"/> </Grid> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl>  </ScrollViewer> </DataTemplate> </FlipView.ItemTemplate>

Read the article

Silverlight horizontal stretch and get position issue

- by David

I have a Grid (container) wich in turn has several grids(subContainers) arranged by rows. Each one of those "subContainers" has diferent columns and controls. And each of those "subContainers" has the horizontal alignment set to stretch, and it has to stay that way, since the layout this viewer depends on it. I use the "container" to set each control on it's adequate position. So far so good. Now comes my headache... I want to remove the control from the grid and put it in a canvas, at the same exact position, only, the position it returns is as if the control is set to the beggining of the grid and not it's true position. For testing purposes, I've set the "subContainters" horizontal alignment to center and (despite the layout is totally wrong) every control is in it's right position when sent to a canvas, wich it doesn't happen when HA = stretch. Here's the code I'm using to get position: GeneralTransform gt = nc.TransformToVisual(gridZoom); Point offset = gt.Transform(new Point()); So you can understand, for example, my first control should be somewhere like (80, 1090), but the point that I get is (3,3). Can anyone help me? Thanks

Read the article

Silverlight Recruiting Application Part 6 - Adding an Interview Scheduling Module/View

Between the last post and this one I went ahead and carried the ideas for the Jobs module and view into the Applicants module and view- they're both doing more or less the same thing, except with different objects being at their core. Made for an easy cut-and-paste operation with a few items being switched from one to another. Now that we have the ability to add postings and applicants, wouldn't it be nice if we could schedule an interview? Of course it would! Scheduling Module I think you get the drift from previous posts that these project structures start looking somewhat similar. The interview scheduling module is no different than the rest- it gets a SchedulingModule.cs file at the root that inherits from IModule, and there is a single SchedulerView.xsml and SchedulerViewModel.cs setup for our V+VM. We have one unique concern as we enter into this- RadScheduler deals with AppointmentsSource, not ItemsSource, so there are some special considerations to take into account when planning this module. First, I need something which inherits from AppointmentBase. This is the core of the RadScheduler appointment, and if you are planning to do any form of custom appointment, you'll want it to inherit from this. Then you can add-on functionality as needed. Here is my addition to the mix, the InterviewAppointment: 01.public class InterviewAppointment : AppointmentBase 02.{ 03. private int _applicantID; 04. public int ApplicantID 05. { 06. get { return this._applicantID; } 07. set 08. { 09. if (_applicantID != value) 10. { 11. _applicantID = value; 12. OnPropertyChanged("ApplicantID"); 13. } 14. } 15. } 16. 17. private int _postingID; 18. public int PostingID 19. { 20. get { return _postingID; } 21. set 22. { 23. if (_postingID != value) 24. { 25. _postingID = value; 26. OnPropertyChanged("PostingID"); 27. } 28. } 29. } 30. 31. private string _body; 32. public string Body 33. { 34. get { return _body; } 35. set 36. { 37. if (_body != value) 38. { 39. _body = value; 40. OnPropertyChanged("Body"); 41. } 42. } 43. } 44. 45. private int _interviewID; 46. public int InterviewID 47. { 48. get { return _interviewID; } 49. set 50. { 51. if (_interviewID != value) 52. { 53. _interviewID = value; 54. OnPropertyChanged("InterviewID"); 55. } 56. } 57. } 58. 59. public override IAppointment Copy() 60. { 61. IAppointment appointment = new InterviewAppointment(); 62. appointment.CopyFrom(this); 63. return appointment; 64. } 65. 66. public override void CopyFrom(IAppointment other) 67. { 68. base.CopyFrom(other); 69. var appointment = other as InterviewAppointment; 70. if (appointment != null) 71. { 72. ApplicantID = appointment.ApplicantID; 73. PostingID = appointment.PostingID; 74. Body = appointment.Body; 75. InterviewID = appointment.InterviewID; 76. } 77. } 78.} Nothing too exciting going on here, we just make sure that our custom fields are persisted (specifically set in CopyFrom at the bottom) and notifications are fired- otherwise this ends up exactly like the standard appointment as far as interactions, etc. But if we've got custom appointment items... that also means we need to customize what our appointment dialog window will look like. Customizing the Edit Appointment Dialog This initially sounds a lot more intimidating than it really is. The first step here depends on what you're dealing with for theming, but for ease of everything I went ahead and extracted my templates in Blend for RadScheduler so I could modify it as I pleased. For the faint of heart, the RadScheduler template is a few thousand lines of goodness since there are some very complex things going on in that control. I've gone ahead and trimmed down the template parts I don't need as much as possible, so what is left is all that is relevant to the Edit Appointment Dialog. Here's the resulting Xaml, with line numbers, so I can explain further: 001.<UserControl.Resources> 002.  003. <helpers:DataContextProxy x:Key="DataContextProxy" /> 004. 005. <telerik:Windows7Theme x:Key="Theme" /> 006. <SolidColorBrush x:Key="DialogWindowBackground" 007. Color="White" /> 008. <SolidColorBrush x:Key="CategorySelectorBorderBrush" 009. Color="#FFB1B1B1" /> 010. <LinearGradientBrush x:Key="RadToolBar_InnerBackground" 011. EndPoint="0.5,1" 012. StartPoint="0.5,0"> 013. <GradientStop Color="#FFFDFEFF" 014. Offset="0" /> 015. <GradientStop Color="#FFDDE9F7" 016. Offset="1" /> 017. <GradientStop Color="#FFE6F0FA" 018. Offset="0.5" /> 019. <GradientStop Color="#FFDCE6F4" 020. Offset="0.5" /> 021. </LinearGradientBrush> 022. <Style x:Key="FormElementTextBlockStyle" 023. TargetType="TextBlock"> 024. <Setter Property="HorizontalAlignment" 025. Value="Right" /> 026. <Setter Property="VerticalAlignment" 027. Value="Top" /> 028. <Setter Property="Margin" 029. Value="15, 15, 0, 2" /> 030. </Style> 031. <Style x:Key="FormElementStyle" 032. TargetType="FrameworkElement"> 033. <Setter Property="Margin" 034. Value="10, 10, 0, 2" /> 035. </Style> 036. <SolidColorBrush x:Key="GenericShallowBorderBrush" 037. Color="#FF979994" /> 038. <telerik:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" /> 039. <telerikScheduler:ImportanceToBooleanConverter x:Key="ImportanceToBooleanConverter" /> 040. <telerikScheduler:NullToVisibilityConverter x:Key="NullToVisibilityConverter" /> 041. <telerikScheduler:InvertedNullToVisibilityConverter x:Key="InvertedNullToVisibilityConverter" /> 042. <scheduler:ResourcesSeparatorConverter x:Key="ResourcesSeparatorConverter" /> 043. <DataTemplate x:Key="IconDataEditTemplate"> 044. <Image Source="/Telerik.Windows.Controls.Scheduler;component/Themes/Office/Images/cal.png" 045. Margin="3,3,0,0" 046. Width="16" 047. Height="16" /> 048. </DataTemplate> 049. <DataTemplate x:Key="SingleSelectionTemplate"> 050. <Grid VerticalAlignment="Stretch" 051. HorizontalAlignment="Stretch"> 052. <Grid.RowDefinitions> 053. <RowDefinition Height="Auto" /> 054. </Grid.RowDefinitions> 055. <Grid.ColumnDefinitions> 056. <ColumnDefinition Width="Auto" 057. MinWidth="84" /> 058. <ColumnDefinition Width="Auto" 059. MinWidth="200" /> 060. </Grid.ColumnDefinitions> 061. <TextBlock x:Name="SelectionNameLabel" 062. Margin="0,13,4,2" 063. Text="{Binding ResourceType.DisplayName}" 064. Style="{StaticResource FormElementTextBlockStyle}" 065. Grid.Column="0" /> 066. <telerikInput:RadComboBox ItemsSource="{Binding ResourceItems}" 067. Width="185" 068. Margin="5,10,20,2" 069. HorizontalAlignment="Left" 070. Grid.Column="1" 071. ClearSelectionButtonVisibility="Visible" 072. ClearSelectionButtonContent="Clear All" 073. DisplayMemberPath="Resource.DisplayName" 074. telerik:StyleManager.Theme="{StaticResource Theme}" 075. SelectedItem="{Binding SelectedItem, Mode=TwoWay}" /> 076. </Grid> 077. </DataTemplate> 078. <DataTemplate x:Key="MultipleSelectionTemplate"> 079. <Grid VerticalAlignment="Stretch" 080. HorizontalAlignment="Stretch"> 081. <Grid.RowDefinitions> 082. <RowDefinition Height="Auto" /> 083. </Grid.RowDefinitions> 084. <Grid.ColumnDefinitions> 085. <ColumnDefinition Width="Auto" 086. MinWidth="84" /> 087. <ColumnDefinition Width="Auto" 088. MinWidth="200" /> 089. </Grid.ColumnDefinitions> 090. <TextBlock x:Name="SelectionNameLabel" 091. Grid.Column="0" 092. Text="{Binding ResourceType.DisplayName}" 093. Margin="0,13,4,2" 094. Style="{StaticResource FormElementTextBlockStyle}" /> 095. <telerikInput:RadComboBox Grid.Column="1" 096. Width="185" 097. HorizontalAlignment="Left" 098. Margin="5,10,20,2" 099. ItemsSource="{Binding ResourceItems}" 100. SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}" 101. ClearSelectionButtonVisibility="Visible" 102. ClearSelectionButtonContent="Clear All" 103. telerik:StyleManager.Theme="{StaticResource Theme}"> 104. <telerikInput:RadComboBox.ItemTemplate> 105. <DataTemplate> 106. <Grid HorizontalAlignment="Stretch" 107. VerticalAlignment="Stretch"> 108. <CheckBox VerticalAlignment="Center" 109. HorizontalContentAlignment="Stretch" 110. VerticalContentAlignment="Center" 111. IsChecked="{Binding IsChecked, Mode=TwoWay}" 112. Content="{Binding Resource.DisplayName}"> 113. <CheckBox.ContentTemplate> 114. <DataTemplate> 115. <TextBlock HorizontalAlignment="Stretch" 116. VerticalAlignment="Stretch" 117. Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" /> 118. </DataTemplate> 119. </CheckBox.ContentTemplate> 120. </CheckBox> 121. </Grid> 122. </DataTemplate> 123. </telerikInput:RadComboBox.ItemTemplate> 124. </telerikInput:RadComboBox> 125. </Grid> 126. </DataTemplate> 127. <scheduler:ResourceTypeTemplateSelector x:Key="ItemTemplateSelector" 128. MultipleSelectionTemplate="{StaticResource MultipleSelectionTemplate}" 129. SingleSelectionTemplate="{StaticResource SingleSelectionTemplate}" /> 130.  131. 132. <ControlTemplate x:Key="EditAppointmentTemplate" 133. TargetType="telerikScheduler:AppointmentDialogWindow"> 134. <StackPanel Background="{TemplateBinding Background}" 135. UseLayoutRounding="True"> 136. <StackPanel Grid.Row="0" 137. Orientation="Horizontal" 138. Background="{StaticResource RadToolBar_InnerBackground}" 139. Grid.ColumnSpan="2" 140. Height="0"> 141.  142. <Border Margin="1,1,0,0" 143. Background="#50000000" 144. HorizontalAlignment="Left" 145. VerticalAlignment="Center" 146. Width="2" 147. Height="16"> 148. <Border Margin="0,0,1,1" 149. Background="#80FFFFFF" 150. HorizontalAlignment="Left" 151. Width="1" /> 152. </Border> 153. <Border Margin="1,1,0,0" 154. Background="#50000000" 155. HorizontalAlignment="Left" 156. VerticalAlignment="Center" 157. Width="2" 158. Height="16"> 159. <Border Margin="0,0,1,1" 160. Background="#80FFFFFF" 161. HorizontalAlignment="Left" 162. Width="1" /> 163. </Border> 164. <TextBlock telerik:LocalizationManager.ResourceKey="ShowAs" 165. VerticalAlignment="Center" 166. Margin="5,0,0,0" /> 167. <telerikInput:RadComboBox ItemsSource="{TemplateBinding TimeMarkers}" 168. Width="100" 169. Height="20" 170. VerticalAlignment="Center" 171. Margin="5,0,0,0" 172. ClearSelectionButtonVisibility="Visible" 173. ClearSelectionButtonContent="Clear" 174. SelectedItem="{Binding TimeMarker,RelativeSource={RelativeSource TemplatedParent},Mode=TwoWay}" 175. telerik:StyleManager.Theme="{StaticResource Theme}"> 176. <telerikInput:RadComboBox.ItemTemplate> 177. <DataTemplate> 178. <StackPanel Orientation="Horizontal"> 179. <Rectangle Fill="{Binding TimeMarkerBrush}" 180. Margin="2" 181. Width="12" 182. Height="12" /> 183. <TextBlock Text="{Binding TimeMarkerName}" 184. Margin="2" /> 185. </StackPanel> 186. </DataTemplate> 187. </telerikInput:RadComboBox.ItemTemplate> 188. </telerikInput:RadComboBox> 189. <telerik:RadToggleButton x:Name="High" 190. BorderThickness="0" 191. Background="{StaticResource RadToolBar_InnerBackground}" 192. DataContext="{TemplateBinding EditedAppointment}" 193. telerik:StyleManager.Theme="{StaticResource Theme}" 194. IsChecked="{Binding Importance,Mode=TwoWay, Converter={StaticResource ImportanceToBooleanConverter},ConverterParameter=High}" 195. Margin="2,2,0,2" 196. Width="23" 197. Height="23" 198. HorizontalContentAlignment="Center" 199. ToolTipService.ToolTip="High importance" 200. CommandParameter="High" 201. Command="telerikScheduler:RadSchedulerCommands.SetAppointmentImportance"> 202. <StackPanel HorizontalAlignment="Center"> 203. <Path Stretch="Fill" 204. Height="10" 205. HorizontalAlignment="Center" 206. VerticalAlignment="Top" 207. Width="5.451" 208. Data="M200.39647,58.840393 C200.39337,58.336426 201.14566,57.683922 202.56244,57.684292 C204.06589,57.684685 204.73764,58.357765 204.72783,58.992363 C205.04649,61.795574 203.04713,64.181099 202.47388,66.133446 C201.93753,64.154961 199.9471,61.560352 200.39647,58.840393 z"> 209. <Path.Fill> 210. <LinearGradientBrush EndPoint="1.059,0.375" 211. StartPoint="-0.457,0.519"> 212. <GradientStop Color="#FFFF0606" 213. Offset="0.609" /> 214. <GradientStop Color="#FFBF0303" 215. Offset="0.927" /> 216. </LinearGradientBrush> 217. </Path.Fill> 218. </Path> 219. <Ellipse Height="3" 220. HorizontalAlignment="Center" 221. Margin="0,-1,0,0" 222. VerticalAlignment="Top" 223. Width="3"> 224. <Ellipse.Fill> 225. <RadialGradientBrush> 226. <GradientStop Color="#FFFF0606" 227. Offset="0" /> 228. <GradientStop Color="#FFBF0303" 229. Offset="1" /> 230. </RadialGradientBrush> 231. </Ellipse.Fill> 232. </Ellipse> 233. </StackPanel> 234. </telerik:RadToggleButton> 235. <telerik:RadToggleButton x:Name="Low" 236. HorizontalContentAlignment="Center" 237. BorderThickness="0" 238. Background="{StaticResource RadToolBar_InnerBackground}" 239. DataContext="{TemplateBinding EditedAppointment}" 240. IsChecked="{Binding Importance,Mode=TwoWay, Converter={StaticResource ImportanceToBooleanConverter},ConverterParameter=Low}" 241. Margin="0,2,0,2" 242. Width="23" 243. Height="23" 244. ToolTipService.ToolTip="Low importance" 245. CommandParameter="Low" 246. telerik:StyleManager.Theme="{StaticResource Theme}" 247. Command="telerikScheduler:RadSchedulerCommands.SetAppointmentImportance"> 248. <Path Stretch="Fill" 249. Height="12" 250. HorizontalAlignment="Center" 251. VerticalAlignment="Top" 252. Width="9" 253. Data="M222.40353,60.139881 L226.65768,60.139843 L226.63687,67.240196 L229.15347,67.240196 L224.37816,71.394943 L219.65274,67.240196 L222.37572,67.219345 z" 254. Stroke="#FF0365A7"> 255. <Path.Fill> 256. <LinearGradientBrush EndPoint="1.059,0.375" 257. StartPoint="-0.457,0.519"> 258. <GradientStop Color="#FFBBE4FF" /> 259. <GradientStop Color="#FF024572" 260. Offset="0.836" /> 261. <GradientStop Color="#FF43ADF4" 262. Offset="0.466" /> 263. </LinearGradientBrush> 264. </Path.Fill> 265. </Path> 266. </telerik:RadToggleButton> 267. </StackPanel > 268. <Border DataContext="{TemplateBinding EditedAppointment}" 269. Background="{Binding Category.CategoryBrush}" 270. Visibility="{Binding Category,Converter={StaticResource NullToVisibilityConverter}}" 271. CornerRadius="3" 272. Height="20" 273. Margin="5,10,5,0"> 274. <TextBlock Text="{Binding Category.DisplayName}" 275. VerticalAlignment="Center" 276. Margin="5,0,0,0" /> 277. </Border> 278. <Grid VerticalAlignment="Stretch" 279. HorizontalAlignment="Stretch" 280. DataContext="{TemplateBinding EditedAppointment}" 281. Background="{TemplateBinding Background}"> 282. <Grid.RowDefinitions> 283. <RowDefinition Height="Auto" /> 284. <RowDefinition Height="Auto" /> 285. <RowDefinition Height="Auto" /> 286. <RowDefinition Height="Auto" /> 287. <RowDefinition Height="Auto" /> 288. <RowDefinition Height="Auto" /> 289. <RowDefinition Height="Auto" /> 290. <RowDefinition Height="Auto" /> 291. <RowDefinition Height="Auto" /> 292. <RowDefinition Height="Auto" /> 293. </Grid.RowDefinitions> 294. <Grid.ColumnDefinitions> 295. <ColumnDefinition Width="Auto" 296. MinWidth="100" /> 297. <ColumnDefinition Width="Auto" 298. MinWidth="200" /> 299. </Grid.ColumnDefinitions> 300.  301. <TextBlock x:Name="SubjectLabel" 302. Grid.Row="0" 303. Grid.Column="0" 304. Margin="0,15,0,2" 305. telerik:LocalizationManager.ResourceKey="Subject" 306. Style="{StaticResource FormElementTextBlockStyle}" /> 307. <TextBox x:Name="Subject" 308. Grid.Row="0" 309. Grid.Column="1" 310. MinHeight="22" 311. Padding="4 2" 312. Width="340" 313. HorizontalAlignment="Left" 314. Text="{Binding Subject, Mode=TwoWay}" 315. MaxLength="255" 316. telerik:StyleManager.Theme="{StaticResource Theme}" 317. Margin="10,12,20,2" /> 318.  319. <TextBlock x:Name="DescriptionLabel" 320. Grid.Row="1" 321. Grid.Column="0" 322. Margin="0,13,0,2" 323. telerik:LocalizationManager.ResourceKey="Body" 324. Style="{StaticResource FormElementTextBlockStyle}" /> 325. <TextBox x:Name="Body" 326. VerticalAlignment="top" 327. Grid.Row="1" 328. Grid.Column="1" 329. Height="Auto" 330. MaxHeight="82" 331. Width="340" 332. HorizontalAlignment="Left" 333. MinHeight="22" 334. Padding="4 2" 335. TextWrapping="Wrap" 336. telerik:StyleManager.Theme="{StaticResource Theme}" 337. Text="{Binding Body, Mode=TwoWay}" 338. AcceptsReturn="true" 339. Margin="10,10,20,2" 340. HorizontalScrollBarVisibility="Auto" 341. VerticalScrollBarVisibility="Auto" /> 342.  343. <TextBlock x:Name="StartDateLabel" 344. Grid.Row="2" 345. Grid.Column="0" 346. Margin="0,13,0,2" 347. telerik:LocalizationManager.ResourceKey="StartTime" 348. Style="{StaticResource FormElementTextBlockStyle}" /> 349. <telerikScheduler:DateTimePicker x:Name="StartDateTime" 350. Height="22" 351. Grid.Row="2" 352. Grid.Column="1" 353. HorizontalAlignment="Left" 354. Margin="10,10,20,2" 355. Style="{StaticResource FormElementStyle}" 356. SelectedDateTime="{Binding Start, Mode=TwoWay}" 357. telerikScheduler:StartEndDatePicker.EndPicker="{Binding ElementName=EndDateTime}" 358. IsTabStop="False" 359. IsEnabled="False" /> 360. <TextBlock x:Name="EndDateLabel" 361. Grid.Row="3" 362. Grid.Column="0" 363. Margin="0,13,0,2" 364. telerik:LocalizationManager.ResourceKey="EndTime" 365. Style="{StaticResource FormElementTextBlockStyle}" /> 366. <telerikScheduler:DateTimePicker x:Name="EndDateTime" 367. Height="22" 368. Grid.Row="3" 369. Grid.Column="1" 370. HorizontalAlignment="Left" 371. Margin="10,10,20,2" 372. Style="{StaticResource FormElementStyle}" 373. IsTabStop="False" 374. IsEnabled="False" 375. SelectedDateTime="{Binding End, Mode=TwoWay}" /> 376.  377. <CheckBox x:Name="AllDayEventCheckbox" 378. IsChecked="{Binding IsAllDayEvent, Mode=TwoWay}" 379. Grid.Row="4" 380. Grid.Column="1" 381. Margin="10,10,20,2" 382. HorizontalAlignment="Left" 383. telerik:StyleManager.Theme="{StaticResource Theme}" 384. telerik:LocalizationManager.ResourceKey="AllDayEvent"> 385. <telerik:CommandManager.InputBindings> 386. <telerik:InputBindingCollection> 387. <telerik:MouseBinding Command="telerikScheduler:RadSchedulerCommands.ChangeTimePickersVisibility" 388. Gesture="LeftClick" /> 389. </telerik:InputBindingCollection> 390. </telerik:CommandManager.InputBindings> 391. </CheckBox> 392. <Grid Grid.Row="5" 393. Grid.ColumnSpan="2"> 394. <Grid.ColumnDefinitions> 395. <ColumnDefinition Width="Auto" 396. MinWidth="100" /> 397. <ColumnDefinition Width="Auto" 398. MinWidth="200" /> 399. </Grid.ColumnDefinitions> 400. <Grid.RowDefinitions> 401. <RowDefinition Height="Auto" /> 402. <RowDefinition Height="Auto" /> 403. </Grid.RowDefinitions> 404. <TextBlock Text="Applicant" 405. Margin="0,13,0,2" 406. Style="{StaticResource FormElementTextBlockStyle}" /> 407. <telerikInput:RadComboBox IsEditable="False" 408. Grid.Column="1" 409. Height="24" 410. VerticalAlignment="Center" 411. ItemsSource="{Binding Source={StaticResource DataContextProxy}, Path=DataSource.ApplicantList}" 412. SelectedValue="{Binding ApplicantID, Mode=TwoWay}" 413. SelectedValuePath="ApplicantID" 414. DisplayMemberPath="FirstName" /> 415. 416. <TextBlock Text="Job" 417. Margin="0,13,0,2" 418. Grid.Row="1" 419. Style="{StaticResource FormElementTextBlockStyle}" /> 420. <telerikInput:RadComboBox IsEditable="False" 421. Grid.Column="1" 422. Grid.Row="1" 423. Height="24" 424. VerticalAlignment="Center" 425. ItemsSource="{Binding Source={StaticResource DataContextProxy}, Path=DataSource.JobsList}" 426. SelectedValue="{Binding PostingID, Mode=TwoWay}" 427. SelectedValuePath="PostingID" 428. DisplayMemberPath="JobTitle"/> 429. </Grid> 430.  431. <Grid x:Name="ResourcesLayout" 432. Grid.Row="7" 433. Grid.Column="0" 434. Grid.ColumnSpan="2" 435. MaxHeight="130" 436. Margin="20,5,20,0"> 437. <Border Margin="0" 438. BorderThickness="1" 439. BorderBrush="{StaticResource GenericShallowBorderBrush}" 440. Visibility="{Binding ElementName=ResourcesScrollViewer, Path=ComputedVerticalScrollBarVisibility}"></Border> 441. <ScrollViewer x:Name="ResourcesScrollViewer" 442. IsTabStop="false" 443. Grid.Row="6" 444. Grid.Column="0" 445. Grid.ColumnSpan="2" 446. Margin="1" 447. telerik:StyleManager.Theme="{StaticResource Theme}" 448. VerticalScrollBarVisibility="Auto"> 449. <scheduler:ResourcesItemsControl x:Name="PART_Resources" 450. HorizontalAlignment="Left" 451. Padding="0,2,0,5" 452. IsTabStop="false" 453. ItemsSource="{TemplateBinding ResourceTypeModels}" 454. ItemTemplateSelector="{StaticResource ItemTemplateSelector}" /> 455. </ScrollViewer> 456. </Grid> 457. <StackPanel x:Name="FooterControls" 458. Margin="5 10 10 10" 459. Grid.Row="8" 460. Grid.Column="1" 461. HorizontalAlignment="Left" 462. Orientation="Horizontal"> 463. <telerik:RadButton x:Name="OKButton" 464. Margin="5" 465. Padding="10 0" 466. MinWidth="80" 467. Command="telerikScheduler:RadSchedulerCommands.SaveAppointment" 468. telerik:StyleManager.Theme="{StaticResource Theme}" 469. telerikNavigation:RadWindow.ResponseButton="Accept" 470. telerik:LocalizationManager.ResourceKey="SaveAndCloseCommandText"> 471. </telerik:RadButton> 472. <telerik:RadButton x:Name="CancelButton" 473. Margin="5" 474. Padding="10 0" 475. MinWidth="80" 476. telerik:LocalizationManager.ResourceKey="Cancel" 477. telerik:StyleManager.Theme="{StaticResource Theme}" 478. telerikNavigation:RadWindow.ResponseButton="Cancel" 479. Command="telerik:WindowCommands.Close"> 480. </telerik:RadButton> 481. </StackPanel> 482. </Grid> 483. <vsm:VisualStateManager.VisualStateGroups> 484. <vsm:VisualStateGroup x:Name="RecurrenceRuleState"> 485. <vsm:VisualState x:Name="RecurrenceRuleIsNull"> 486. <Storyboard> 487. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="StartDateTime" 488. Storyboard.TargetProperty="IsEnabled" 489. Duration="0"> 490. <DiscreteObjectKeyFrame KeyTime="0" 491. Value="True" /> 492. </ObjectAnimationUsingKeyFrames> 493. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EndDateTime" 494. Storyboard.TargetProperty="IsEnabled" 495. Duration="0"> 496. <DiscreteObjectKeyFrame KeyTime="0" 497. Value="True" /> 498. </ObjectAnimationUsingKeyFrames> 499. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AllDayEventCheckbox" 500. Storyboard.TargetProperty="IsEnabled" 501. Duration="0"> 502. <DiscreteObjectKeyFrame KeyTime="0" 503. Value="True" /> 504. </ObjectAnimationUsingKeyFrames> 505. </Storyboard> 506. </vsm:VisualState> 507. <vsm:VisualState x:Name="RecurrenceRuleIsNotNull"> 508. <Storyboard> 509. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="StartDateTime" 510. Storyboard.TargetProperty="IsEnabled" 511. Duration="0"> 512. <DiscreteObjectKeyFrame KeyTime="0" 513. Value="False" /> 514. </ObjectAnimationUsingKeyFrames> 515. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EndDateTime" 516. Storyboard.TargetProperty="IsEnabled" 517. Duration="0"> 518. <DiscreteObjectKeyFrame KeyTime="0" 519. Value="False" /> 520. </ObjectAnimationUsingKeyFrames> 521. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AllDayEventCheckbox" 522. Storyboard.TargetProperty="IsEnabled" 523. Duration="0"> 524. <DiscreteObjectKeyFrame KeyTime="0" 525. Value="False" /> 526. </ObjectAnimationUsingKeyFrames> 527. </Storyboard> 528. </vsm:VisualState> 529. </vsm:VisualStateGroup> 530. </vsm:VisualStateManager.VisualStateGroups> 531. </StackPanel> 532. </ControlTemplate> 533. <DataTemplate x:Key="AppointmentDialogWindowHeaderDataTemplate"> 534. <StackPanel Orientation="Horizontal" 535. MaxWidth="400"> 536. <TextBlock telerik:LocalizationManager.ResourceKey="Event" 537. Visibility="{Binding Appointment.IsAllDayEvent, Converter={StaticResource BooleanToVisibilityConverter}}" /> 538. <TextBlock telerik:LocalizationManager.ResourceKey="Appointment" 539. Visibility="{Binding Appointment.IsAllDayEvent, Converter={StaticResource InvertedBooleanToVisibilityConverter}}" /> 540. <TextBlock Text=" - " /> 541. <TextBlock x:Name="SubjectTextBlock" 542. Visibility="{Binding Appointment.Subject, Converter={StaticResource NullToVisibilityConverter}}" 543. Text="{Binding Appointment.Subject}" /> 544. <TextBlock telerik:LocalizationManager.ResourceKey="Untitled" 545. Visibility="{Binding Appointment.Subject, Converter={StaticResource InvertedNullToVisibilityConverter}}" /> 546. </StackPanel> 547. </DataTemplate> 548. <Style x:Key="EditAppointmentStyle" 549. TargetType="telerikScheduler:AppointmentDialogWindow"> 550. <Setter Property="IconTemplate" 551. Value="{StaticResource IconDataEditTemplate}" /> 552. <Setter Property="HeaderTemplate" 553. Value="{StaticResource AppointmentDialogWindowHeaderDataTemplate}" /> 554. <Setter Property="Background" 555. Value="{StaticResource DialogWindowBackground}" /> 556. <Setter Property="Template" 557. Value="{StaticResource EditAppointmentTemplate}" /> 558. </Style> 559.</UserControl.Resources> The first line there is the DataContextProxy I mentioned previously- we use that again to work a bit of magic in this template. Where we start getting into the dialog in question is line 132, but line 407 is where things start getting interesting. The ItemsSource is pointing at a list that exists in my ViewModel (or code-behind, if it is used as a DataContext), the SelectedValue is the item I am actually binding from the applicant (note the TwoWay binding), and SelectedValuePath and DisplayMemberPath ensure the proper applicant is being displayed from the collection. You will also see similar starting on line 420 where I do the same for the Jobs we'll be displaying. Just to wrap-up the Xaml, here's the RadScheduler declaraction that ties this all together and will be the main focus of our view: 01.<telerikScheduler:RadScheduler x:Name="xJobsScheduler" 02. Grid.Row="1" 03. Grid.Column="1" 04. Width="800" 05. MinWidth="600" 06. Height="500" 07. MinHeight="300" 08. AppointmentsSource="{Binding Interviews}" 09. EditAppointmentStyle="{StaticResource EditAppointmentStyle}" 10. command:AppointmentAddedEventClass.Command="{Binding AddAppointmentCommand}" 11. command:ApptCreatedEventClass.Command="{Binding ApptCreatingCommand}" 12. command:ApptEditedEventClass.Command="{Binding ApptEditedCommand}" 13. command:ApptDeletedEventClass.Command="{Binding ApptDeletedCommand}"> 14.</telerikScheduler:RadScheduler> Now, we get to the ViewModel and what it takes to get that rigged up. And for those of you who remember the jobs post, those command:s in the Xaml are pointing to attached behavior commands that reproduce the respective events. This becomes very handy when we're setting up the code-behind version. ;) ViewModel I've been liking this approach so far, so I'm going to put the entire ViewModel here and then go into the lines of interest. Of course, feel free to ask me questions about anything that isn't clear (by line number, ideally) so I can help out if I have missed anything important: 001.public class SchedulerViewModel : ViewModelBase 002.{ 003. private readonly IEventAggregator eventAggregator; 004. private readonly IRegionManager regionManager; 005. 006. public RecruitingContext context; 007. 008. private ObservableItemCollection<InterviewAppointment> _interviews = new ObservableItemCollection<InterviewAppointment>(); 009. public ObservableItemCollection<InterviewAppointment> Interviews 010. { 011. get { return _interviews; } 012. set 013. { 014. if (_interviews != value) 015. { 016. _interviews = value; 017. NotifyChanged("Interviews"); 018. } 019. } 020. } 021. 022. private QueryableCollectionView _jobsList; 023. public QueryableCollectionView JobsList 024. { 025. get { return this._jobsList; } 026. set 027. { 028. if (this._jobsList != value) 029. { 030. this._jobsList = value; 031. this.NotifyChanged("JobsList"); 032. } 033. } 034. } 035. 036. private QueryableCollectionView _applicantList; 037. public QueryableCollectionView ApplicantList 038. { 039. get { return _applicantList; } 040. set 041. { 042. if (_applicantList != value) 043. { 044. _applicantList = value; 045. NotifyChanged("ApplicantList"); 046. } 047. } 048. } 049. 050. public DelegateCommand<object> AddAppointmentCommand { get; set; } 051. public DelegateCommand<object> ApptCreatingCommand { get; set; } 052. public DelegateCommand<object> ApptEditedCommand { get; set; } 053. public DelegateCommand<object> ApptDeletedCommand { get; set; } 054. 055. public SchedulerViewModel(IEventAggregator eventAgg, IRegionManager regionmanager) 056. { 057. // set Unity items 058. this.eventAggregator = eventAgg; 059. this.regionManager = regionmanager; 060. 061. // load our context 062. context = new RecruitingContext(); 063. LoadOperation<Interview> loadOp = context.Load(context.GetInterviewsQuery()); 064. loadOp.Completed += new EventHandler(loadOp_Completed); 065. 066. this._jobsList = new QueryableCollectionView(context.JobPostings); 067. context.Load(context.GetJobPostingsQuery()); 068. 069. this._applicantList = new QueryableCollectionView(context.Applicants); 070. context.Load(context.GetApplicantsQuery()); 071. 072. AddAppointmentCommand = new DelegateCommand<object>(this.AddAppt); 073. ApptCreatingCommand = new DelegateCommand<object>(this.ApptCreating); 074. ApptEditedCommand = new DelegateCommand<object>(this.ApptEdited); 075. ApptDeletedCommand = new DelegateCommand<object>(this.ApptDeleted); 076. 077. } 078. 079. void loadOp_Completed(object sender, EventArgs e) 080. { 081. LoadOperation loadop = sender as LoadOperation; 082. 083. foreach (var ent in loadop.Entities) 084. { 085. _interviews.Add(EntityToAppointment(ent as Interview)); 086. } 087. } 088. 089. #region Appointment Adding 090. 091. public void AddAppt(object obj) 092. { 093. // now we have a new InterviewAppointment to add to our QCV :) 094. InterviewAppointment newInterview = obj as InterviewAppointment; 095. 096. this.context.Interviews.Add(AppointmentToEntity(newInterview)); 097. this.context.SubmitChanges((s) => 098. { 099. ActionHistory myAction = new ActionHistory(); 100. myAction.InterviewID = newInterview.InterviewID; 101. myAction.PostingID = newInterview.PostingID; 102. myAction.ApplicantID = newInterview.ApplicantID; 103. myAction.Description = String.Format("Interview with {0} has been created by {1}", newInterview.ApplicantID.ToString(), "default user"); 104. myAction.TimeStamp = DateTime.Now; 105. eventAggregator.GetEvent<AddActionEvent>().Publish(myAction); 106. } 107. , null); 108. } 109. 110. public void ApptCreating(object obj) 111. { 112. // handled in the behavior, just a placeholder to ensure it runs :) 113. } 114. 115. #endregion 116. 117. #region Appointment Editing 118. 119. public void ApptEdited(object obj) 120. { 121. Interview editedInterview = (from x in context.Interviews 122. where x.InterviewID == (obj as InterviewAppointment).InterviewID 123. select x).SingleOrDefault(); 124. 125. CopyAppointmentEdit(editedInterview, obj as InterviewAppointment); 126. 127. context.SubmitChanges((s) => { 128. ActionHistory myAction = new ActionHistory(); 129. myAction.InterviewID = editedInterview.InterviewID; 130. myAction.PostingID = editedInterview.PostingID; 131. myAction.ApplicantID = editedInterview.ApplicantID; 132. myAction.Description = String.Format("Interview with {0} has been modified by {1}", editedInterview.ApplicantID.ToString(), "default user"); 133. myAction.TimeStamp = DateTime.Now; 134. eventAggregator.GetEvent<AddActionEvent>().Publish(myAction); } 135. , null); 136. } 137. 138. #endregion 139. 140. #region Appointment Deleting 141. 142. public void ApptDeleted(object obj) 143. { 144. Interview deletedInterview = (from x in context.Interviews 145. where x.InterviewID == (obj as InterviewAppointment).InterviewID 146. select x).SingleOrDefault(); 147. 148. context.Interviews.Remove(deletedInterview); 149. context.SubmitChanges((s) => 150. { 151. ActionHistory myAction = new ActionHistory(); 152. myAction.InterviewID = deletedInterview.InterviewID; 153. myAction.PostingID = deletedInterview.PostingID; 154. myAction.ApplicantID = deletedInterview.ApplicantID; 155. myAction.Description = String.Format("Interview with {0} has been deleted by {1}", deletedInterview.ApplicantID.ToString(), "default user"); 156. myAction.TimeStamp = DateTime.Now; 157. eventAggregator.GetEvent<AddActionEvent>().Publish(myAction); 158. } 159. , null); 160. } 161. 162. #endregion 163. 164. #region Appointment Helpers :) 165. 166. public Interview AppointmentToEntity(InterviewAppointment ia) 167. { 168. Interview newInterview = new Interview(); 169. newInterview.Subject = ia.Subject; 170. newInterview.Body = ia.Body; 171. newInterview.Start = ia.Start; 172. newInterview.End = ia.End; 173. newInterview.ApplicantID = ia.ApplicantID; 174. newInterview.PostingID = ia.PostingID; 175. newInterview.InterviewID = ia.InterviewID; 176. 177. return newInterview; 178. } 179. 180. public InterviewAppointment EntityToAppointment(Interview ia) 181. { 182. InterviewAppointment newInterview = new InterviewAppointment(); 183. newInterview.Subject = ia.Subject; 184. newInterview.Body = ia.Body; 185. newInterview.Start = ia.Start; 186. newInterview.End = ia.End; 187. newInterview.ApplicantID = ia.ApplicantID; 188. newInterview.PostingID = ia.PostingID; 189. newInterview.InterviewID = ia.InterviewID; 190. 191. return newInterview; 192. } 193. 194. public void CopyAppointmentEdit(Interview entityInterview, InterviewAppointment appointmentInterview) 195. { 196. entityInterview.Subject = appointmentInterview.Subject; 197. entityInterview.Body = appointmentInterview.Body; 198. entityInterview.Start = appointmentInterview.Start; 199. entityInterview.End = appointmentInterview.End; 200. entityInterview.ApplicantID = appointmentInterview.ApplicantID; 201. entityInterview.PostingID = appointmentInterview.PostingID; 202. } 203. 204. #endregion 205.} One thing we're doing here which you won't see in any of the other ViewModels is creating a duplicate collection. I know this is something which will be fixed down the line for using RadScheduler, simplifying this process, but with WCF RIA changing as it does I wanted to ensure functionality would remain consistent as I continued development on this application. So, I do a little bit of duplication, but for the greater good. This all takes place starting on line 79, so for every entity that comes back we add it to the collection that is bound to RadScheduler. Otherwise, the DelegateCommands that you see correspond directly to the events they are named after. In each case, rather than sending over the full event arguments, I just send in the appointment in question (coming through as the object obj in all cases) so I can add (line 91), edit (line 119), and delete appointments (line 142) like normal. This just ensures they get updated back to my database. Also, the one bit of code you won't see is for the Appointment Creating (line 110) event- that is because in the command I've created I simply make the replacement I need to: 1.void element_AppointmentCreating(object sender, AppointmentCreatingEventArgs e) 2.{ 3. e.NewAppointment = new InterviewAppointment(); 4. base.ExecuteCommand(); 5.} And the ViewModel is none the wiser, the appointments just work as far as it is concerned since as they are created they become InterviewAppointments. End result? I've customized my EditAppointmentDialog as follows: And adding, editing, and deleting appointments works like a charm. I can even 'edit' by moving appointments around RadScheduler, so as they are dropped into a timeslot they perform their full edit routine and things get updated. And then, the Code-Behind Version Perhaps the thing I like the most about doing one then the other is I get to steal 90% or more of the code from the MVVM version. For example, the only real changes to the Code-Behind Xaml file exist in the control declaration, in which I use events instead of attached-behavior-event-commands: 01.<telerikScheduler:RadScheduler x:Name="xJobsScheduler" 02. Grid.Row="1" 03. Grid.Column="1" 04. Width="800" 05. MinWidth="600" 06. Height="500" 07. MinHeight="300" 08. EditAppointmentStyle="{StaticResource EditAppointmentStyle}" 09. AppointmentAdded="xJobsScheduler_AppointmentAdded" 10. AppointmentCreating="xJobsScheduler_AppointmentCreating" 11. AppointmentEdited="xJobsScheduler_AppointmentEdited" 12. AppointmentDeleted="xJobsScheduler_AppointmentDeleted"> 13.</telerikScheduler:RadScheduler> Easy, right? Otherwise, all the same styling in UserControl.Resources was re-used, right down to the DataContextProxy that lets us bind to a collection from our viewmodel (in this case, our code-behind) to use within the DataTemplate. The code conversion gets even easier, as I could literally copy and paste almost everything from the ViewModel to my Code-Behind, just a matter of pasting the right section into the right event. Here's the code-behind as proof: 001.public partial class SchedulingView : UserControl, INotifyPropertyChanged 002.{ 003. public RecruitingContext context; 004. 005. private QueryableCollectionView _jobsList; 006. public QueryableCollectionView JobsList 007. { 008. get { return this._jobsList; } 009. set 010. { 011. if (this._jobsList != value) 012. { 013. this._jobsList = value; 014. this.NotifyChanged("JobsList"); 015. } 016. } 017. } 018. 019. private QueryableCollectionView _applicantList; 020. public QueryableCollectionView ApplicantList 021. { 022. get { return _applicantList; } 023. set 024. { 025. if (_applicantList != value) 026. { 027. _applicantList = value; 028. NotifyChanged("ApplicantList"); 029. } 030. } 031. } 032. 033. private ObservableItemCollection<InterviewAppointment> _interviews = new ObservableItemCollection<InterviewAppointment>(); 034. public ObservableItemCollection<InterviewAppointment> Interviews 035. { 036. get { return _interviews; } 037. set 038. { 039. if (_interviews != value) 040. { 041. _interviews = value; 042. NotifyChanged("Interviews"); 043. } 044. } 045. } 046. 047. public SchedulingView() 048. { 049. InitializeComponent(); 050. 051. this.DataContext = this; 052. 053. this.Loaded += new RoutedEventHandler(SchedulingView_Loaded); 054. } 055. 056. void SchedulingView_Loaded(object sender, RoutedEventArgs e) 057. { 058. this.xJobsScheduler.AppointmentsSource = Interviews; 059. 060. context = new RecruitingContext(); 061. 062. LoadOperation loadop = context.Load(context.GetInterviewsQuery()); 063. loadop.Completed += new EventHandler(loadop_Completed); 064. 065. this._applicantList = new QueryableCollectionView(context.Applicants); 066. context.Load(context.GetApplicantsQuery()); 067. 068. this._jobsList = new QueryableCollectionView(context.JobPostings); 069. context.Load(context.GetJobPostingsQuery()); 070. } 071. 072. void loadop_Completed(object sender, EventArgs e) 073. { 074. LoadOperation loadop = sender as LoadOperation; 075. 076. _interviews.Clear(); 077. 078. foreach (var ent in loadop.Entities) 079. { 080. _interviews.Add(EntityToAppointment(ent as Interview)); 081. } 082. } 083. 084. private void xJobsScheduler_AppointmentAdded(object sender, Telerik.Windows.Controls.AppointmentAddedEventArgs e) 085. { 086. // now we have a new InterviewAppointment to add to our QCV :) 087. InterviewAppointment newInterview = e.Appointment as InterviewAppointment; 088. 089. this.context.Interviews.Add(AppointmentToEntity(newInterview)); 090. this.context.SubmitChanges((s) => 091. { 092. ActionHistory myAction = new ActionHistory(); 093. myAction.InterviewID = newInterview.InterviewID; 094. myAction.PostingID = newInterview.PostingID; 095. myAction.ApplicantID = newInterview.ApplicantID; 096. myAction.Description = String.Format("Interview with {0} has been created by {1}", newInterview.ApplicantID.ToString(), "default user"); 097. myAction.TimeStamp = DateTime.Now; 098. context.ActionHistories.Add(myAction); 099. context.SubmitChanges(); 100. } 101. , null); 102. } 103. 104. private void xJobsScheduler_AppointmentCreating(object sender, Telerik.Windows.Controls.AppointmentCreatingEventArgs e) 105. { 106. e.NewAppointment = new InterviewAppointment(); 107. } 108. 109. private void xJobsScheduler_AppointmentEdited(object sender, Telerik.Windows.Controls.AppointmentEditedEventArgs e) 110. { 111. Interview editedInterview = (from x in context.Interviews 112. where x.InterviewID == (e.Appointment as InterviewAppointment).InterviewID 113. select x).SingleOrDefault(); 114. 115. CopyAppointmentEdit(editedInterview, e.Appointment as InterviewAppointment); 116. 117. context.SubmitChanges((s) => 118. { 119. ActionHistory myAction = new ActionHistory(); 120. myAction.InterviewID = editedInterview.InterviewID; 121. myAction.PostingID = editedInterview.PostingID; 122. myAction.ApplicantID = editedInterview.ApplicantID; 123. myAction.Description = String.Format("Interview with {0} has been modified by {1}", editedInterview.ApplicantID.ToString(), "default user"); 124. myAction.TimeStamp = DateTime.Now; 125. context.ActionHistories.Add(myAction); 126. context.SubmitChanges(); 127. } 128. , null); 129. } 130. 131. private void xJobsScheduler_AppointmentDeleted(object sender, Telerik.Windows.Controls.AppointmentDeletedEventArgs e) 132. { 133. Interview deletedInterview = (from x in context.Interviews 134. where x.InterviewID == (e.Appointment as InterviewAppointment).InterviewID 135. select x).SingleOrDefault(); 136. 137. context.Interviews.Remove(deletedInterview); 138. context.SubmitChanges((s) => 139. { 140. ActionHistory myAction = new ActionHistory(); 141. myAction.InterviewID = deletedInterview.InterviewID; 142. myAction.PostingID = deletedInterview.PostingID; 143. myAction.ApplicantID = deletedInterview.ApplicantID; 144. myAction.Description = String.Format("Interview with {0} has been deleted by {1}", deletedInterview.ApplicantID.ToString(), "default user"); 145. myAction.TimeStamp = DateTime.Now; 146. context.ActionHistories.Add(myAction); 147. context.SubmitChanges(); 148. } 149. , null); 150. } 151. 152. #region Appointment Helpers :) 153. 154. public Interview AppointmentToEntity(InterviewAppointment ia) 155. { 156. Interview newInterview = new Interview(); 157. newInterview.Subject = ia.Subject; 158. newInterview.Body = ia.Body; 159. newInterview.Start = ia.Start; 160. newInterview.End = ia.End; 161. newInterview.ApplicantID = ia.ApplicantID; 162. newInterview.PostingID = ia.PostingID; 163. newInterview.InterviewID = ia.InterviewID; 164. 165. return newInterview; 166. } 167. 168. public InterviewAppointment EntityToAppointment(Interview ia) 169. { 170. InterviewAppointment newInterview = new InterviewAppointment(); 171. newInterview.Subject = ia.Subject; 172. newInterview.Body = ia.Body; 173. newInterview.Start = ia.Start; 174. newInterview.End = ia.End; 175. newInterview.ApplicantID = ia.ApplicantID; 176. newInterview.PostingID = ia.PostingID; 177. newInterview.InterviewID = ia.InterviewID; 178. 179. return newInterview; 180. } 181. 182. public void CopyAppointmentEdit(Interview entityInterview, InterviewAppointment appointmentInterview) 183. { 184. entityInterview.Subject = appointmentInterview.Subject; 185. entityInterview.Body = appointmentInterview.Body; 186. entityInterview.Start = appointmentInterview.Start; 187. entityInterview.End = appointmentInterview.End; 188. entityInterview.ApplicantID = appointmentInterview.ApplicantID; 189. entityInterview.PostingID = appointmentInterview.PostingID; 190. } 191. 192. #endregion 193. 194. #region INotifyPropertyChanged Members 195. 196. public event PropertyChangedEventHandler PropertyChanged; 197. 198. public void NotifyChanged(string propertyName) 199. { 200. if (string.IsNullOrEmpty(propertyName)) 201. throw new ArgumentException("propertyName"); 202. 203. PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 204. } 205. 206. #endregion 207.} Nice... right? :) One really important thing to note as well. See on line 51 where I set the DataContext before the Loaded event? This is super important, as if you don't have this set before the usercontrol is loaded, the DataContextProxy has no context to use and your EditAppointmentDialog Job/Applicant dropdowns will be blank and empty. Trust me on this, took a little bit of debugging to figure out that by setting the DataContext post-loaded would only lead to disaster and frustration. Otherwise, the only other real difference is that instead of sending an ActionHistory item through an event to get added to the database and saved, I do those right in the callback from submitting. The Result Again, I only have to post one picture because these bad boys used nearly identical code for both the MVVM and the code-behind views, so our end result is... So what have we learned here today? One, for the most part this MVVM thing is somewhat easy. Yeah, you sometimes have to write a bunch of extra code, but with the help of a few useful snippits you can turn the process into a pretty streamlined little workflow. Heck, this story gets even easier as you can see in this blog post by Michael Washington- specifically run a find on 'InvokeCommandAction' and you'll see the section regarding the command on TreeView in Blend 4. Brilliant! MVVM never looked so sweet! Otherwise, it is business as usual with RadScheduler for Silverlight whichever path you're choosing for your development. Between now and the next post, I'll be cleaning up styles a bit (those RadComboBoxes are a little too close to my labels!) and adding some to the RowDetailsViews for Applicants and Jobs, so you can see all the info for an appointment in the dropdown tab view. Otherwise, we're about ready to call a wrap on this oneDid you know that DotNetSlackers also publishes .net articles written by top known .net Authors? We already have over 80 articles in several categories including Silverlight. Take a look: here.

Read the article

Silverlight Recruiting Application Part 6 - Adding an Interview Scheduling Module/View

Between the last post and this one I went ahead and carried the ideas for the Jobs module and view into the Applicants module and view- they're both doing more or less the same thing, except with different objects being at their core. Made for an easy cut-and-paste operation with a few items being switched from one to another. Now that we have the ability to add postings and applicants, wouldn't it be nice if we could schedule an interview? Of course it would! Scheduling Module I think you get the drift from previous posts that these project structures start looking somewhat similar. The interview scheduling module is no different than the rest- it gets a SchedulingModule.cs file at the root that inherits from IModule, and there is a single SchedulerView.xsml and SchedulerViewModel.cs setup for our V+VM. We have one unique concern as we enter into this- RadScheduler deals with AppointmentsSource, not ItemsSource, so there are some special considerations to take into account when planning this module. First, I need something which inherits from AppointmentBase. This is the core of the RadScheduler appointment, and if you are planning to do any form of custom appointment, you'll want it to inherit from this. Then you can add-on functionality as needed. Here is my addition to the mix, the InterviewAppointment: 01.public class InterviewAppointment : AppointmentBase 02.{ 03. private int _applicantID; 04. public int ApplicantID 05. { 06. get { return this._applicantID; } 07. set 08. { 09. if (_applicantID != value) 10. { 11. _applicantID = value; 12. OnPropertyChanged("ApplicantID"); 13. } 14. } 15. } 16. 17. private int _postingID; 18. public int PostingID 19. { 20. get { return _postingID; } 21. set 22. { 23. if (_postingID != value) 24. { 25. _postingID = value; 26. OnPropertyChanged("PostingID"); 27. } 28. } 29. } 30. 31. private string _body; 32. public string Body 33. { 34. get { return _body; } 35. set 36. { 37. if (_body != value) 38. { 39. _body = value; 40. OnPropertyChanged("Body"); 41. } 42. } 43. } 44. 45. private int _interviewID; 46. public int InterviewID 47. { 48. get { return _interviewID; } 49. set 50. { 51. if (_interviewID != value) 52. { 53. _interviewID = value; 54. OnPropertyChanged("InterviewID"); 55. } 56. } 57. } 58. 59. public override IAppointment Copy() 60. { 61. IAppointment appointment = new InterviewAppointment(); 62. appointment.CopyFrom(this); 63. return appointment; 64. } 65. 66. public override void CopyFrom(IAppointment other) 67. { 68. base.CopyFrom(other); 69. var appointment = other as InterviewAppointment; 70. if (appointment != null) 71. { 72. ApplicantID = appointment.ApplicantID; 73. PostingID = appointment.PostingID; 74. Body = appointment.Body; 75. InterviewID = appointment.InterviewID; 76. } 77. } 78.} Nothing too exciting going on here, we just make sure that our custom fields are persisted (specifically set in CopyFrom at the bottom) and notifications are fired- otherwise this ends up exactly like the standard appointment as far as interactions, etc. But if we've got custom appointment items... that also means we need to customize what our appointment dialog window will look like. Customizing the Edit Appointment Dialog This initially sounds a lot more intimidating than it really is. The first step here depends on what you're dealing with for theming, but for ease of everything I went ahead and extracted my templates in Blend for RadScheduler so I could modify it as I pleased. For the faint of heart, the RadScheduler template is a few thousand lines of goodness since there are some very complex things going on in that control. I've gone ahead and trimmed down the template parts I don't need as much as possible, so what is left is all that is relevant to the Edit Appointment Dialog. Here's the resulting Xaml, with line numbers, so I can explain further: 001.<UserControl.Resources> 002.  003. <helpers:DataContextProxy x:Key="DataContextProxy" /> 004. 005. <telerik:Windows7Theme x:Key="Theme" /> 006. <SolidColorBrush x:Key="DialogWindowBackground" 007. Color="White" /> 008. <SolidColorBrush x:Key="CategorySelectorBorderBrush" 009. Color="#FFB1B1B1" /> 010. <LinearGradientBrush x:Key="RadToolBar_InnerBackground" 011. EndPoint="0.5,1" 012. StartPoint="0.5,0"> 013. <GradientStop Color="#FFFDFEFF" 014. Offset="0" /> 015. <GradientStop Color="#FFDDE9F7" 016. Offset="1" /> 017. <GradientStop Color="#FFE6F0FA" 018. Offset="0.5" /> 019. <GradientStop Color="#FFDCE6F4" 020. Offset="0.5" /> 021. </LinearGradientBrush> 022. <Style x:Key="FormElementTextBlockStyle" 023. TargetType="TextBlock"> 024. <Setter Property="HorizontalAlignment" 025. Value="Right" /> 026. <Setter Property="VerticalAlignment" 027. Value="Top" /> 028. <Setter Property="Margin" 029. Value="15, 15, 0, 2" /> 030. </Style> 031. <Style x:Key="FormElementStyle" 032. TargetType="FrameworkElement"> 033. <Setter Property="Margin" 034. Value="10, 10, 0, 2" /> 035. </Style> 036. <SolidColorBrush x:Key="GenericShallowBorderBrush" 037. Color="#FF979994" /> 038. <telerik:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" /> 039. <telerikScheduler:ImportanceToBooleanConverter x:Key="ImportanceToBooleanConverter" /> 040. <telerikScheduler:NullToVisibilityConverter x:Key="NullToVisibilityConverter" /> 041. <telerikScheduler:InvertedNullToVisibilityConverter x:Key="InvertedNullToVisibilityConverter" /> 042. <scheduler:ResourcesSeparatorConverter x:Key="ResourcesSeparatorConverter" /> 043. <DataTemplate x:Key="IconDataEditTemplate"> 044. <Image Source="/Telerik.Windows.Controls.Scheduler;component/Themes/Office/Images/cal.png" 045. Margin="3,3,0,0" 046. Width="16" 047. Height="16" /> 048. </DataTemplate> 049. <DataTemplate x:Key="SingleSelectionTemplate"> 050. <Grid VerticalAlignment="Stretch" 051. HorizontalAlignment="Stretch"> 052. <Grid.RowDefinitions> 053. <RowDefinition Height="Auto" /> 054. </Grid.RowDefinitions> 055. <Grid.ColumnDefinitions> 056. <ColumnDefinition Width="Auto" 057. MinWidth="84" /> 058. <ColumnDefinition Width="Auto" 059. MinWidth="200" /> 060. </Grid.ColumnDefinitions> 061. <TextBlock x:Name="SelectionNameLabel" 062. Margin="0,13,4,2" 063. Text="{Binding ResourceType.DisplayName}" 064. Style="{StaticResource FormElementTextBlockStyle}" 065. Grid.Column="0" /> 066. <telerikInput:RadComboBox ItemsSource="{Binding ResourceItems}" 067. Width="185" 068. Margin="5,10,20,2" 069. HorizontalAlignment="Left" 070. Grid.Column="1" 071. ClearSelectionButtonVisibility="Visible" 072. ClearSelectionButtonContent="Clear All" 073. DisplayMemberPath="Resource.DisplayName" 074. telerik:StyleManager.Theme="{StaticResource Theme}" 075. SelectedItem="{Binding SelectedItem, Mode=TwoWay}" /> 076. </Grid> 077. </DataTemplate> 078. <DataTemplate x:Key="MultipleSelectionTemplate"> 079. <Grid VerticalAlignment="Stretch" 080. HorizontalAlignment="Stretch"> 081. <Grid.RowDefinitions> 082. <RowDefinition Height="Auto" /> 083. </Grid.RowDefinitions> 084. <Grid.ColumnDefinitions> 085. <ColumnDefinition Width="Auto" 086. MinWidth="84" /> 087. <ColumnDefinition Width="Auto" 088. MinWidth="200" /> 089. </Grid.ColumnDefinitions> 090. <TextBlock x:Name="SelectionNameLabel" 091. Grid.Column="0" 092. Text="{Binding ResourceType.DisplayName}" 093. Margin="0,13,4,2" 094. Style="{StaticResource FormElementTextBlockStyle}" /> 095. <telerikInput:RadComboBox Grid.Column="1" 096. Width="185" 097. HorizontalAlignment="Left" 098. Margin="5,10,20,2" 099. ItemsSource="{Binding ResourceItems}" 100. SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}" 101. ClearSelectionButtonVisibility="Visible" 102. ClearSelectionButtonContent="Clear All" 103. telerik:StyleManager.Theme="{StaticResource Theme}"> 104. <telerikInput:RadComboBox.ItemTemplate> 105. <DataTemplate> 106. <Grid HorizontalAlignment="Stretch" 107. VerticalAlignment="Stretch"> 108. <CheckBox VerticalAlignment="Center" 109. HorizontalContentAlignment="Stretch" 110. VerticalContentAlignment="Center" 111. IsChecked="{Binding IsChecked, Mode=TwoWay}" 112. Content="{Binding Resource.DisplayName}"> 113. <CheckBox.ContentTemplate> 114. <DataTemplate> 115. <TextBlock HorizontalAlignment="Stretch" 116. VerticalAlignment="Stretch" 117. Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" /> 118. </DataTemplate> 119. </CheckBox.ContentTemplate> 120. </CheckBox> 121. </Grid> 122. </DataTemplate> 123. </telerikInput:RadComboBox.ItemTemplate> 124. </telerikInput:RadComboBox> 125. </Grid> 126. </DataTemplate> 127. <scheduler:ResourceTypeTemplateSelector x:Key="ItemTemplateSelector" 128. MultipleSelectionTemplate="{StaticResource MultipleSelectionTemplate}" 129. SingleSelectionTemplate="{StaticResource SingleSelectionTemplate}" /> 130.  131. 132. <ControlTemplate x:Key="EditAppointmentTemplate" 133. TargetType="telerikScheduler:AppointmentDialogWindow"> 134. <StackPanel Background="{TemplateBinding Background}" 135. UseLayoutRounding="True"> 136. <StackPanel Grid.Row="0" 137. Orientation="Horizontal" 138. Background="{StaticResource RadToolBar_InnerBackground}" 139. Grid.ColumnSpan="2" 140. Height="0"> 141.  142. <Border Margin="1,1,0,0" 143. Background="#50000000" 144. HorizontalAlignment="Left" 145. VerticalAlignment="Center" 146. Width="2" 147. Height="16"> 148. <Border Margin="0,0,1,1" 149. Background="#80FFFFFF" 150. HorizontalAlignment="Left" 151. Width="1" /> 152. </Border> 153. <Border Margin="1,1,0,0" 154. Background="#50000000" 155. HorizontalAlignment="Left" 156. VerticalAlignment="Center" 157. Width="2" 158. Height="16"> 159. <Border Margin="0,0,1,1" 160. Background="#80FFFFFF" 161. HorizontalAlignment="Left" 162. Width="1" /> 163. </Border> 164. <TextBlock telerik:LocalizationManager.ResourceKey="ShowAs" 165. VerticalAlignment="Center" 166. Margin="5,0,0,0" /> 167. <telerikInput:RadComboBox ItemsSource="{TemplateBinding TimeMarkers}" 168. Width="100" 169. Height="20" 170. VerticalAlignment="Center" 171. Margin="5,0,0,0" 172. ClearSelectionButtonVisibility="Visible" 173. ClearSelectionButtonContent="Clear" 174. SelectedItem="{Binding TimeMarker,RelativeSource={RelativeSource TemplatedParent},Mode=TwoWay}" 175. telerik:StyleManager.Theme="{StaticResource Theme}"> 176. <telerikInput:RadComboBox.ItemTemplate> 177. <DataTemplate> 178. <StackPanel Orientation="Horizontal"> 179. <Rectangle Fill="{Binding TimeMarkerBrush}" 180. Margin="2" 181. Width="12" 182. Height="12" /> 183. <TextBlock Text="{Binding TimeMarkerName}" 184. Margin="2" /> 185. </StackPanel> 186. </DataTemplate> 187. </telerikInput:RadComboBox.ItemTemplate> 188. </telerikInput:RadComboBox> 189. <telerik:RadToggleButton x:Name="High" 190. BorderThickness="0" 191. Background="{StaticResource RadToolBar_InnerBackground}" 192. DataContext="{TemplateBinding EditedAppointment}" 193. telerik:StyleManager.Theme="{StaticResource Theme}" 194. IsChecked="{Binding Importance,Mode=TwoWay, Converter={StaticResource ImportanceToBooleanConverter},ConverterParameter=High}" 195. Margin="2,2,0,2" 196. Width="23" 197. Height="23" 198. HorizontalContentAlignment="Center" 199. ToolTipService.ToolTip="High importance" 200. CommandParameter="High" 201. Command="telerikScheduler:RadSchedulerCommands.SetAppointmentImportance"> 202. <StackPanel HorizontalAlignment="Center"> 203. <Path Stretch="Fill" 204. Height="10" 205. HorizontalAlignment="Center" 206. VerticalAlignment="Top" 207. Width="5.451" 208. Data="M200.39647,58.840393 C200.39337,58.336426 201.14566,57.683922 202.56244,57.684292 C204.06589,57.684685 204.73764,58.357765 204.72783,58.992363 C205.04649,61.795574 203.04713,64.181099 202.47388,66.133446 C201.93753,64.154961 199.9471,61.560352 200.39647,58.840393 z"> 209. <Path.Fill> 210. <LinearGradientBrush EndPoint="1.059,0.375" 211. StartPoint="-0.457,0.519"> 212. <GradientStop Color="#FFFF0606" 213. Offset="0.609" /> 214. <GradientStop Color="#FFBF0303" 215. Offset="0.927" /> 216. </LinearGradientBrush> 217. </Path.Fill> 218. </Path> 219. <Ellipse Height="3" 220. HorizontalAlignment="Center" 221. Margin="0,-1,0,0" 222. VerticalAlignment="Top" 223. Width="3"> 224. <Ellipse.Fill> 225. <RadialGradientBrush> 226. <GradientStop Color="#FFFF0606" 227. Offset="0" /> 228. <GradientStop Color="#FFBF0303" 229. Offset="1" /> 230. </RadialGradientBrush> 231. </Ellipse.Fill> 232. </Ellipse> 233. </StackPanel> 234. </telerik:RadToggleButton> 235. <telerik:RadToggleButton x:Name="Low" 236. HorizontalContentAlignment="Center" 237. BorderThickness="0" 238. Background="{StaticResource RadToolBar_InnerBackground}" 239. DataContext="{TemplateBinding EditedAppointment}" 240. IsChecked="{Binding Importance,Mode=TwoWay, Converter={StaticResource ImportanceToBooleanConverter},ConverterParameter=Low}" 241. Margin="0,2,0,2" 242. Width="23" 243. Height="23" 244. ToolTipService.ToolTip="Low importance" 245. CommandParameter="Low" 246. telerik:StyleManager.Theme="{StaticResource Theme}" 247. Command="telerikScheduler:RadSchedulerCommands.SetAppointmentImportance"> 248. <Path Stretch="Fill" 249. Height="12" 250. HorizontalAlignment="Center" 251. VerticalAlignment="Top" 252. Width="9" 253. Data="M222.40353,60.139881 L226.65768,60.139843 L226.63687,67.240196 L229.15347,67.240196 L224.37816,71.394943 L219.65274,67.240196 L222.37572,67.219345 z" 254. Stroke="#FF0365A7"> 255. <Path.Fill> 256. <LinearGradientBrush EndPoint="1.059,0.375" 257. StartPoint="-0.457,0.519"> 258. <GradientStop Color="#FFBBE4FF" /> 259. <GradientStop Color="#FF024572" 260. Offset="0.836" /> 261. <GradientStop Color="#FF43ADF4" 262. Offset="0.466" /> 263. </LinearGradientBrush> 264. </Path.Fill> 265. </Path> 266. </telerik:RadToggleButton> 267. </StackPanel > 268. <Border DataContext="{TemplateBinding EditedAppointment}" 269. Background="{Binding Category.CategoryBrush}" 270. Visibility="{Binding Category,Converter={StaticResource NullToVisibilityConverter}}" 271. CornerRadius="3" 272. Height="20" 273. Margin="5,10,5,0"> 274. <TextBlock Text="{Binding Category.DisplayName}" 275. VerticalAlignment="Center" 276. Margin="5,0,0,0" /> 277. </Border> 278. <Grid VerticalAlignment="Stretch" 279. HorizontalAlignment="Stretch" 280. DataContext="{TemplateBinding EditedAppointment}" 281. Background="{TemplateBinding Background}"> 282. <Grid.RowDefinitions> 283. <RowDefinition Height="Auto" /> 284. <RowDefinition Height="Auto" /> 285. <RowDefinition Height="Auto" /> 286. <RowDefinition Height="Auto" /> 287. <RowDefinition Height="Auto" /> 288. <RowDefinition Height="Auto" /> 289. <RowDefinition Height="Auto" /> 290. <RowDefinition Height="Auto" /> 291. <RowDefinition Height="Auto" /> 292. <RowDefinition Height="Auto" /> 293. </Grid.RowDefinitions> 294. <Grid.ColumnDefinitions> 295. <ColumnDefinition Width="Auto" 296. MinWidth="100" /> 297. <ColumnDefinition Width="Auto" 298. MinWidth="200" /> 299. </Grid.ColumnDefinitions> 300.  301. <TextBlock x:Name="SubjectLabel" 302. Grid.Row="0" 303. Grid.Column="0" 304. Margin="0,15,0,2" 305. telerik:LocalizationManager.ResourceKey="Subject" 306. Style="{StaticResource FormElementTextBlockStyle}" /> 307. <TextBox x:Name="Subject" 308. Grid.Row="0" 309. Grid.Column="1" 310. MinHeight="22" 311. Padding="4 2" 312. Width="340" 313. HorizontalAlignment="Left" 314. Text="{Binding Subject, Mode=TwoWay}" 315. MaxLength="255" 316. telerik:StyleManager.Theme="{StaticResource Theme}" 317. Margin="10,12,20,2" /> 318.  319. <TextBlock x:Name="DescriptionLabel" 320. Grid.Row="1" 321. Grid.Column="0" 322. Margin="0,13,0,2" 323. telerik:LocalizationManager.ResourceKey="Body" 324. Style="{StaticResource FormElementTextBlockStyle}" /> 325. <TextBox x:Name="Body" 326. VerticalAlignment="top" 327. Grid.Row="1" 328. Grid.Column="1" 329. Height="Auto" 330. MaxHeight="82" 331. Width="340" 332. HorizontalAlignment="Left" 333. MinHeight="22" 334. Padding="4 2" 335. TextWrapping="Wrap" 336. telerik:StyleManager.Theme="{StaticResource Theme}" 337. Text="{Binding Body, Mode=TwoWay}" 338. AcceptsReturn="true" 339. Margin="10,10,20,2" 340. HorizontalScrollBarVisibility="Auto" 341. VerticalScrollBarVisibility="Auto" /> 342.  343. <TextBlock x:Name="StartDateLabel" 344. Grid.Row="2" 345. Grid.Column="0" 346. Margin="0,13,0,2" 347. telerik:LocalizationManager.ResourceKey="StartTime" 348. Style="{StaticResource FormElementTextBlockStyle}" /> 349. <telerikScheduler:DateTimePicker x:Name="StartDateTime" 350. Height="22" 351. Grid.Row="2" 352. Grid.Column="1" 353. HorizontalAlignment="Left" 354. Margin="10,10,20,2" 355. Style="{StaticResource FormElementStyle}" 356. SelectedDateTime="{Binding Start, Mode=TwoWay}" 357. telerikScheduler:StartEndDatePicker.EndPicker="{Binding ElementName=EndDateTime}" 358. IsTabStop="False" 359. IsEnabled="False" /> 360. <TextBlock x:Name="EndDateLabel" 361. Grid.Row="3" 362. Grid.Column="0" 363. Margin="0,13,0,2" 364. telerik:LocalizationManager.ResourceKey="EndTime" 365. Style="{StaticResource FormElementTextBlockStyle}" /> 366. <telerikScheduler:DateTimePicker x:Name="EndDateTime" 367. Height="22" 368. Grid.Row="3" 369. Grid.Column="1" 370. HorizontalAlignment="Left" 371. Margin="10,10,20,2" 372. Style="{StaticResource FormElementStyle}" 373. IsTabStop="False" 374. IsEnabled="False" 375. SelectedDateTime="{Binding End, Mode=TwoWay}" /> 376.  377. <CheckBox x:Name="AllDayEventCheckbox" 378. IsChecked="{Binding IsAllDayEvent, Mode=TwoWay}" 379. Grid.Row="4" 380. Grid.Column="1" 381. Margin="10,10,20,2" 382. HorizontalAlignment="Left" 383. telerik:StyleManager.Theme="{StaticResource Theme}" 384. telerik:LocalizationManager.ResourceKey="AllDayEvent"> 385. <telerik:CommandManager.InputBindings> 386. <telerik:InputBindingCollection> 387. <telerik:MouseBinding Command="telerikScheduler:RadSchedulerCommands.ChangeTimePickersVisibility" 388. Gesture="LeftClick" /> 389. </telerik:InputBindingCollection> 390. </telerik:CommandManager.InputBindings> 391. </CheckBox> 392. <Grid Grid.Row="5" 393. Grid.ColumnSpan="2"> 394. <Grid.ColumnDefinitions> 395. <ColumnDefinition Width="Auto" 396. MinWidth="100" /> 397. <ColumnDefinition Width="Auto" 398. MinWidth="200" /> 399. </Grid.ColumnDefinitions> 400. <Grid.RowDefinitions> 401. <RowDefinition Height="Auto" /> 402. <RowDefinition Height="Auto" /> 403. </Grid.RowDefinitions> 404. <TextBlock Text="Applicant" 405. Margin="0,13,0,2" 406. Style="{StaticResource FormElementTextBlockStyle}" /> 407. <telerikInput:RadComboBox IsEditable="False" 408. Grid.Column="1" 409. Height="24" 410. VerticalAlignment="Center" 411. ItemsSource="{Binding Source={StaticResource DataContextProxy}, Path=DataSource.ApplicantList}" 412. SelectedValue="{Binding ApplicantID, Mode=TwoWay}" 413. SelectedValuePath="ApplicantID" 414. DisplayMemberPath="FirstName" /> 415. 416. <TextBlock Text="Job" 417. Margin="0,13,0,2" 418. Grid.Row="1" 419. Style="{StaticResource FormElementTextBlockStyle}" /> 420. <telerikInput:RadComboBox IsEditable="False" 421. Grid.Column="1" 422. Grid.Row="1" 423. Height="24" 424. VerticalAlignment="Center" 425. ItemsSource="{Binding Source={StaticResource DataContextProxy}, Path=DataSource.JobsList}" 426. SelectedValue="{Binding PostingID, Mode=TwoWay}" 427. SelectedValuePath="PostingID" 428. DisplayMemberPath="JobTitle"/> 429. </Grid> 430.  431. <Grid x:Name="ResourcesLayout" 432. Grid.Row="7" 433. Grid.Column="0" 434. Grid.ColumnSpan="2" 435. MaxHeight="130" 436. Margin="20,5,20,0"> 437. <Border Margin="0" 438. BorderThickness="1" 439. BorderBrush="{StaticResource GenericShallowBorderBrush}" 440. Visibility="{Binding ElementName=ResourcesScrollViewer, Path=ComputedVerticalScrollBarVisibility}"></Border> 441. <ScrollViewer x:Name="ResourcesScrollViewer" 442. IsTabStop="false" 443. Grid.Row="6" 444. Grid.Column="0" 445. Grid.ColumnSpan="2" 446. Margin="1" 447. telerik:StyleManager.Theme="{StaticResource Theme}" 448. VerticalScrollBarVisibility="Auto"> 449. <scheduler:ResourcesItemsControl x:Name="PART_Resources" 450. HorizontalAlignment="Left" 451. Padding="0,2,0,5" 452. IsTabStop="false" 453. ItemsSource="{TemplateBinding ResourceTypeModels}" 454. ItemTemplateSelector="{StaticResource ItemTemplateSelector}" /> 455. </ScrollViewer> 456. </Grid> 457. <StackPanel x:Name="FooterControls" 458. Margin="5 10 10 10" 459. Grid.Row="8" 460. Grid.Column="1" 461. HorizontalAlignment="Left" 462. Orientation="Horizontal"> 463. <telerik:RadButton x:Name="OKButton" 464. Margin="5" 465. Padding="10 0" 466. MinWidth="80" 467. Command="telerikScheduler:RadSchedulerCommands.SaveAppointment" 468. telerik:StyleManager.Theme="{StaticResource Theme}" 469. telerikNavigation:RadWindow.ResponseButton="Accept" 470. telerik:LocalizationManager.ResourceKey="SaveAndCloseCommandText"> 471. </telerik:RadButton> 472. <telerik:RadButton x:Name="CancelButton" 473. Margin="5" 474. Padding="10 0" 475. MinWidth="80" 476. telerik:LocalizationManager.ResourceKey="Cancel" 477. telerik:StyleManager.Theme="{StaticResource Theme}" 478. telerikNavigation:RadWindow.ResponseButton="Cancel" 479. Command="telerik:WindowCommands.Close"> 480. </telerik:RadButton> 481. </StackPanel> 482. </Grid> 483. <vsm:VisualStateManager.VisualStateGroups> 484. <vsm:VisualStateGroup x:Name="RecurrenceRuleState"> 485. <vsm:VisualState x:Name="RecurrenceRuleIsNull"> 486. <Storyboard> 487. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="StartDateTime" 488. Storyboard.TargetProperty="IsEnabled" 489. Duration="0"> 490. <DiscreteObjectKeyFrame KeyTime="0" 491. Value="True" /> 492. </ObjectAnimationUsingKeyFrames> 493. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EndDateTime" 494. Storyboard.TargetProperty="IsEnabled" 495. Duration="0"> 496. <DiscreteObjectKeyFrame KeyTime="0" 497. Value="True" /> 498. </ObjectAnimationUsingKeyFrames> 499. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AllDayEventCheckbox" 500. Storyboard.TargetProperty="IsEnabled" 501. Duration="0"> 502. <DiscreteObjectKeyFrame KeyTime="0" 503. Value="True" /> 504. </ObjectAnimationUsingKeyFrames> 505. </Storyboard> 506. </vsm:VisualState> 507. <vsm:VisualState x:Name="RecurrenceRuleIsNotNull"> 508. <Storyboard> 509. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="StartDateTime" 510. Storyboard.TargetProperty="IsEnabled" 511. Duration="0"> 512. <DiscreteObjectKeyFrame KeyTime="0" 513. Value="False" /> 514. </ObjectAnimationUsingKeyFrames> 515. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EndDateTime" 516. Storyboard.TargetProperty="IsEnabled" 517. Duration="0"> 518. <DiscreteObjectKeyFrame KeyTime="0" 519. Value="False" /> 520. </ObjectAnimationUsingKeyFrames> 521. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AllDayEventCheckbox" 522. Storyboard.TargetProperty="IsEnabled" 523. Duration="0"> 524. <DiscreteObjectKeyFrame KeyTime="0" 525. Value="False" /> 526. </ObjectAnimationUsingKeyFrames> 527. </Storyboard> 528. </vsm:VisualState> 529. </vsm:VisualStateGroup> 530. </vsm:VisualStateManager.VisualStateGroups> 531. </StackPanel> 532. </ControlTemplate> 533. <DataTemplate x:Key="AppointmentDialogWindowHeaderDataTemplate"> 534. <StackPanel Orientation="Horizontal" 535. MaxWidth="400"> 536. <TextBlock telerik:LocalizationManager.ResourceKey="Event" 537. Visibility="{Binding Appointment.IsAllDayEvent, Converter={StaticResource BooleanToVisibilityConverter}}" /> 538. <TextBlock telerik:LocalizationManager.ResourceKey="Appointment" 539. Visibility="{Binding Appointment.IsAllDayEvent, Converter={StaticResource InvertedBooleanToVisibilityConverter}}" /> 540. <TextBlock Text=" - " /> 541. <TextBlock x:Name="SubjectTextBlock" 542. Visibility="{Binding Appointment.Subject, Converter={StaticResource NullToVisibilityConverter}}" 543. Text="{Binding Appointment.Subject}" /> 544. <TextBlock telerik:LocalizationManager.ResourceKey="Untitled" 545. Visibility="{Binding Appointment.Subject, Converter={StaticResource InvertedNullToVisibilityConverter}}" /> 546. </StackPanel> 547. </DataTemplate> 548. <Style x:Key="EditAppointmentStyle" 549. TargetType="telerikScheduler:AppointmentDialogWindow"> 550. <Setter Property="IconTemplate" 551. Value="{StaticResource IconDataEditTemplate}" /> 552. <Setter Property="HeaderTemplate" 553. Value="{StaticResource AppointmentDialogWindowHeaderDataTemplate}" /> 554. <Setter Property="Background" 555. Value="{StaticResource DialogWindowBackground}" /> 556. <Setter Property="Template" 557. Value="{StaticResource EditAppointmentTemplate}" /> 558. </Style> 559.</UserControl.Resources> The first line there is the DataContextProxy I mentioned previously- we use that again to work a bit of magic in this template. Where we start getting into the dialog in question is line 132, but line 407 is where things start getting interesting. The ItemsSource is pointing at a list that exists in my ViewModel (or code-behind, if it is used as a DataContext), the SelectedValue is the item I am actually binding from the applicant (note the TwoWay binding), and SelectedValuePath and DisplayMemberPath ensure the proper applicant is being displayed from the collection. You will also see similar starting on line 420 where I do the same for the Jobs we'll be displaying. Just to wrap-up the Xaml, here's the RadScheduler declaraction that ties this all together and will be the main focus of our view: 01.<telerikScheduler:RadScheduler x:Name="xJobsScheduler" 02. Grid.Row="1" 03. Grid.Column="1" 04. Width="800" 05. MinWidth="600" 06. Height="500" 07. MinHeight="300" 08. AppointmentsSource="{Binding Interviews}" 09. EditAppointmentStyle="{StaticResource EditAppointmentStyle}" 10. command:AppointmentAddedEventClass.Command="{Binding AddAppointmentCommand}" 11. command:ApptCreatedEventClass.Command="{Binding ApptCreatingCommand}" 12. command:ApptEditedEventClass.Command="{Binding ApptEditedCommand}" 13. command:ApptDeletedEventClass.Command="{Binding ApptDeletedCommand}"> 14.</telerikScheduler:RadScheduler> Now, we get to the ViewModel and what it takes to get that rigged up. And for those of you who remember the jobs post, those command:s in the Xaml are pointing to attached behavior commands that reproduce the respective events. This becomes very handy when we're setting up the code-behind version. ;) ViewModel I've been liking this approach so far, so I'm going to put the entire ViewModel here and then go into the lines of interest. Of course, feel free to ask me questions about anything that isn't clear (by line number, ideally) so I can help out if I have missed anything important: 001.public class SchedulerViewModel : ViewModelBase 002.{ 003. private readonly IEventAggregator eventAggregator; 004. private readonly IRegionManager regionManager; 005. 006. public RecruitingContext context; 007. 008. private ObservableItemCollection<InterviewAppointment> _interviews = new ObservableItemCollection<InterviewAppointment>(); 009. public ObservableItemCollection<InterviewAppointment> Interviews 010. { 011. get { return _interviews; } 012. set 013. { 014. if (_interviews != value) 015. { 016. _interviews = value; 017. NotifyChanged("Interviews"); 018. } 019. } 020. } 021. 022. private QueryableCollectionView _jobsList; 023. public QueryableCollectionView JobsList 024. { 025. get { return this._jobsList; } 026. set 027. { 028. if (this._jobsList != value) 029. { 030. this._jobsList = value; 031. this.NotifyChanged("JobsList"); 032. } 033. } 034. } 035. 036. private QueryableCollectionView _applicantList; 037. public QueryableCollectionView ApplicantList 038. { 039. get { return _applicantList; } 040. set 041. { 042. if (_applicantList != value) 043. { 044. _applicantList = value; 045. NotifyChanged("ApplicantList"); 046. } 047. } 048. } 049. 050. public DelegateCommand<object> AddAppointmentCommand { get; set; } 051. public DelegateCommand<object> ApptCreatingCommand { get; set; } 052. public DelegateCommand<object> ApptEditedCommand { get; set; } 053. public DelegateCommand<object> ApptDeletedCommand { get; set; } 054. 055. public SchedulerViewModel(IEventAggregator eventAgg, IRegionManager regionmanager) 056. { 057. // set Unity items 058. this.eventAggregator = eventAgg; 059. this.regionManager = regionmanager; 060. 061. // load our context 062. context = new RecruitingContext(); 063. LoadOperation<Interview> loadOp = context.Load(context.GetInterviewsQuery()); 064. loadOp.Completed += new EventHandler(loadOp_Completed); 065. 066. this._jobsList = new QueryableCollectionView(context.JobPostings); 067. context.Load(context.GetJobPostingsQuery()); 068. 069. this._applicantList = new QueryableCollectionView(context.Applicants); 070. context.Load(context.GetApplicantsQuery()); 071. 072. AddAppointmentCommand = new DelegateCommand<object>(this.AddAppt); 073. ApptCreatingCommand = new DelegateCommand<object>(this.ApptCreating); 074. ApptEditedCommand = new DelegateCommand<object>(this.ApptEdited); 075. ApptDeletedCommand = new DelegateCommand<object>(this.ApptDeleted); 076. 077. } 078. 079. void loadOp_Completed(object sender, EventArgs e) 080. { 081. LoadOperation loadop = sender as LoadOperation; 082. 083. foreach (var ent in loadop.Entities) 084. { 085. _interviews.Add(EntityToAppointment(ent as Interview)); 086. } 087. } 088. 089. #region Appointment Adding 090. 091. public void AddAppt(object obj) 092. { 093. // now we have a new InterviewAppointment to add to our QCV :) 094. InterviewAppointment newInterview = obj as InterviewAppointment; 095. 096. this.context.Interviews.Add(AppointmentToEntity(newInterview)); 097. this.context.SubmitChanges((s) => 098. { 099. ActionHistory myAction = new ActionHistory(); 100. myAction.InterviewID = newInterview.InterviewID; 101. myAction.PostingID = newInterview.PostingID; 102. myAction.ApplicantID = newInterview.ApplicantID; 103. myAction.Description = String.Format("Interview with {0} has been created by {1}", newInterview.ApplicantID.ToString(), "default user"); 104. myAction.TimeStamp = DateTime.Now; 105. eventAggregator.GetEvent<AddActionEvent>().Publish(myAction); 106. } 107. , null); 108. } 109. 110. public void ApptCreating(object obj) 111. { 112. // handled in the behavior, just a placeholder to ensure it runs :) 113. } 114. 115. #endregion 116. 117. #region Appointment Editing 118. 119. public void ApptEdited(object obj) 120. { 121. Interview editedInterview = (from x in context.Interviews 122. where x.InterviewID == (obj as InterviewAppointment).InterviewID 123. select x).SingleOrDefault(); 124. 125. CopyAppointmentEdit(editedInterview, obj as InterviewAppointment); 126. 127. context.SubmitChanges((s) => { 128. ActionHistory myAction = new ActionHistory(); 129. myAction.InterviewID = editedInterview.InterviewID; 130. myAction.PostingID = editedInterview.PostingID; 131. myAction.ApplicantID = editedInterview.ApplicantID; 132. myAction.Description = String.Format("Interview with {0} has been modified by {1}", editedInterview.ApplicantID.ToString(), "default user"); 133. myAction.TimeStamp = DateTime.Now; 134. eventAggregator.GetEvent<AddActionEvent>().Publish(myAction); } 135. , null); 136. } 137. 138. #endregion 139. 140. #region Appointment Deleting 141. 142. public void ApptDeleted(object obj) 143. { 144. Interview deletedInterview = (from x in context.Interviews 145. where x.InterviewID == (obj as InterviewAppointment).InterviewID 146. select x).SingleOrDefault(); 147. 148. context.Interviews.Remove(deletedInterview); 149. context.SubmitChanges((s) => 150. { 151. ActionHistory myAction = new ActionHistory(); 152. myAction.InterviewID = deletedInterview.InterviewID; 153. myAction.PostingID = deletedInterview.PostingID; 154. myAction.ApplicantID = deletedInterview.ApplicantID; 155. myAction.Description = String.Format("Interview with {0} has been deleted by {1}", deletedInterview.ApplicantID.ToString(), "default user"); 156. myAction.TimeStamp = DateTime.Now; 157. eventAggregator.GetEvent<AddActionEvent>().Publish(myAction); 158. } 159. , null); 160. } 161. 162. #endregion 163. 164. #region Appointment Helpers :) 165. 166. public Interview AppointmentToEntity(InterviewAppointment ia) 167. { 168. Interview newInterview = new Interview(); 169. newInterview.Subject = ia.Subject; 170. newInterview.Body = ia.Body; 171. newInterview.Start = ia.Start; 172. newInterview.End = ia.End; 173. newInterview.ApplicantID = ia.ApplicantID; 174. newInterview.PostingID = ia.PostingID; 175. newInterview.InterviewID = ia.InterviewID; 176. 177. return newInterview; 178. } 179. 180. public InterviewAppointment EntityToAppointment(Interview ia) 181. { 182. InterviewAppointment newInterview = new InterviewAppointment(); 183. newInterview.Subject = ia.Subject; 184. newInterview.Body = ia.Body; 185. newInterview.Start = ia.Start; 186. newInterview.End = ia.End; 187. newInterview.ApplicantID = ia.ApplicantID; 188. newInterview.PostingID = ia.PostingID; 189. newInterview.InterviewID = ia.InterviewID; 190. 191. return newInterview; 192. } 193. 194. public void CopyAppointmentEdit(Interview entityInterview, InterviewAppointment appointmentInterview) 195. { 196. entityInterview.Subject = appointmentInterview.Subject; 197. entityInterview.Body = appointmentInterview.Body; 198. entityInterview.Start = appointmentInterview.Start; 199. entityInterview.End = appointmentInterview.End; 200. entityInterview.ApplicantID = appointmentInterview.ApplicantID; 201. entityInterview.PostingID = appointmentInterview.PostingID; 202. } 203. 204. #endregion 205.} One thing we're doing here which you won't see in any of the other ViewModels is creating a duplicate collection. I know this is something which will be fixed down the line for using RadScheduler, simplifying this process, but with WCF RIA changing as it does I wanted to ensure functionality would remain consistent as I continued development on this application. So, I do a little bit of duplication, but for the greater good. This all takes place starting on line 79, so for every entity that comes back we add it to the collection that is bound to RadScheduler. Otherwise, the DelegateCommands that you see correspond directly to the events they are named after. In each case, rather than sending over the full event arguments, I just send in the appointment in question (coming through as the object obj in all cases) so I can add (line 91), edit (line 119), and delete appointments (line 142) like normal. This just ensures they get updated back to my database. Also, the one bit of code you won't see is for the Appointment Creating (line 110) event- that is because in the command I've created I simply make the replacement I need to: 1.void element_AppointmentCreating(object sender, AppointmentCreatingEventArgs e) 2.{ 3. e.NewAppointment = new InterviewAppointment(); 4. base.ExecuteCommand(); 5.} And the ViewModel is none the wiser, the appointments just work as far as it is concerned since as they are created they become InterviewAppointments. End result? I've customized my EditAppointmentDialog as follows: And adding, editing, and deleting appointments works like a charm. I can even 'edit' by moving appointments around RadScheduler, so as they are dropped into a timeslot they perform their full edit routine and things get updated. And then, the Code-Behind Version Perhaps the thing I like the most about doing one then the other is I get to steal 90% or more of the code from the MVVM version. For example, the only real changes to the Code-Behind Xaml file exist in the control declaration, in which I use events instead of attached-behavior-event-commands: 01.<telerikScheduler:RadScheduler x:Name="xJobsScheduler" 02. Grid.Row="1" 03. Grid.Column="1" 04. Width="800" 05. MinWidth="600" 06. Height="500" 07. MinHeight="300" 08. EditAppointmentStyle="{StaticResource EditAppointmentStyle}" 09. AppointmentAdded="xJobsScheduler_AppointmentAdded" 10. AppointmentCreating="xJobsScheduler_AppointmentCreating" 11. AppointmentEdited="xJobsScheduler_AppointmentEdited" 12. AppointmentDeleted="xJobsScheduler_AppointmentDeleted"> 13.</telerikScheduler:RadScheduler> Easy, right? Otherwise, all the same styling in UserControl.Resources was re-used, right down to the DataContextProxy that lets us bind to a collection from our viewmodel (in this case, our code-behind) to use within the DataTemplate. The code conversion gets even easier, as I could literally copy and paste almost everything from the ViewModel to my Code-Behind, just a matter of pasting the right section into the right event. Here's the code-behind as proof: 001.public partial class SchedulingView : UserControl, INotifyPropertyChanged 002.{ 003. public RecruitingContext context; 004. 005. private QueryableCollectionView _jobsList; 006. public QueryableCollectionView JobsList 007. { 008. get { return this._jobsList; } 009. set 010. { 011. if (this._jobsList != value) 012. { 013. this._jobsList = value; 014. this.NotifyChanged("JobsList"); 015. } 016. } 017. } 018. 019. private QueryableCollectionView _applicantList; 020. public QueryableCollectionView ApplicantList 021. { 022. get { return _applicantList; } 023. set 024. { 025. if (_applicantList != value) 026. { 027. _applicantList = value; 028. NotifyChanged("ApplicantList"); 029. } 030. } 031. } 032. 033. private ObservableItemCollection<InterviewAppointment> _interviews = new ObservableItemCollection<InterviewAppointment>(); 034. public ObservableItemCollection<InterviewAppointment> Interviews 035. { 036. get { return _interviews; } 037. set 038. { 039. if (_interviews != value) 040. { 041. _interviews = value; 042. NotifyChanged("Interviews"); 043. } 044. } 045. } 046. 047. public SchedulingView() 048. { 049. InitializeComponent(); 050. 051. this.DataContext = this; 052. 053. this.Loaded += new RoutedEventHandler(SchedulingView_Loaded); 054. } 055. 056. void SchedulingView_Loaded(object sender, RoutedEventArgs e) 057. { 058. this.xJobsScheduler.AppointmentsSource = Interviews; 059. 060. context = new RecruitingContext(); 061. 062. LoadOperation loadop = context.Load(context.GetInterviewsQuery()); 063. loadop.Completed += new EventHandler(loadop_Completed); 064. 065. this._applicantList = new QueryableCollectionView(context.Applicants); 066. context.Load(context.GetApplicantsQuery()); 067. 068. this._jobsList = new QueryableCollectionView(context.JobPostings); 069. context.Load(context.GetJobPostingsQuery()); 070. } 071. 072. void loadop_Completed(object sender, EventArgs e) 073. { 074. LoadOperation loadop = sender as LoadOperation; 075. 076. _interviews.Clear(); 077. 078. foreach (var ent in loadop.Entities) 079. { 080. _interviews.Add(EntityToAppointment(ent as Interview)); 081. } 082. } 083. 084. private void xJobsScheduler_AppointmentAdded(object sender, Telerik.Windows.Controls.AppointmentAddedEventArgs e) 085. { 086. // now we have a new InterviewAppointment to add to our QCV :) 087. InterviewAppointment newInterview = e.Appointment as InterviewAppointment; 088. 089. this.context.Interviews.Add(AppointmentToEntity(newInterview)); 090. this.context.SubmitChanges((s) => 091. { 092. ActionHistory myAction = new ActionHistory(); 093. myAction.InterviewID = newInterview.InterviewID; 094. myAction.PostingID = newInterview.PostingID; 095. myAction.ApplicantID = newInterview.ApplicantID; 096. myAction.Description = String.Format("Interview with {0} has been created by {1}", newInterview.ApplicantID.ToString(), "default user"); 097. myAction.TimeStamp = DateTime.Now; 098. context.ActionHistories.Add(myAction); 099. context.SubmitChanges(); 100. } 101. , null); 102. } 103. 104. private void xJobsScheduler_AppointmentCreating(object sender, Telerik.Windows.Controls.AppointmentCreatingEventArgs e) 105. { 106. e.NewAppointment = new InterviewAppointment(); 107. } 108. 109. private void xJobsScheduler_AppointmentEdited(object sender, Telerik.Windows.Controls.AppointmentEditedEventArgs e) 110. { 111. Interview editedInterview = (from x in context.Interviews 112. where x.InterviewID == (e.Appointment as InterviewAppointment).InterviewID 113. select x).SingleOrDefault(); 114. 115. CopyAppointmentEdit(editedInterview, e.Appointment as InterviewAppointment); 116. 117. context.SubmitChanges((s) => 118. { 119. ActionHistory myAction = new ActionHistory(); 120. myAction.InterviewID = editedInterview.InterviewID; 121. myAction.PostingID = editedInterview.PostingID; 122. myAction.ApplicantID = editedInterview.ApplicantID; 123. myAction.Description = String.Format("Interview with {0} has been modified by {1}", editedInterview.ApplicantID.ToString(), "default user"); 124. myAction.TimeStamp = DateTime.Now; 125. context.ActionHistories.Add(myAction); 126. context.SubmitChanges(); 127. } 128. , null); 129. } 130. 131. private void xJobsScheduler_AppointmentDeleted(object sender, Telerik.Windows.Controls.AppointmentDeletedEventArgs e) 132. { 133. Interview deletedInterview = (from x in context.Interviews 134. where x.InterviewID == (e.Appointment as InterviewAppointment).InterviewID 135. select x).SingleOrDefault(); 136. 137. context.Interviews.Remove(deletedInterview); 138. context.SubmitChanges((s) => 139. { 140. ActionHistory myAction = new ActionHistory(); 141. myAction.InterviewID = deletedInterview.InterviewID; 142. myAction.PostingID = deletedInterview.PostingID; 143. myAction.ApplicantID = deletedInterview.ApplicantID; 144. myAction.Description = String.Format("Interview with {0} has been deleted by {1}", deletedInterview.ApplicantID.ToString(), "default user"); 145. myAction.TimeStamp = DateTime.Now; 146. context.ActionHistories.Add(myAction); 147. context.SubmitChanges(); 148. } 149. , null); 150. } 151. 152. #region Appointment Helpers :) 153. 154. public Interview AppointmentToEntity(InterviewAppointment ia) 155. { 156. Interview newInterview = new Interview(); 157. newInterview.Subject = ia.Subject; 158. newInterview.Body = ia.Body; 159. newInterview.Start = ia.Start; 160. newInterview.End = ia.End; 161. newInterview.ApplicantID = ia.ApplicantID; 162. newInterview.PostingID = ia.PostingID; 163. newInterview.InterviewID = ia.InterviewID; 164. 165. return newInterview; 166. } 167. 168. public InterviewAppointment EntityToAppointment(Interview ia) 169. { 170. InterviewAppointment newInterview = new InterviewAppointment(); 171. newInterview.Subject = ia.Subject; 172. newInterview.Body = ia.Body; 173. newInterview.Start = ia.Start; 174. newInterview.End = ia.End; 175. newInterview.ApplicantID = ia.ApplicantID; 176. newInterview.PostingID = ia.PostingID; 177. newInterview.InterviewID = ia.InterviewID; 178. 179. return newInterview; 180. } 181. 182. public void CopyAppointmentEdit(Interview entityInterview, InterviewAppointment appointmentInterview) 183. { 184. entityInterview.Subject = appointmentInterview.Subject; 185. entityInterview.Body = appointmentInterview.Body; 186. entityInterview.Start = appointmentInterview.Start; 187. entityInterview.End = appointmentInterview.End; 188. entityInterview.ApplicantID = appointmentInterview.ApplicantID; 189. entityInterview.PostingID = appointmentInterview.PostingID; 190. } 191. 192. #endregion 193. 194. #region INotifyPropertyChanged Members 195. 196. public event PropertyChangedEventHandler PropertyChanged; 197. 198. public void NotifyChanged(string propertyName) 199. { 200. if (string.IsNullOrEmpty(propertyName)) 201. throw new ArgumentException("propertyName"); 202. 203. PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 204. } 205. 206. #endregion 207.} Nice... right? :) One really important thing to note as well. See on line 51 where I set the DataContext before the Loaded event? This is super important, as if you don't have this set before the usercontrol is loaded, the DataContextProxy has no context to use and your EditAppointmentDialog Job/Applicant dropdowns will be blank and empty. Trust me on this, took a little bit of debugging to figure out that by setting the DataContext post-loaded would only lead to disaster and frustration. Otherwise, the only other real difference is that instead of sending an ActionHistory item through an event to get added to the database and saved, I do those right in the callback from submitting. The Result Again, I only have to post one picture because these bad boys used nearly identical code for both the MVVM and the code-behind views, so our end result is... So what have we learned here today? One, for the most part this MVVM thing is somewhat easy. Yeah, you sometimes have to write a bunch of extra code, but with the help of a few useful snippits you can turn the process into a pretty streamlined little workflow. Heck, this story gets even easier as you can see in this blog post by Michael Washington- specifically run a find on 'InvokeCommandAction' and you'll see the section regarding the command on TreeView in Blend 4. Brilliant! MVVM never looked so sweet! Otherwise, it is business as usual with RadScheduler for Silverlight whichever path you're choosing for your development. Between now and the next post, I'll be cleaning up styles a bit (those RadComboBoxes are a little too close to my labels!) and adding some to the RowDetailsViews for Applicants and Jobs, so you can see all the info for an appointment in the dropdown tab view. Otherwise, we're about ready to call a wrap on this oneDid you know that DotNetSlackers also publishes .net articles written by top known .net Authors? We already have over 80 articles in several categories including Silverlight. Take a look: here.

Read the article

WP7 - group of textboxes into some sort of template?

- by Jeff V

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!

Read the article

Binding a wpf listbox to a combobox

- by user293545

Hi there, I have created a very basic wpf application that I want to use to record time entries against different projects. I havent used mvvm for this as I think its an overkill. I have a form that contains a combobox and a listbox. I have created a basic entity model like this What I am trying to do is bind the combobox to Project and whenever I select an item from the combobox it updates the listview with the available tasks associated with that project. This is my xaml so far. I dont have any code behind as I have simply clicked on that Data menu and then datasources and dragged and dropped the items over. The application loads ok and the combobox is been populated however nothing is displaying in the listbox. Can anyone tell me what I have missed? <Window.Resources> <CollectionViewSource x:Key="tasksViewSource" d:DesignSource="{d:DesignInstance l:Task, CreateList=True}" /> <CollectionViewSource x:Key="projectsViewSource" d:DesignSource="{d:DesignInstance l:Project, CreateList=True}" /> </Window.Resources> <Grid DataContext="{StaticResource tasksViewSource}"> <l:NotificationAreaIcon Text="Time Management" Icon="Resources\NotificationAreaIcon.ico" MouseDoubleClick="OnNotificationAreaIconDoubleClick"> <l:NotificationAreaIcon.MenuItems> <forms:MenuItem Text="Open" Click="OnMenuItemOpenClick" DefaultItem="True" /> <forms:MenuItem Text="-" /> <forms:MenuItem Text="Exit" Click="OnMenuItemExitClick" /> </l:NotificationAreaIcon.MenuItems> </l:NotificationAreaIcon> <Button Content="Insert" Height="23" HorizontalAlignment="Left" Margin="150,223,0,0" Name="btnInsert" VerticalAlignment="Top" Width="46" Click="btnInsert_Click" /> <ComboBox Height="23" HorizontalAlignment="Left" Margin="70,16,0,0" Name="comProjects" VerticalAlignment="Top" Width="177" DisplayMemberPath="Project1" ItemsSource="{Binding Source={StaticResource projectsViewSource}}" SelectedValuePath="ProjectID" /> <Label Content="Projects" Height="28" HorizontalAlignment="Left" Margin="12,12,0,0" Name="label1" VerticalAlignment="Top" IsEnabled="False" /> <Label Content="Tasks" Height="28" HorizontalAlignment="Left" Margin="16,61,0,0" Name="label2" VerticalAlignment="Top" /> <ListBox Height="112" HorizontalAlignment="Left" Margin="16,87,0,0" Name="lstTasks" VerticalAlignment="Top" Width="231" DisplayMemberPath="Task1" ItemsSource="{Binding Path=ProjectID, Source=comProjects}" SelectedValuePath="TaskID" /> <TextBox Height="23" HorizontalAlignment="Left" Margin="101,224,0,0" Name="txtMinutes" VerticalAlignment="Top" Width="42" /> <Label Content="Mins to Insert" Height="28" HorizontalAlignment="Left" Margin="12,224,0,0" Name="label3" VerticalAlignment="Top" /> <Button Content="None" Height="23" HorizontalAlignment="Left" Margin="203,223,0,0" Name="btnNone" VerticalAlignment="Top" Width="44" /> </Grid>

Read the article

Native ComboBox not displaying choices correctly

- by anothershrubery

EDIT: It seems that ListPicker is the way to go but I have had further problems with that detailed Microsoft.Phone.Controls.Toolkit ListPicker throws XamlParseException I have the following ComboBox in code: <ComboBox x:Name="Result" Grid.Column="6" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" Background="White"> <ComboBoxItem Content="Win" /> <ComboBoxItem Content="Place" /> <ComboBoxItem Content="Lose" /> </ComboBox> But it does not display as I would have expected. When you drop down the ComboBox the options don't appear, it's just like empty items. See below: However, when an item is selected, it displays correctly and the correct index/item is returned. See below: I'm sure there is something simple I have missed but can't put my finger on it. EDIT: Ok I am posting the full code for this. I have a user control, OddsRow, that looks like this: <UserControl xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" x:Class="MojoPinBetOddsCalculator.OddsRow" 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" mc:Ignorable="d" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" d:DesignHeight="480" d:DesignWidth="480"> <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}"> <Grid.RowDefinitions> <RowDefinition Height="70"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="50*"></ColumnDefinition> <ColumnDefinition Width="70*"></ColumnDefinition> <ColumnDefinition Width="30*"></ColumnDefinition> <ColumnDefinition Width="70*"></ColumnDefinition> <ColumnDefinition Width="70*"></ColumnDefinition> <ColumnDefinition Width="70*" ></ColumnDefinition> <ColumnDefinition Width="100*"></ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock x:Name="RowNumber" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock> <TextBox x:Name="OddsNumerator" Grid.Column="1" Width="90" Height="70" HorizontalAlignment="Center" TextAlignment="Center" VerticalAlignment="Center" MaxLength="3" InputScope="TelephoneNumber"></TextBox> <TextBlock x:Name="Slash" Grid.Column="2" Text="/" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock> <TextBox x:Name="OddsDenominator" Grid.Column="3" Width="90" Height="70" VerticalAlignment="Center" TextAlignment="Center" MaxLength="3" HorizontalAlignment="Center" InputScope="TelephoneNumber"></TextBox> <CheckBox x:Name="EachWay" Grid.Column="4" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10,0,0,0" /> <CheckBox x:Name="Place" Grid.Column="5" HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="0" Width="71" Margin="10,0,0,0" Padding="0" /> <ComboBox x:Name="Result" Grid.Column="6" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" Background="White"> <ComboBoxItem Content="Win" /> <ComboBoxItem Content="Place" /> <ComboBoxItem Content="Lose" /> </ComboBox> </Grid> </UserControl> And it is displayed in the MainPage like so: <phone:PhoneApplicationPage xmlns:my="clr-namespace:MojoPinBetOddsCalculator" x:Class="MojoPinBetOddsCalculator.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="Portrait" Orientation="Portrait" shell:SystemTray.IsVisible="True">  <Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions>  <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> <TextBlock x:Name="ApplicationTitle" Text="BET ODDS CALCULATOR" Style="{StaticResource PhoneTextNormalStyle}"/> <TextBlock x:Name="PageTitle" Text="calculate" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> </StackPanel>  <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" HorizontalAlignment="Stretch"> <Grid x:Name="Scrollable"> <ScrollViewer> <Grid x:Name="BettingGrid"> <Grid.RowDefinitions> <RowDefinition Height="Auto"></RowDefinition> <RowDefinition Height="*"></RowDefinition> </Grid.RowDefinitions> <Grid x:Name="BetList"> <Grid.RowDefinitions> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="70"></RowDefinition> <RowDefinition Height="70"></RowDefinition> <RowDefinition Height="70"></RowDefinition> <RowDefinition Height="70"></RowDefinition> <RowDefinition Height="70"></RowDefinition> <RowDefinition Height="70"></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="50*"></ColumnDefinition> <ColumnDefinition Width="70*"></ColumnDefinition> <ColumnDefinition Width="30*"></ColumnDefinition> <ColumnDefinition Width="70*"></ColumnDefinition> <ColumnDefinition Width="70*"></ColumnDefinition> <ColumnDefinition Width="70*"></ColumnDefinition> <ColumnDefinition Width="100*"></ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock Text="EW" Style="{StaticResource PhoneTextNormalStyle}" Grid.Row="0" Grid.Column="4" HorizontalAlignment="Center" /> <TextBlock Text="Place" Style="{StaticResource PhoneTextNormalStyle}" Grid.Row="0" Grid.Column="5" HorizontalAlignment="Center" /> <TextBlock Text="Result" Style="{StaticResource PhoneTextNormalStyle}" Grid.Row="0" Grid.Column="6" HorizontalAlignment="Center" /> <my:OddsRow Grid.Row="1" Grid.ColumnSpan="7" Row="1"/> <my:OddsRow Grid.Row="2" Grid.ColumnSpan="7" Row="2"/> <my:OddsRow Grid.Row="3" Grid.ColumnSpan="7" Row="3"/> <my:OddsRow Grid.Row="4" Grid.ColumnSpan="7" Row="4"/> <my:OddsRow Grid.Row="5" Grid.ColumnSpan="7" Row="5"/> <my:OddsRow Grid.Row="6" Grid.ColumnSpan="7" Row="6"/> </Grid> <Grid x:Name="ControlsGrid" Grid.Row="1"> <Button x:Name="AddRowButton" Background="#BFFFFFFF" BorderBrush="#BFFFFFFF" Foreground="Black" Content="Add Row" FontSize="16" Click="AddRowButton_Click" Height="70" /> </Grid> </Grid> </ScrollViewer> </Grid> </Grid> </Grid> </phone:PhoneApplicationPage> Separately the ComboBox works, and also the code for the OddsRow works as expected... separately. When combined it doesn't display the items. OddsRow.xaml.cs public partial class OddsRow : UserControl { private int m_Row; public OddsRow() { InitializeComponent(); } public int Row { get { return m_Row; } set { m_Row = value; RowNumber.Text = m_Row + " - "; } } }

Read the article

Silverlight: how to modify the width of ListBox Items in response to user input?

- by sympatric greg

I have a simple Silverlight 3 UserControl whose width increases or decreases based on user input. The controls become more wide or more narrow as desired, except for the ListBox items. The ListBox Items grow horizontally to fit their content regardless of HorizontalContentAlignment being set to 'Stretch'. Should I be able to set a property on ListBox.ItemContainerStyle to tell it to widen/narrow with the parent ListBox? There needs to be no horizontal scrolling within this Listbox. Or is there a way to specify the ItemTemplate's StackPanel width that can be modified at runtime? I have bound this to a StaticResource, but do not understand whether I should be able to change the resource value. Can I create and bind to a DependencyProperty of the UserControl itself? I have not determined the syntax of this within the xaml. code: <UserControl x:Class="TheAssembly.GraphicViewer" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:userControls="clr-namespace:TheAssembly" xmlns:core="clr-namespace:System;assembly=mscorlib"> <UserControl.Resources> <userControls:DictionaryAttributeConverter x:Name="MyDictionaryAttributeConverter" /> <core:Double x:Key="ListItemWidth">155</core:Double> </UserControl.Resources> <Grid x:Name="LayoutRoot" Width="175" > <Border Style="{StaticResource DraggableWindowBorder}"> <StackPanel x:Name="RootStackPanel" Orientation="Vertical" HorizontalAlignment="Stretch"> <Border Background="Black" HorizontalAlignment="Stretch" Margin="0"> <TextBlock x:Name="Header" Foreground="White" FontSize="14" TextWrapping="Wrap" Margin="2,0,2,0" Height="25" HorizontalAlignment="Left" Text="{Binding HeaderText}"/> </Border> <TextBlock x:Name="Title" Style="{StaticResource GraphicViewerDetail}" FontSize="12" FontWeight="Medium" TextWrapping="Wrap" Text="{Binding Title}" Margin="3,0,0,0" HorizontalAlignment="Left"/> <ListBox x:Name="AttributeListBox" ItemsSource="{Binding Attributes}" BorderBrush="Red" HorizontalContentAlignment="Stretch" Foreground="AntiqueWhite" Background="Transparent" IsEnabled="False" HorizontalAlignment="Stretch" ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Hidden"> <ListBox.ItemContainerStyle> <Style TargetType="ListBoxItem"> <Setter Property="HorizontalAlignment" Value="Stretch"/> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> <Setter Property="Margin" Value="0,-2,0,0"/> </Style> </ListBox.ItemContainerStyle> <ListBox.ItemTemplate> <DataTemplate> <StackPanel x:Name="ListBoxItemStackPanel" HorizontalAlignment="Stretch" Orientation="Vertical" > <TextBlock FontSize="10" Text="{Binding Key}" Foreground="White" FontWeight="Bold" HorizontalAlignment="Stretch" Margin="2,0,0,0" TextWrapping="Wrap"/> <TextBlock FontSize="10" Text="{Binding Value}" Foreground="White" Margin="6,-2,0,0" TextWrapping="Wrap" HorizontalAlignment="Stretch" /> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </StackPanel> </Border> </Grid>

Read the article

Handling null values and missing object properties in Silverlight 4

- by PeterTweed

Before Silverlight 4 to bind a data object to the UI and display a message associated with either a null value or if the binding path was wrong, you would need to write a Converter. In Silverlight 4 we find the addition of the markup extensions TargetNullValue and FallbackValue that allows us to display a value when a null value is found in the bound to property and display a value when the property being bound to is not found. This post will show you how to use both markup extensions. Steps: 1. Create a new Silverlight 4 application 2. In the body of the MainPage.xaml.cs file replace the MainPage class with the following code: public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); this.Loaded += new RoutedEventHandler(MainPage_Loaded); } void MainPage_Loaded(object sender, RoutedEventArgs e) { person p = new person() { NameValue = "Peter Tweed" }; this.DataContext = p; } } public class person { public string NameValue { get; set; } public string TitleValue { get; set; } } This code defines a class called person with two properties. A new instance of the class is created, only defining the value for one of the properties and bound to the DataContext of the page. 3. In the MainPage.xaml file copy the following XAML into the LayoutRoot grid: <Grid.RowDefinitions> <RowDefinition Height="60*" /> <RowDefinition Height="28*" /> <RowDefinition Height="28*" /> <RowDefinition Height="30*" /> <RowDefinition Height="154*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="86*" /> <ColumnDefinition Width="314*" /> </Grid.ColumnDefinitions> <TextBlock Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="32,0,0,0" Name="textBlock1" Text="Name Value:" VerticalAlignment="Top" /> <TextBlock Grid.Row="2" Height="23" HorizontalAlignment="Left" Margin="32,0,0,0" Name="textBlock2" Text="Title Value:" VerticalAlignment="Top" /> <TextBlock Grid.Row="3" Height="23" HorizontalAlignment="Left" Margin="32,0,0,0" Name="textBlock3" Text="Non Existant Value:" VerticalAlignment="Top" /> <TextBlock Grid.Column="1" Grid.Row="1" Height="23" HorizontalAlignment="Left" Name="textBlock4" Text="{Binding NameValue, TargetNullValue='No Name!!!!!!!'}" VerticalAlignment="Top" Margin="6,0,0,0" /> <TextBlock Grid.Column="1" Grid.Row="2" Height="23" HorizontalAlignment="Left" Name="textBlock5" Text="{Binding TitleValue, TargetNullValue='No Title!!!!!!!'}" VerticalAlignment="Top" Margin="6,0,0,0" /> <TextBlock Grid.Column="1" Grid.Row="3" Height="23" HorizontalAlignment="Left" Margin="6,0,0,0" Name="textBlock6" Text="{Binding AgeValue, FallbackValue='No such property!'}" VerticalAlignment="Top" /> This XAML defines three textblocks – two of which use the TargetNull and one that uses the FallbackValue markup extensions. 4. Run the application and see the person name displayed as defined for the person object, the expected string displayed for the TargetNullValue when no value exists for the boudn property and the expected string displayed for the FallbackValue when the property bound to is not found on the bound object. It's that easy!

Read the article

Formatting made easy - Silverlight 4

- by PeterTweed

One of the simplest tasks in business apps is displaying different types of data to be read in the format that the user expects them. In Silverlight versions until Silverlight 4 this has meant using a Converter to format data during binding. This involves writing code for the formatting of the data to bind, instead of simply defining the formatting to use for the data in question where you bind the data to the control. In Silverlight 4 we find the addition of the StringFormat markup extension that allows us to do exactly this. Of course the nice thing is the ability to use the common formatting conventions available in C# through the String.Format function. This post will show you how to use three of the common formatting conventions - currency, a defined number of decimal places for a number and a date format. Steps: 1. Create a new Silverlight 4 application 2. In the body of the MainPage.xaml.cs file replace the MainPage class with the following code: public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); this.Loaded += new RoutedEventHandler(MainPage_Loaded); } void MainPage_Loaded(object sender, RoutedEventArgs e) { info i = new info() { PriceValue = new Decimal(9.2567), DoubleValue = 1.2345678, DateValue = DateTime.Now }; this.DataContext = i; } } public class info { public decimal PriceValue { get; set; } public double DoubleValue { get; set; } public DateTime DateValue { get; set; } } This code defines a class called info with different data types for the three properties. A new instance of the class is created and bound to the DataContext of the page. 3. In the MainPage.xaml file copy the following XAML into the LayoutRoot grid: <Grid.RowDefinitions> <RowDefinition Height="60*" /> <RowDefinition Height="28*" /> <RowDefinition Height="28*" /> <RowDefinition Height="30*" /> <RowDefinition Height="154*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="86*" /> <ColumnDefinition Width="314*" /> </Grid.ColumnDefinitions> <TextBlock Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="32,0,0,0" Name="textBlock1" Text="Price Value:" VerticalAlignment="Top" /> <TextBlock Grid.Row="2" Height="23" HorizontalAlignment="Left" Margin="32,0,0,0" Name="textBlock2" Text="Decimal Value:" VerticalAlignment="Top" /> <TextBlock Grid.Row="3" Height="23" HorizontalAlignment="Left" Margin="32,0,0,0" Name="textBlock3" Text="Date Value:" VerticalAlignment="Top" /> <TextBlock Grid.Column="1" Grid.Row="1" Height="23" HorizontalAlignment="Left" Name="textBlock4" Text="{Binding PriceValue, StringFormat='C'}" VerticalAlignment="Top" Margin="6,0,0,0" /> <TextBlock Grid.Column="1" Grid.Row="2" Height="23" HorizontalAlignment="Left" Margin="6,0,0,0" Name="textBlock5" Text="{Binding DoubleValue, StringFormat='N3'}" VerticalAlignment="Top" /> <TextBlock Grid.Column="1" Grid.Row="3" Height="23" HorizontalAlignment="Left" Margin="6,0,0,0" Name="textBlock6" Text="{Binding DateValue, StringFormat='yyyy MMM dd'}" VerticalAlignment="Top" /> This XAML defines three textblocks that use the StringFormat markup extension. The three examples use the C for currency, N3 for a number with 3 decimal places and yyy MM dd for a date that displays year 3 letter month and 2 number date. 4. Run the application and see the data displayed with the correct formatting. It's that easy!

Read the article

Binding a TextBox's Width to its parent container's ActualWidth

- by Praetorian

Hi, I'm loading a Textbox and a Button into a horizontal StackPanel programmatically. The size of the button (which only contains an Image) is fixed, but I can't get the textbox to fill the available width of its parent. This is what the code looks like: StackPanel parent = new StackPanel() { Orientation = Orientation.Horizontal, HorizontalAlignment = HorizontalAlignment.Stretch, VerticalAlignment = VerticalAlignment.Top, }; TextBox textbox = new TextBox() { HorizontalAlignment = HorizontalAlignment.Stretch, VerticalAlignment = VerticalAlignment.Top, //MinWidth = 375, }; Button btn = new Button() { Content = new Image() { MaxHeight = 40, MaxWidth = 40, MinHeight = 40, MinWidth = 40, Margin = new Thickness( 0 ), Source = new BitmapImage( new Uri( "btnimage.png", UriKind.Relative ) ), }, HorizontalAlignment = HorizontalAlignment.Right, BorderBrush = new SolidColorBrush( Colors.Transparent ), Margin = new Thickness( 0 ), }; btn.Click += ( ( s, e ) => OnBtnClicked( s, e, textbox ) ); parent.Children.Add( textbox ); parent.Children.Add( btn ); If I uncomment the MinWidth setting for the textbox it is displayed as I want it to, but I'd like to not have to specify a width explicitly. I tried adding a binding as follows but that doesn't work at all (the textbox just disappears!) Binding widthBinding = new Binding() { Source = parent.ActualWidth, }; passwdBox.SetBinding( TextBox.WidthProperty, widthBinding ); Thanks for your help in advance!

Read the article

How to find if a Item in a ListBox has the focus?

- by eitan barazani

I have a List box defined like this: <ListBox x:Name="EmailList" ItemsSource="{Binding MailBoxManager.Inbox.EmailList}" SelectedItem="{Binding SelectedMessage, Mode=TwoWay}" Grid.Row="1"> <ListBox.ItemTemplate> <DataTemplate> <usrctrls:MessageSummary /> </DataTemplate> </ListBox.ItemTemplate> </ListBox> The UserControl is defined like this: <UserControl x:Class="UserControls.MessageSummary" 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" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="600"> <UserControl.Resources> </UserControl.Resources> <Grid HorizontalAlignment="Left"> <Grid.ColumnDefinitions> <ColumnDefinition Width="50" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <CheckBox Grid.Column="0" VerticalAlignment="Center" /> <Grid Grid.Column="1" Margin="0,0,12,0"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Grid Grid.Row="0" Grid.Column="0" HorizontalAlignment="Stretch"> <Grid.ColumnDefinitions> <ColumnDefinition Width="30" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="80" /> <ColumnDefinition Width="80" /> </Grid.ColumnDefinitions> <Image x:Name="FlaggedImage" Grid.Column="0" Width="20" Height="10" Margin="0" VerticalAlignment="Center" HorizontalAlignment="Center" Source="/Assets/ico_flagged_white.png" /> <TextBlock x:Name="Sender" Grid.Column="1" Text="{Binding EmailProperties.DisplayFrom}" Style="{StaticResource TextBlock_SenderRowTitle}" HorizontalAlignment="Left" VerticalAlignment="Center" /> <Grid x:Name="ImagesContainer" Grid.Column="2" VerticalAlignment="Center"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image x:Name="ImgImportant" Grid.Column="0" Width="20" Height="20" VerticalAlignment="Center" HorizontalAlignment="Center" Source="ms-appx:///Assets/ico_important_red.png" /> <Image x:Name="ImgFolders" Grid.Column="1" Width="20" Height="20" VerticalAlignment="Center" HorizontalAlignment="Center" Source="ms-appx:///Assets/ico_ico_addtofolder.png" /> <Image x:Name="ImgAttachment" Grid.Column="2" Width="20" Height="20" VerticalAlignment="Center" HorizontalAlignment="Center" Source="ms-appx:///Assets/ico_attachment_lightgray.png" /> <Image x:Name="ImgFlag" Grid.Column="3" Width="20" Height="20" VerticalAlignment="Center" HorizontalAlignment="Center" Source="ms-appx:///Assets/ico_flag.png" /> </Grid> <TextBlock x:Name="Time" Grid.Column="3" Text="{Binding EmailProperties.DateReceived, Converter={StaticResource EmailHeaderTimeConverter}}" TextAlignment="Center" FontSize="16" VerticalAlignment="Center" Margin="0" /> </Grid> <TextBlock Grid.Row="1" Text="{Binding EmailProperties.Subject}" TextTrimming="WordEllipsis" Margin="0,10" /> <TextBlock Grid.Row="2" Text="{Binding EmailProperties.Preview}" TextTrimming="WordEllipsis" /> </Grid> </Grid> The MessageSummary is a UserControl. I would like to bind the foreground color of the Items of the ListBox to whether the item is the one selected in the list box, i.e. I would like the Item's foreground color to be Black if not selected and White if the item is selected. How can it be done? Thanks,

Read the article

What is the best way to slide a panel in WPF?

- by Kris Erickson

I have a fairly simple UserControl that I have made (pardon my Xaml I am just learning WPF) and I want to slide the off the screen. To do so I am animating a translate transform (I also tried making the Panel the child of a canvas and animating the X position with the same results), but the panel moves very jerkily, even on a fairly fast new computer. What is the best way to slide in and out (preferably with KeySplines so that it moves with inertia) without getting the jerkyness. I only have 8 buttons on the panel, so I didn't think it would be too much of a problem. Here is the Xaml I am using, it runs fine in Kaxaml, but it is very jerky and slow (as well as being jerkly and slow when run compiled in a WPF app). <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="1002" Height="578"> <UserControl.Resources> <Style TargetType="Button"> <Setter Property="Control.Padding" Value="4"/> <Setter Property="Control.Margin" Value="10"/> <Setter Property="Control.Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid Name="backgroundGrid" Width="210" Height="210" Background="#00FFFFFF"> <Grid.BitmapEffect> <BitmapEffectGroup> <DropShadowBitmapEffect x:Name="buttonDropShadow" ShadowDepth="2"/> <OuterGlowBitmapEffect x:Name="buttonGlow" GlowColor="#A0FEDF00" GlowSize="0"/> </BitmapEffectGroup> </Grid.BitmapEffect> <Border x:Name="background" Margin="1,1,1,1" CornerRadius="15"> <Border.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="#FF0062B6"/> <GradientStop Offset="1" Color="#FF0089FE"/> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Border.Background> </Border> <Border Margin="1,1,1,0" BorderBrush="#FF000000" BorderThickness="1.5" CornerRadius="15"/> <ContentPresenter HorizontalAlignment="Center" Margin="{TemplateBinding Control.Padding}" VerticalAlignment="Center" Content="{TemplateBinding ContentControl.Content}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </UserControl.Resources> <Canvas> <Grid x:Name="Panel1" Height="578" Canvas.Left="0" Canvas.Top="0"> <Grid.RenderTransform> <TransformGroup> <TranslateTransform x:Name="panelTranslate" X="0" Y="0"/> </TransformGroup> </Grid.RenderTransform> <Grid.RowDefinitions> <RowDefinition Height="287"/> <RowDefinition Height="287"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition x:Name="Panel1Col1"/> <ColumnDefinition x:Name="Panel1Col2"/> <ColumnDefinition x:Name="Panel1Col3"/> <ColumnDefinition x:Name="Panel1Col4"/>  </Grid.ColumnDefinitions> <Button x:Name="Panel1Product1" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center"> <Button.Triggers> <EventTrigger RoutedEvent="Button.Click" SourceName="Panel1Product1"> <EventTrigger.Actions> <BeginStoryboard> <Storyboard> <DoubleAnimation BeginTime="00:00:00.6" Duration="0:0:3" From="0" Storyboard.TargetName="panelTranslate" Storyboard.TargetProperty="X" To="-1000"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Button.Triggers> </Button> <Button x:Name="Panel1Product2" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/> <Button x:Name="Panel1Product3" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center"/> <Button x:Name="Panel1Product4" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/> <Button x:Name="Panel1Product5" Grid.Column="2" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center"/> <Button x:Name="Panel1Product6" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/> <Button x:Name="Panel1Product7" Grid.Column="3" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center"/> <Button x:Name="Panel1Product8" Grid.Column="3" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </Canvas> </UserControl>

Read the article

Edit TabControl template in Silverlight project

- by philbrowndotcom

I'm trying to modify the template for the TabControl in my silverlight application. I used Expression Blend to get the Template and copied it into my project. I did this before for Expander and got it to work with a few minor adjustments. The template for TabControl references the ns/assembly "clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls" and uses the TabPanel control from it. I can't seem to make a reference to this. I'm using silverlight 3 and .NET 3 Thanks <UserControl.Resources> <ControlTemplate x:Key="mytemplate" TargetType="sdk:TabControl"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualStateGroup.Transitions> <VisualTransition GeneratedDuration="0"/> </VisualStateGroup.Transitions> <VisualState x:Name="Normal"/> <VisualState x:Name="Disabled"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualTop"> <SplineDoubleKeyFrame KeyTime="0" Value="1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DisabledVisualBottom"> <SplineDoubleKeyFrame KeyTime="0" Value="1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DisabledVisualLeft"> <SplineDoubleKeyFrame KeyTime="0" Value="1"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DisabledVisualRight"> <SplineDoubleKeyFrame KeyTime="0" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid x:Name="TemplateTop" Visibility="Collapsed"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <System_Windows_Controls_Primitives:TabPanel x:Name="TabPanelTop" Margin="2,2,2,-1" Canvas.ZIndex="1"/> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0,0,3,3" MinWidth="10" MinHeight="10" Grid.Row="1"> <ContentPresenter x:Name="ContentTop" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/> </Border> <Border x:Name="DisabledVisualTop" Background="#8CFFFFFF" CornerRadius="0,0,3,3" IsHitTestVisible="False" Opacity="0" Grid.Row="1" Grid.RowSpan="2" Canvas.ZIndex="1"/> </Grid> <Grid x:Name="TemplateBottom" Visibility="Collapsed"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <System_Windows_Controls_Primitives:TabPanel x:Name="TabPanelBottom" Margin="2,-1,2,2" Grid.Row="1" Canvas.ZIndex="1"/> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="3,3,0,0" MinWidth="10" MinHeight="10"> <ContentPresenter x:Name="ContentBottom" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/> </Border> <Border x:Name="DisabledVisualBottom" Background="#8CFFFFFF" CornerRadius="3,3,0,0" IsHitTestVisible="False" Opacity="0" Canvas.ZIndex="1"/> </Grid> <Grid x:Name="TemplateLeft" Visibility="Collapsed"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <System_Windows_Controls_Primitives:TabPanel x:Name="TabPanelLeft" Margin="2,2,-1,2" Canvas.ZIndex="1"/> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="1" CornerRadius="0,3,3,0" MinWidth="10" MinHeight="10"> <ContentPresenter x:Name="ContentLeft" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/> </Border> <Border x:Name="DisabledVisualLeft" Background="#8CFFFFFF" Grid.Column="1" CornerRadius="0,3,3,0" IsHitTestVisible="False" Opacity="0" Canvas.ZIndex="1"/> </Grid> <Grid x:Name="TemplateRight" Visibility="Collapsed"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <System_Windows_Controls_Primitives:TabPanel x:Name="TabPanelRight" Grid.Column="1" Margin="-1,2,2,2" Canvas.ZIndex="1"/> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="3,0,0,3" MinWidth="10" MinHeight="10"> <ContentPresenter x:Name="ContentRight" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/> </Border> <Border x:Name="DisabledVisualRight" Background="#8CFFFFFF" CornerRadius="3,0,0,3" IsHitTestVisible="False" Margin="0" Opacity="0" Canvas.ZIndex="1"/> </Grid> </Grid> </ControlTemplate> </UserControl.Resources>

Read the article

WPF ListView's GridView item expansion

- by NT_

Is it possible for a WPF ListView that uses a GridView view (ListView.View property) to have one of its items 'expanded' i.e. create some control underneath the item. I cannot simply add another item as it will assume the GridView item template, i.e. appear with columns rather than being a single usable area. This is how my list view currently looks like, it just has two columns: <ListView x:Name="SomeName" Style="{DynamicResource NormalListView}" > <ListView.View> <GridView ColumnHeaderContainerStyle="{DynamicResource NormalListViewHeader}"> <GridViewColumn Width="140" x:Name="Gvc_Name"> <GridViewColumn.CellTemplate> <DataTemplate> <Border Style="{DynamicResource ListViewCellSeparatorBorder}" > <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <TextBlock Text="{Binding Path=Name}" FontWeight="Bold" HorizontalAlignment="Left" /> <TextBlock Text="{Binding Path=Type}" HorizontalAlignment="Left" /> </StackPanel> </Border> </DataTemplate> </GridViewColumn.CellTemplate> <Border Style="{DynamicResource ListViewHeaderBorderContainer}"> <TextBlock Style="{DynamicResource ListViewHeaderText}" Text="Name"/> </Border> </GridViewColumn> <GridViewColumn Width="120" x:Name="Gvc_Timestamp"> <GridViewColumn.CellTemplate> <DataTemplate> <Border Style="{DynamicResource ListViewCellSeparatorBorder}"> <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <TextBlock Text="{Binding Path=TimestampDate}" HorizontalAlignment="Center" /> <TextBlock Text="{Binding Path=TimestampTime}" FontWeight="Bold" HorizontalAlignment="Center" /> </StackPanel> </Border> </DataTemplate> </GridViewColumn.CellTemplate> <Border Style="{DynamicResource ListViewHeaderBorderContainer}"> <TextBlock Style="{DynamicResource ListViewHeaderText}" Text="Processed"/> </Border> </GridViewColumn> </GridView> </ListView.View> </ListView> Many thanks!

Read the article

How to bind a WPF CustomControl to a ListBox

- by VivyG

I've just started to learn WPF this week so please accept my apologies if I am being stupid or missing fundamental points! Iam trying to build a very simple Contact browser. I have a Collection of Contact objects that displayed in a ListBox control which shows the FullName of the Contact and to the right I have a customControl called BasicContactCard. This is the XAML for the ContacWindow that displays the ListBox: <DockPanel Width="auto" Height="auto" Margin="8 8 8 8"> <Border Height="56" HorizontalAlignment="Stretch" VerticalAlignment="Top" BorderThickness="1" CornerRadius="8" DockPanel.Dock="Top" Background="Beige"> <TextBox Height="32" Margin="23,5,135,5" Text="Search for contact here" FontStyle="Italic" Foreground="#FFAD9595" FontSize="14" BorderBrush="LightGray"/> </Border> <ListBox x:Name="contactList" DockPanel.Dock="Left" Width="192" Height="auto" Margin="5 4 0 8" /> <Grid> <Grid.RowDefinitions> <RowDefinition Height="1*" /> <RowDefinition Height="0.125*" /> </Grid.RowDefinitions> <local:BasicContactCard Margin="8 8 8 8" /> <Button Grid.Row="1" x:Name="exit" Content="Exit" HorizontalAlignment="Right" Width="50" Height="25" Click="exit_Click" /> </Grid> </DockPanel> and this is the XAML for the CustomControl: <DockPanel Width="auto " Height="auto" Margin="8,8,8,8"> <Grid Width="auto" Height="auto" DockPanel.Dock="Top"> <Grid.RowDefinitions> <RowDefinition Height="1*" /> <RowDefinition Height="1*" /> <RowDefinition Height="1*" /> <RowDefinition Height="1*" /> </Grid.RowDefinitions> <TextBlock x:Name="companyField" Grid.Row="0" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="8,8,8,8" Text="Company"/> <TextBlock x:Name="contactField" Grid.Row="1" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="8,8,8,8" Text="Contact"/> <TextBlock x:Name="phoneField" Grid.Row="2" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="8,8,8,8" Text="Phone"/> <TextBlock x:Name="emailField" Grid.Row="3" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="8,8,8,8" Text="email"/> </Grid> </DockPanel> The problem I have is how do I bind the individual elements of the CustomControl to the object behind the SelectedItem in the ListBox?

Read the article

MVVM - implementing 'IsDirty' functionality to a ModelView in order to save data

- by Brendan

Hi, Being new to WPF & MVVM I struggling with some basic functionality. Let me first explain what I am after, and then attach some example code... I have a screen showing a list of users, and I display the details of the selected user on the right-hand side with editable textboxes. I then have a Save button which is DataBound, but I would only like this button to display when data has actually changed. ie - I need to check for "dirty data". I have a fully MVVM example in which I have a Model called User: namespace Test.Model { class User { public string UserName { get; set; } public string Surname { get; set; } public string Firstname { get; set; } } } Then, the ViewModel looks like this: using System.Collections.ObjectModel; using System.Collections.Specialized; using System.Windows.Input; using Test.Model; namespace Test.ViewModel { class UserViewModel : ViewModelBase { //Private variables private ObservableCollection<User> _users; RelayCommand _userSave; //Properties public ObservableCollection<User> User { get { if (_users == null) { _users = new ObservableCollection<User>(); //I assume I need this Handler, but I am stuggling to implement it successfully //_users.CollectionChanged += HandleChange; //Populate with users _users.Add(new User {UserName = "Bob", Firstname="Bob", Surname="Smith"}); _users.Add(new User {UserName = "Smob", Firstname="John", Surname="Davy"}); } return _users; } } //Not sure what to do with this?!?! //private void HandleChange(object sender, NotifyCollectionChangedEventArgs e) //{ // if (e.Action == NotifyCollectionChangedAction.Remove) // { // foreach (TestViewModel item in e.NewItems) // { // //Removed items // } // } // else if (e.Action == NotifyCollectionChangedAction.Add) // { // foreach (TestViewModel item in e.NewItems) // { // //Added items // } // } //} //Commands public ICommand UserSave { get { if (_userSave == null) { _userSave = new RelayCommand(param => this.UserSaveExecute(), param => this.UserSaveCanExecute); } return _userSave; } } void UserSaveExecute() { //Here I will call my DataAccess to actually save the data } bool UserSaveCanExecute { get { //This is where I would like to know whether the currently selected item has been edited and is thus "dirty" return false; } } //constructor public UserViewModel() { } } } The "RelayCommand" is just a simple wrapper class, as is the "ViewModelBase". (I'll attach the latter though just for clarity) using System; using System.ComponentModel; namespace Test.ViewModel { public abstract class ViewModelBase : INotifyPropertyChanged, IDisposable { protected ViewModelBase() { } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged(string propertyName) { PropertyChangedEventHandler handler = this.PropertyChanged; if (handler != null) { var e = new PropertyChangedEventArgs(propertyName); handler(this, e); } } public void Dispose() { this.OnDispose(); } protected virtual void OnDispose() { } } } Finally - the XAML <Window x:Class="Test.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:vm="clr-namespace:Test.ViewModel" Title="MainWindow" Height="350" Width="525"> <Window.DataContext> <vm:UserViewModel/> </Window.DataContext> <Grid> <ListBox Height="238" HorizontalAlignment="Left" Margin="12,12,0,0" Name="listBox1" VerticalAlignment="Top" Width="197" ItemsSource="{Binding Path=User}" IsSynchronizedWithCurrentItem="True"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel> <TextBlock Text="{Binding Path=Firstname}"/> <TextBlock Text="{Binding Path=Surname}"/> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> <Label Content="Username" Height="28" HorizontalAlignment="Left" Margin="232,16,0,0" Name="label1" VerticalAlignment="Top" /> <TextBox Height="23" HorizontalAlignment="Left" Margin="323,21,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" Text="{Binding Path=User/UserName}" /> <Label Content="Surname" Height="28" HorizontalAlignment="Left" Margin="232,50,0,0" Name="label2" VerticalAlignment="Top" /> <TextBox Height="23" HorizontalAlignment="Left" Margin="323,52,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" Text="{Binding Path=User/Surname}" /> <Label Content="Firstname" Height="28" HorizontalAlignment="Left" Margin="232,84,0,0" Name="label3" VerticalAlignment="Top" /> <TextBox Height="23" HorizontalAlignment="Left" Margin="323,86,0,0" Name="textBox3" VerticalAlignment="Top" Width="120" Text="{Binding Path=User/Firstname}" /> <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="368,159,0,0" Name="button1" VerticalAlignment="Top" Width="75" Command="{Binding Path=UserSave}" /> </Grid> </Window> So basically, when I edit a surname, the Save button should be enabled; and if I undo my edit - well then it should be Disabled again as nothing has changed. I have seen this in many examples, but have not yet found out how to do it. Any help would be much appreciated! Brendan

Read the article

Buttons in the corners?

- by Rick Ratayczak

I'd like to have 4 buttons one in each corner of a window. But I want the stuff in the grid/window to be "behind" the buttons, as if they float on top. In html you would use the zOrder and absolute positioning. <Grid x:Name="ButtonRoot"> <Button Name="bTopLeft" VerticalAlignment="Top" HorizontalAlignment="Left" /> <Button Name="bTopRight" VerticalAlignment="Top" HorizontalAlignment="Right" /> <Button Name="bBottomLeft" VerticalAlignment="Bottom" HorizontalAlignment="Left" /> <Button Name="bBottomRight" VerticalAlignment="Bottom" HorizontalAlignment="Right" />  </Grid> The problem is, the buttons will not be "over" things, as the things will "wrap" around the buttons. How do I achieve this effect?

Read the article

using one data template in another data template in WPF

- by Sowmya

Hi, I have two data templates, one of which is the subset of another like below: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:igEditors="http://infragistics.com/Editors" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:controls="clr-namespace:Client.UI.WPF;assembly=Client.UI.WPF" xmlns:d="http://schemas.microsoft.com/expression/blend/2006" > <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://application:,,,/Client.Resources.WPF.Styles;Component/Styles/CommonStyles.xaml"/> </ResourceDictionary.MergedDictionaries> <DataTemplate x:Key="XYZDataTemplate"> <Grid x:Name="_rootGrid" DataContext="{Binding DataContext}" HorizontalAlignment="Left" VerticalAlignment="Top"> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <controls:ValueDisplay Grid.Row="0" Grid.Column="0" LabelText="Build number" x:Name="buildNumber" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Margin="5,10,0,0"> <igEditors:XamTextEditor /> </controls:ValueDisplay> <controls:ValueDisplay Grid.Row="0" Grid.Column="1" LabelText="Tool version" x:Name="toolVersion" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Margin="20,10,0,0"> <igEditors:XamTextEditor IsReadOnly="True"/> </controls:ValueDisplay> </Grid> </DataTemplate> and the other is like below: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:igEditors="http://infragistics.com/Editors" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:controls="clr-namespace:BHI.ULSS.Client.UI.WPF;assembly=ULSS.Client.UI.WPF" xmlns:d="http://schemas.microsoft.com/expression/blend/2006" > <DataTemplate x:Key="ABCDataTemplate" > <Grid x:Name="_rootGrid" DataContext="{Binding DataContext}" HorizontalAlignment="Left" VerticalAlignment="Top"> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <controls:ValueDisplay Grid.Row="0" Grid.Column="0" LabelText="Build number" x:Name="buildNumber" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Margin="5,10,0,0"> <igEditors:XamTextEditor /> </controls:ValueDisplay> <controls:ValueDisplay Grid.Row="0" Grid.Column="1" LabelText="Tool version" x:Name="toolVersion" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Margin="20,10,0,0"> <igEditors:XamTextEditor IsReadOnly="True"/> </controls:ValueDisplay> <controls:ValueDisplay Grid.Row="0" Grid.Column="2" LabelText="Size" ShowUnit="True" x:Name="size" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Margin="20,10,0,0"> <igEditors:XamTextEditor/> </controls:ValueDisplay> </Grid> </DataTemplate> XYZDataTemplate is a subset of the ABCDataTemplate as the first two fields in both the data templates are common, so I was wondering if it is possible to replace the redundant code in the ABCDataTemplate with that of the XYZDataTemplate for code maintainability? Could anyone please suggest if would this be a right approach, if so how can I acheive that? Thanks in advance, Sowmya

Read the article

How to make groupbox invisble on select of a radiobutton

- by Aditya

Hi, I am doing an Windows Application using XAML ,WPF in C#. I have 2 radio buttons called "WriteData" and "ReadData". when writeData is selected, I need groupbox with a textbox and browse button inside it to be displayed at a particular location, (this i have already designed in UI..) <GroupBox Header="Browse Data" Name="grpBrowseData" Height="78" VerticalAlignment="Top" HorizontalAlignment="Left" Width="1030"> <Grid Name="grdBrowse" Height="60" Width="1030"> <Button x:Name="btnBrowseButton" Margin="0,7.5,45,20" Content="Browse" Click="BrowseButton_Click" HorizontalAlignment="Right" Width="111" /> <TextBox x:Name="txtBxBrowseTB" Margin="46,13.993,185,17.5" Text="TextBox" TextWrapping="Wrap" TextChanged="BrowseTB_TextChanged" ></TextBox> <Label HorizontalAlignment="Left" Margin="-1.25,8.75,0,15" Name="label1" Width="47.5" FontSize="13" VerticalContentAlignment="Center" HorizontalContentAlignment="Center">Path:</Label> Now, if I select "ReadData" radio button, a combo box should be visible in the SAME LOCATION where the above groupbox is displayed, the xaml code for this <GroupBox Header="Select the Project" Name="grpSelectProject" Height="78" VerticalAlignment="Top" HorizontalAlignment="Left" Width="1030" Visibility="Visible" Margin="-1030,0,0,0"> <Grid Name="grdSelectProject" Height="60" Width="1030"> <Label HorizontalAlignment="Left" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Margin="0,11.662,0,20.825" Width="95.103">Select the Project</Label> <ComboBox Margin="119.952,13.994,493.969,16.66"></ComboBox> </Grid></GroupBox> so, how do I make only one visible as per the radio button selected. In the ReadData_click event i tried to make other groupbox invisble. but I wasnt able to do that. please help me. Thanks Ramm

Search Results

Search found 442 results on 18 pages for 'horizontalalignment'.

Page 1/18 | 1 2 3 4 5 6 7 8 9 10 11 12 | Next Page >

- by Lee

- by sudarsanyes

- by nitin

- by nitin

- by lina

- by Alexandru Circus

- by David

- by Jeff V

- by user293545

- by anothershrubery

- by sympatric greg

- by PeterTweed

- by PeterTweed

- by Praetorian

- by eitan barazani

- by Kris Erickson

- by philbrowndotcom

- by NT_

- by VivyG

- by Brendan

- by Rick Ratayczak

- by Sowmya

- by Aditya

1 2 3 4 5 6 7 8 9 10 11 12 | Next Page >