This project has moved. For the latest updates, please go here.

Data Binding Question

May 19, 2011 at 1:45 PM

First let me say that I am still very much a newbie with WPF. That said, I would like to use a data template for the BusyIndicator similar to the example shown on this forum. I am using MVVM w/MVVM Light and I have a single MainWindow with a content control which I load with user controls to provide the U/I for various functions. I have the BusyIndicator defined surrounding the content control like so:

 
<dx:DXWindow x:Class="View.MainWindowView" 
             x:Name="MainWindow" 
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" 
             xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" 
             xmlns:tb="http://www.hardcodet.net/taskbar" 
             xmlns:extToolkit="clr-namespace:Microsoft.Windows.Controls;assembly=WPFToolkit.Extended"
             xmlns:valueConverters="clr-namespace:Huebner_RJH_Trucking"
             dx:ThemeManager.ThemeName="Azure" 
             mc:Ignorable="d" 
             Foreground="{StaticResource ForegroundBrush}" 
             d:DesignWidth="1000" d:DesignHeight="700" 
             DataContext="{Binding MainWindow, Source={StaticResource Locator}}" 
             DataContextChanged="ContextChanged" 
             Title="{StaticResource AppTitle}" 
             Icon="pack://application:,,,/Resources/Dump-truck-local.ico" 
             MinWidth="1000" MinHeight="700" 
             Initialized="MainWindowView_Initialized" 
             Closing="MainWindowView_Closing"
             WindowStartupLocation="CenterScreen" 
             WindowState="Normal" 
             Cursor="{Binding IsBusy,Converter={valueConverters:CursorExtensionConverter}}"
             WindowStyle="SingleBorderWindow" 
             ResizeMode="CanResizeWithGrip">
 
  
         
    <Grid x:Name="WindowRoot" UseLayoutRounding="True" Background="{StaticResource AzureBackground}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
 
        <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Background="{StaticResource AppTitleBackgroundBrush}" BorderThickness="0,0,0,1" BorderBrush="{StaticResource AppTitleBorderBrush}" CornerRadius="0" Margin="0,0,0,0">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <!-- the ToolTipText property is bound to the TextBox below -->
                <tb:TaskbarIcon x:Name="AppNotifyIcon" ToolTipText="Balloon Sample Icon" IconSource="/Huebner_RJH_Trucking;component/Resources/Dump-Truck-Local2.ico" />
                <TextBlock Grid.Column="0" Effect="{StaticResource dropShadowStyle}" Text="{StaticResource AppTitle}" Margin="10,5,5,5" Foreground="{StaticResource AppTitleBrush}" FontSize="18"></TextBlock>
                <StackPanel x:Name="spAccount" Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
                    <TextBlock HorizontalAlignment="Right" VerticalAlignment="Center" Margin="5,5,10,5">
                    <Hyperlink Style="{StaticResource MenuHyperlinkStyle}" Command="{Binding Path=NavigateCommand}" CommandParameter="Account">Account</Hyperlink>
                    </TextBlock>
                    <TextBlock HorizontalAlignment="Right" VerticalAlignment="Center" Margin="5,5,10,5">
                    <Hyperlink Style="{StaticResource MenuHyperlinkStyle}" Command="{Binding Path=NavigateCommand}" CommandParameter="Logout">Logout</Hyperlink>
                    </TextBlock>
 
                </StackPanel>
            </Grid>
        </Border>
 
        <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Background="{DynamicResource AppTitleBackgroundBrush}">
                <extToolkit:BusyIndicator IsBusy="{Binding Path=IsBusy}" BusyContent="{Binding Path=BusyContent}">
                <extToolkit:BusyIndicator.BusyContentTemplate>
                    <DataTemplate>
                        <StackPanel Margin="4">
                            <TextBlock Text="Downloading Email" FontWeight="Bold" HorizontalAlignment="Center"/>
                            <StackPanel Margin="4">
                                <TextBlock Text="Downloading message 4/10..."/>
                                <ProgressBar Value="40" Height="15"/>
                            </StackPanel>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <Button Grid.Column="0" Content="Pause" HorizontalAlignment="Right" Margin="0 0 2 0" Command="{Binding}" />
                                <Button Grid.Column="1" Content="Cancel" HorizontalAlignment="Left" Margin="2 0 0 0"/>
                            </Grid>
                        </StackPanel>
                    </DataTemplate>
                </extToolkit:BusyIndicator.BusyContentTemplate>
                <extToolkit:BusyIndicator.OverlayStyle>
                    <Style TargetType="Rectangle">
                        <Setter Property="Fill" Value="#ffffeeee"/>
                    </Style>
                </extToolkit:BusyIndicator.OverlayStyle>
                <extToolkit:BusyIndicator.ProgressBarStyle>
                    <Style TargetType="ProgressBar">
                        <Setter Property="Visibility" Value="Collapsed"/>
                    </Style>
                </extToolkit:BusyIndicator.ProgressBarStyle>
 
                <!-- <Frame Source="pack://application:,,,/View/LoginView.xaml" NavigationUIVisibility="Hidden" x:Name="MainFrame"></Frame> -->
                    <ContentControl Name="taskView"></ContentControl>
                </extToolkit:BusyIndicator>
        </Border>
 
        <Border x:Name="bdrModuleSelection" 
                Grid.Column="0" 
                Grid.ColumnSpan="2" 
                Grid.Row="2" 
                MinHeight="32" 
                BorderThickness="1" 
                BorderBrush="{StaticResource {x:Static SystemColors.HotTrackBrushKey}}" 
                CornerRadius="10,10,10,10" 
                Margin="10,0">
            <ItemsControl x:Name="moduleSelectionItemsControl" ItemsSource="{Binding Path=Pages}" ItemTemplate="{StaticResource SelectModuleTaskTemplate}" HorizontalAlignment="Center">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </Border>
<!--
        <Border x:Name="bdrTaskNavigation" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="3" MinHeight="32"
                BorderThickness="1,1,0,1" BorderBrush="{StaticResource PathButtonBorderBrush}" CornerRadius="10,10,10,10" Margin="10,0,10,5">
            <ItemsControl x:Name="taskSelectionItemsControl" ItemsSource="{Binding Path=ModuleTasks}" ItemTemplate="{StaticResource ItemsControlNavigationTemplate }"
                          HorizontalAlignment="Center">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </Border>
        -->
 
        <Popup x:Name="tasksPopup" Placement="Top" PlacementTarget="{Binding ElementName= bdrModuleSelection}" PopupAnimation="Scroll" AllowsTransparency="True" IsOpen="{Binding Path=OpenPopup}">
            
            <Border x:Name="bdrPopup" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="3" MinHeight="32" BorderThickness="1,1,0,1" BorderBrush="{StaticResource PathButtonBorderBrush}" CornerRadius="10" Margin="10,0,10,5" Background="{StaticResource LightBlueBrushKey}">
                <ItemsControl x:Name="popupItemsControl" ItemsSource="{Binding Path=ModuleTasks}" ItemTemplate="{StaticResource ItemsControlNavigationTemplate }" HorizontalAlignment="Center">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </Border>
        </Popup>
    </Grid>
   
</dx:DXWindow>
My question is how do I bind the textblock.text properties to a property in my MainWindowViewModel? If I try to set the binding within VS I don't see a list of view 
model properties like I do when binding a regular control. Should I still use the format "{Binding Path=BusyContent}" where BusyContent is defined in the View Model? 
Same question for the progress bar properties and the command properties for the buttons. Any help from anyone would be appreciated.
May 19, 2011 at 1:58 PM

Yes, you use the same binding syntax.  So if you had a property on your MainWindowViewModel called Caption, you would simply bind it as TextBlock.Text="{Binding Caption}".

May 21, 2011 at 11:40 AM
Thank you for your prompt reply.

Sent from Ron's Windows Phone