Combobox data wont update WPF MVVM - WPF Discussion Boards

Hi,

I'm working at a custom control in WPF. This control should work as menu with buttons. The buttons are on left side of the window (4..5 one below the other) and realized by rectangles.

At the first time I used triggers with setters to set the colors of the rectangle
( Button Enabled = DarkBlue,
Button Disabled = LightBlue,
MouseOver = MiddleBlue).

This worked fine for every button. If the mouse was over the enabled buttons, the button color became middleblue and by leaving the button, the button became darkblue. The disabled button was always lightblue. If I switched the buttons from enable to disable, the previous button became dark blue and the IsMouseOver works again.

But now, I decided to animate the rectangles by color transition. Now I'm using the MultiTrigger to animate the color transition. But it doesn't work. When starting the application the button at the top is disabled. If I click the next button under the button at the top, the clicked button becomes disable (lightblue) and the top button becomes enabled (darkblue). Now the IsMouseOver property doesn't work for the first button in the top. But it works already for the buttons I never clicked.
I think, that the disabled button, which becomes enable again, ignores the MouseOver property. How can I solve this problem? Confused | :confused:

Here is the code:

XML

<!-- Set properties when mouse pointer is over the button. -->
                          <MultiTrigger> 
                            <MultiTrigger.Conditions>
                                <Condition Property="IsEnabled" Value="True" /> 
                                <Condition Property="IsMouseOver" Value="True" />
                            </MultiTrigger.Conditions>

                            <!-- Happens when the mouse cursor enter the button area -->
                            <MultiTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <!-- rectangle - changing color to middle blue -->
                                        <ColorAnimation     Storyboard.TargetName="rightRectangle" 
                                                            Storyboard.TargetProperty="(Rectangle.Fill).Color"  
                                                            To="{StaticResource colorMiddleBlue}" 
                                                            Duration="0:0:0.25" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.EnterActions>
                              
                            <!-- Happens when the mouse cursor leaves the button -->
                            <MultiTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation     Storyboard.TargetName="rightRectangle" 
                                                            Storyboard.TargetProperty="(Rectangle.Fill).Color"  
                                                            To="{StaticResource colorDarkBlue}" 
                                                            Duration="0:0:0.20" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </MultiTrigger.ExitActions> 
                              
                            </MultiTrigger>

                        <!-- Disabled Button-->
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsEnabled"  Value="False"/>
                            </MultiTrigger.Conditions>

                            <MultiTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation     Storyboard.TargetName="rightRectangle" 
                                                            Storyboard.TargetProperty="(Rectangle.Fill).Color"
                                                            Duration="0:0:0.15"
                                                            To="{StaticResource colorLightBlue}" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.EnterActions>
                            <MultiTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation     Storyboard.TargetName="rightRectangle" 
                                                            Storyboard.TargetProperty="(Rectangle.Fill).Color" 
                                                            Duration="0:0:0.15"
                                                            To="{StaticResource colorDarkBlue}" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.ExitActions>
                        </MultiTrigger>

I am trying to use scroll bar on canvas but scroller is not coming, only control is visible, i am unable to scroll up and down. Please help me.

XML

<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible">
    <Canvas Visibility="{Binding EnableEdit, Converter={StaticResource BoolToVis}}" Background="AliceBlue" Canvas.Left="208" Canvas.Top="174" Height="254" Name="canvasEdit" Width="424">
      <ItemsControl x:Name="itemsControl" Canvas.Left="{Binding SetPosition}" ItemsSource="{Binding Test}">
      </ItemsControl>
    </canvas>
</ScrollViewer>

modified 18-Nov-13 8:08am.

Hi,

you use the scroll bar on the item above. If it's a grid, the grid contains the scroll bar.
Note, the canvas height and width must exceed the window parameter. Otherwise the scroller of the scroll bar is inactive.
The scroller is only visible when the content is larger than the item that you want to display.

For example:

XML

<Window x:Class="TestWindow.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>

        <ScrollViewer VerticalScrollBarVisibility="Visible" 
                      HorizontalScrollBarVisibility="Visible">
              
              <Canvas Visibility="{Binding EnableEdit, Converter={StaticResource BoolToVis}}" 
                      Background="AliceBlue" 
                      Canvas.Left="208" 
                      Canvas.Top="174" 
                      Height="500"  <!-- this value must be greater than the window height -->
                      Width="700"   <!-- and this must be greater than the window width -->
                      Name="canvasEdit" >   
                      
                 <ItemsControl x:Name="itemsControl" 
                               Canvas.Left="{Binding SetPosition}" 
                               ItemsSource="{Binding Test}"/>
              </Canvas>
        </ScrollViewer>
    </Grid>
</Window>

Thanks...

I have to canvas one over another and I am creating a rectangle on Child canvas in which i want to display the parent canvas background. i am able to do it using Opacity mask but when I try to add border to rectangle for that area also it displays Canvas bakground

XML

<Canvas  Width="772" Name="Canvas2" Height="464" >

            <Canvas.OpacityMask>
                <VisualBrush Stretch="Fill" Viewbox="0,0,800,600" ViewboxUnits="Absolute" Viewport="0,0,800,600" ViewportUnits="Absolute">
                    <VisualBrush.Visual>
                        <Canvas Width="800" Height="600" Background="#1000" >
                            <!--<Button Name="VisualButton"  Width="215" Height="110" Canvas.Left="20" Canvas.Top="20" Background="#0000">-->
                                <Button x:Name="VisualButton1" Width="200" Height="100"  BorderBrush="#0000" BorderThickness="100"  />

                           <!-- </Button>-->
                            <!--<Rectangle Stroke="#9000"  StrokeThickness="3" Width="225" Height="120" Canvas.Left="2" Canvas.Top="20"></Rectangle>
                            <Rectangle Name="VisualButton"  Width="215" Height="110" Canvas.Left="20" Canvas.Top="20"  Fill="Azure">-->
                                <!--<Button x:Name="VisualButton1" Width="200" Height="100"  BorderBrush="#0000" BorderThickness="100"  />

                            </Rectangle>-->
                        </Canvas>

                    </VisualBrush.Visual>
                </VisualBrush>
                <!--<VisualBrush Visual="{Binding ElementName=Shape}" Stretch="None"  />-->
            </Canvas.OpacityMask>

XML

<Canvas.Background>
                <ImageBrush ImageSource="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" />
            </Canvas.Background>

</Canvas>

Download and do.

http://archive.msdn.microsoft.com/wpfsamples[^]

[edit]
Specifically "OpacityMasking_markup"
[end edit]

modified 16-Nov-13 18:34pm.

I have 2 pages (User and UserListing) When I Add new user on User Page then change page to UserListing Page the ComboBoxUser on UserListing Page wont update automatically. Any Idea to solve this ?

this is my code User.cs

C#

public class User : INotifyPropertyChanged
{
    string _firstName;
    public string FirstName {
        get { return _firstName; }
        set { 
            _firstName = value;
            OnPropertyChanged("FirstName");
            OnPropertyChanged("FullName");
        }
    }

    string _lastName;
    public string LastName {
        get { return _lastName; }
        set { 
            _lastName = value;
            OnPropertyChanged("LastName");
            OnPropertyChanged("FullName");
        }
    }

    public string FullName
    {
        get { return string.Format("{0} {1}", FirstName, LastName); }
    }

    int _gender;
    public int Gender {
        get { return _gender; }
        set { 
            _gender = value;
            OnPropertyChanged("Gender");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string name)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(name));
        }
    }
}

UserListingViewModel.cs

C#

public class UserListingViewModel : INotifyPropertyChanged
{
    public UserListingViewModel()
    {
        LoadDataUser();
    }

    public void LoadDataUser()
    {
        ComboUserData = new ObservableCollection<User>();

        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings[
            "dLondre.Properties.Settings.CSLONDRE"].ConnectionString);

        string str = "";
        str += "SELECT userid,firstname + ' ' + lastname as name FROM [user] ";

        SqlCommand com = con.CreateCommand();
        com.CommandText = str;

        try
        {
            con.Open();
            SqlDataReader sdr = com.ExecuteReader();
            while (sdr.Read())
            {
                ComboUserData.Add(new User { UserID = (string)sdr["userid"], FirstName = (string)sdr["name"]});
            }

            com.Dispose();
            con.Close();
            con.Dispose();
        }
        catch (Exception e)
        {
            Console.WriteLine(e);
        }
    }


    ObservableCollection<User> _comboUserData;
    public ObservableCollection<User> ComboUserData
    {
        get
        {
            if (_comboUserData == null)
                _comboUserData = new ObservableCollection<User>();
            return _comboUserData;
        }
        set
        {
            if (value != _comboUserData)
                _comboUserData = value;
            OnPropertyChanged("ComboUserData");
        }
    }

    User _user;
    public User SelectedUserID
    {
        get { return _user; }
        set
        {
            _user = value;
            OnPropertyChanged("SelectedUserID");
        }
    }
}

XAML

XML

<ComboBox x:Name="DDUserId" 
     Width="140" 
     DisplayMemberPath="FirstName" 
     IsSynchronizedWithCurrentItem="True" 
     ItemsSource="{Binding ComboUserData,Mode=TwoWay}" 
     SelectedItem="{Binding SelectedUserID}">
</ComboBox>

Hi
Could you please tell whether the ViewModel is set as the DataContext of the View containing ComboBox

like the below.

<Page.DataContext>
//Instance of the ViewModel
</Page.DataContext>

Karthikeyan

Hi..thx for response
I've done like what you said and still the combobox value doesnt update automatically after add new user.
LoadDataUser method is executed but only when I change page to UserListing page for the first time App starts. When I change page from UserListing page to other page then back to UserListing page, the LoadDataUser is not executed anymore.
for more info, I use modern UI (mui) from codeplex and i using link to navigate between pages

Your code all looks right at a quick glance, so I'd assume you are adding the user to a different instance of the ObservableCollection since the user page would have a different VM.

hi..thx for reply, what do You mean by adding the user to a different instance of the ObservableCollection ?
maybe You can give some example please. I can not get it.

I do not see any code to add the user on this page, so I assume you are adding it on the other page. If so, you need to add it to the SAME EXACT ObservableCollection. If you create another one on the other page, how do you expect this page to see it? Smile | :)

.

yes, the add method is on different page (UserViewModel). this is the code :

C#

void Register()
{

    Crypto Crypt = new Crypto(Crypto.CryptoTypes.encTypeTripleDES);
    Password = Crypt.Encrypt(Password);
    CreatedBy = "builtinapp";

    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings[
        "dLondre.Properties.Settings.CSLONDRE"].ConnectionString);

    string str = "";
    str = "";
    str += "INSERT INTO [user] ";
    str += "(firstName,lastName,gender,birthdate,address,city,zip,email,userid,password,status,deleted,createdOn,createdBy) ";
    str += "VALUES (@FirstName,@LastName,@Gender,@BirthDate,@Address,@City,@ZipCode,";
    str += "@Email,@UserId,@Password,@Status,@Deleted,@CreatedOn,@CreatedBy)";

    SqlCommand com = con.CreateCommand();
    com.CommandText = str;

    // Assign value to parameters
    com.Parameters.Add(new SqlParameter("@FirstName", FirstName));
    com.Parameters.Add(new SqlParameter("@LastName", LastName));
    com.Parameters.Add(new SqlParameter("@Gender", Gender));
    com.Parameters.Add(new SqlParameter("@BirthDate", BirthDate));
    com.Parameters.Add(new SqlParameter("@Address", Address));
    com.Parameters.Add(new SqlParameter("@City", City));
    com.Parameters.Add(new SqlParameter("@ZipCode", ZipCode));
    com.Parameters.Add(new SqlParameter("@Email", Email));
    com.Parameters.Add(new SqlParameter("@UserId", UserID));
    com.Parameters.Add(new SqlParameter("@Password", Password));
    com.Parameters.Add(new SqlParameter("@Status", Status));
    com.Parameters.Add(new SqlParameter("@Deleted", Deleted));
    com.Parameters.Add(new SqlParameter("@CreatedOn", CreatedOn));
    com.Parameters.Add(new SqlParameter("@CreatedBy", CreatedBy));

    // Open the connection & execute the command
    con.Open();
    int rownum = com.ExecuteNonQuery();
    com.Dispose();
    con.Close();
    con.Dispose();
    Reset();

}

how to add new user to same exact observablecollection ?
please help. I'm stuck for almost 2 weeks Frown | :(

Yeah, so this code is just inserting it into the database. There is no notification to the other page to add/refresh the ObservableCollection.

What exactly do you mean by "page"? There is no such thing in WPF. Page is more web/silverlight. Do you mean a dialog?

How do you launch the add dialog? In your command handler for that, you'd show the dialog, then refresh the ObservableCollection afterwards.

Thank You, Page I mean is View (usercontrol). Maybe you want take a look my project please
this is the link https://dl.dropboxusercontent.com/u/98165249/sample.rar[^]

It's hard for me to explain by words..
Thank You

SledgeHammer01 wrote:
What exactly do you mean by "page"? There is no such thing in WPF.

Yes there is. WPF does support Page, wee here[^].

Finally I Found the solution
maybe it's just trick but it works..

I Just follow article in this link
http://blog.cylewitruk.com/2010/10/mvvm-using-a-timer-in-your-viewmodel/[^]

Here is the code :

C#

private ShowUser showuser;
private void InvalidateSampleData(object state, EventArgs e)
{
    showuser = new ShowUser();
    Users = showuser.GetUser();
}

C#

public class ShowUser : INotifyPropertyChanged
{
    public ObservableCollection<User> GetUser()
    {
        ObservableCollection<User> users = new ObservableCollection<User>();

        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings[
            "dLondre.Properties.Settings.CSLONDRE"].ConnectionString);

        string str = "";
        str += "SELECT userid,firstname + ' ' + lastname as name FROM [user] ";

        SqlCommand com = con.CreateCommand();
        com.CommandText = str;

        try
        {
            con.Open();
            SqlDataReader sdr = com.ExecuteReader();
            while (sdr.Read())
            {
                users.Add(new User { UserID = (string)sdr["userid"], FirstName = (string)sdr["name"] });
            }

            com.Dispose();
            con.Close();
            con.Dispose();
        }
        catch (Exception e)
        {
            Console.WriteLine(e);
        }

        return users;
    }

    #region Methods
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string name)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(name));
        }
    }
    #endregion
}

C#

private ObservableCollection<User> _users;
public ObservableCollection<User> Users
{
    get { return _users; }
    set
    {
        if (value != _users)
            _users = value;
        OnPropertyChanged("Users");
    }
}

User _user;
public User SelectedUserID
{
    get { return _user; }
    set
    {
        _user = value;
        OnPropertyChanged("SelectedUserID");
        //MessageBox.Show("Do your Task with " + value.UserID);
    }
}

Thanks for any help and suggestion to this thread
I really appreciate it..
now I can die in peace.. Wink | ;)

C#

private void LoadDataVoidOnPageWichContainsYourComboBoxItemSource()
{
    ComboUserData.CollectionChanged += ComboUserData_CollectionChanged;
}

void ComboUserData_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
    OnPropertyChanged("ComboUserData");
}

I'm going to deploy my WPF using ClickOnce. I want to have the users deploy from my server. But what do I need to do on my server to prepare? Do I need to set up a web site? I Googled on this but didn't find much.

Thanks

If it's not broken, fix it until it is

If its a WPF application, you don't need any preparation. Just deploy.

What you might want to do is put in some simple code that checks for the latest updates.
Some simple settings do it for you as well - http://msdn.microsoft.com/en-us/library/1zyc39fb%28v=vs.110%29.aspx[^].

Apps - Color Analyzer | Arctic | XKCD | Sound Meter | Speed Dial

You didn't understand my question

Do I need to do something on my server? Do I need to set up a site in IIS? What URL/IP do my users get?

If it's not broken, fix it until it is

No you need nothing in IIS unless you are hosting a website itself.

Apps - Color Analyzer | Arctic | XKCD | Sound Meter | Speed Dial

Hi Kevin. There are 2 alternatives to deploy a WPF application with click once. Create a shared folder on your server, where everyone who needs to install the application has access to. The in your application properties, under publish, you just set the Publishing Folder Location to point to this folder, and leave Installation Folder URL blank. Once you publish it, a setup file will be available for users to install it on their machine.

The second way I do it in IIS, is to create an FTP site, and a standard website. I then use the ftp site as the Publishing Folder Location, and the standard web site as the Installation Folder URL. I then publish it via ftp, and the users can browse to the web site url and install it from there. When you create the web site, you do not need to create any pages or anything, Visual Studio does all this for you when you publish.

Hope this helps

When I was a coder, we worked on algorithms. Today, we memorize APIs for countless libraries — those libraries have the algorithms - Eric Allman

My TreeView:

<controls:TreeViewEx BorderThickness="0"
                        Margin="5" 
                        ItemsSource="{Binding Nodes}"
                        IsManipulationEnabled ="True"
                        Visibility="{Binding ShowTree, Converter={StaticResource visibilityConverter}}">

    <controls:TreeViewEx.Resources>
        <SolidColorBrush Color="Transparent" x:Key="{x:Static SystemColors.HighlightBrushKey}"/>
    </controls:TreeViewEx.Resources>

</controls:TreeViewEx>

and the HierarchicalDataTemplate:

<HierarchicalDataTemplate DataType="{x:Type models:JobSummaryModel}"
                            ItemsSource="{Binding Path=Nodes}">
    <Grid Margin="2">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
                    
        <controls:TextBlockEx Grid.Column="1"
                                FontSize="12">
                        
            <Hyperlink Style="{StaticResource linkStyle}"
                        Command="{Binding SelectedNodeCommand}">
                <TextBlock Text="{Binding Caption}"/>
            </Hyperlink>
                        
        </controls:TextBlockEx>
                    
    </Grid>
</HierarchicalDataTemplate>

I'm getting a binding error in the outout window. The SelectedNodeCommand is on the ViewModel. How do I bind the hyperlink to it?

Thank you

If it's not broken, fix it until it is