Buttons on a table then using the button to open a new window

Question

0.00/5 (No votes)

See more:

Hiya,

I am a total newcomer to MVVM and am in desperate need of some help.

At present I am running a query to populate a table on my user control to display a grid of data. What I now need to do is dynamically program a column which contains a button to open a view which has a constructor which can contain the booking id which the row is based, to display the relevant data to the user.

The target view is composed of a window which has an associated viewmodel which is linked through the use of Cinch.

In short what I want to do is:

1) Run a query to provide a data set for a table
2) Add a column on that table which will contain a button to open the Make Booking page
3) Parse in the Event ID to the View to display the relevant information.

Your help is really useful!

Posted 21-Jun-12 13:15pm

Scrappy 1871

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Clifford Nelson · Answer 1 · 2012-06-21T13:41:00

It sounds like you need a DataGrid: here is a fairly small grid I created, and the interface used with the grid:

<datagrid grid.column="3">
      Grid.Row="10"
      Grid.ColumnSpan="6"
      Grid.RowSpan="7"
      Name="dataGrid"
      ItemsSource="{Binding ExecutionDetails}"
      Background="{StaticResource GoldBackgroundBrush}"
      IsSynchronizedWithCurrentItem="True"
      SelectionUnit="Cell"
      AutoGenerateColumns="False"
      GridLinesVisibility="All"
      RowHeaderWidth="0"
      RowBackground="{StaticResource GoldBackgroundBrush}"
      VerticalGridLinesBrush="Gray"
      HorizontalGridLinesBrush="Gray"
      PreviewTextInput="GirdPreviewTextInput">
  <datagrid.resources>
   <style targettype="DataGridCell">
    <setter property="BorderBrush">
        Value="Black" />
    <setter property="BorderThickness">
        Value=".5" />
    <setter property="HorizontalAlignment">
        Value="Stretch" />
    <setter property="Padding">
        Value="5,0" />
    <setter property="Background">
        Value="Transparent" />
    <setter property="KeyboardNavigation.IsTabStop">
        Value="{Binding IsItem}" />
    <setter property="IsEnabled">
        Value="{Binding IsItem}" />
   </setter></setter></setter></setter></setter></setter></setter></style>
   <style x:key="NoTabStopDataGridCell" xmlns:x="#unknown">
       BasedOn="{StaticResource {x:Type DataGridCell}}"
       TargetType="{x:Type DataGridCell}">
    <setter property="KeyboardNavigation.IsTabStop">
        Value="False" />
    <setter property="IsEnabled">
        Value="False" />
    <style.triggers>
     <trigger property="IsSelected">
          Value="True">
      <setter property="KeyboardNavigation.IsTabStop">
          Value="True" />
     </setter></trigger>
    </style.triggers>
   </setter></setter></style>

   <style targettype="{x:Type DataGridColumnHeader}">
    <setter property="Background">
        Value="#A6A6A6" />
    <setter property="HorizontalContentAlignment">
        Value="Center" />
    <setter property="BorderBrush">
        Value="Black" />
    <setter property="BorderThickness">
        Value=".5" />
   </setter></setter></setter></setter></style>
   <style x:key="TextBlockRightAlignStyle" xmlns:x="#unknown">
       TargetType="{x:Type TextBlock}">
    <setter property="TextAlignment">
        Value="Right" />
    <setter property="Padding">
        Value="5,0" />
    <setter property="VerticalAlignment">
        Value="Center" />
   </setter></setter></setter></style>
   <style x:key="TextBoxRightAlignStyle" xmlns:x="#unknown">
       TargetType="{x:Type TextBox}">
    <setter property="TextAlignment">
        Value="Right" />
    <setter property="Background">
        Value="Transparent" />
    <setter property="Padding">
        Value="5,0" />
    <setter property="VerticalAlignment">
        Value="Center" />
   </setter></setter></setter></setter></style>
   <style x:key="TextBlockCenterAlignStyle" xmlns:x="#unknown">
       TargetType="{x:Type TextBlock}">
    <setter property="TextAlignment">
        Value="Center" />
    <setter property="Padding">
        Value="5,0" />
    <setter property="VerticalAlignment">
        Value="Center" />
   </setter></setter></setter></style>
  </datagrid.resources>
  <datagrid.columns>
   <datagridtextcolumn header="Fill#">
             Binding="{Binding Fill}"
             IsReadOnly="True"
             ElementStyle="{StaticResource TextBlockCenterAlignStyle}"
             CellStyle="{StaticResource NoTabStopDataGridCell}"
             Width="40" />
   <datagridtemplatecolumn header="Broker">
               Width="60">
    <datagridtemplatecolumn.celltemplate>
     <datatemplate>
      <combobox name="cboBroker">
           SelectedValue="{Binding Broker, Mode=TwoWay}"
           Background="Transparent"
           ItemsSource="{Binding DataContext.AvailableBrokers,
                 RelativeSource={RelativeSource FindAncestor,
                 AncestorType={x:Type DataGrid}}}"/>
      <datatemplate.triggers>
       <datatrigger binding="{Binding Fill}">
              Value="Total">
        <setter property="Visibility">
            Value="Hidden"
            TargetName="cboBroker" />
       </setter></datatrigger>
      </datatemplate.triggers>
     </combobox></datatemplate>
    </datagridtemplatecolumn.celltemplate>
   </datagridtemplatecolumn>
   <!--<DataGridComboBoxColumn Header="Broker"
               SelectedValueBinding="{Binding Broker}"
               ItemsSource="{Binding DataContext.AvailableBrokers,
                 RelativeSource={RelativeSource FindAncestor,
                 AncestorType={x:Type ListBox}}, PresentationTraceSources.TraceLevel=High}"
               Width="60"/>-->
   <datagridtextcolumn header="Amount">
             Binding="{Binding Amount, StringFormat={}{0:#\,##0}, UpdateSourceTrigger=LostFocus}"
             ElementStyle="{StaticResource TextBlockRightAlignStyle}"
             EditingElementStyle="{StaticResource TextBoxRightAlignStyle}"
             Width="120" />
   <datagridtextcolumn header="Spot">
             Binding="{Binding Spot, StringFormat={}{0:#\,##0.000000##}, UpdateSourceTrigger=LostFocus}"
             ElementStyle="{StaticResource TextBlockRightAlignStyle}"
             EditingElementStyle="{StaticResource TextBoxRightAlignStyle}"
             Width="85" />
   <datagridtextcolumn header="Points">
             Binding="{Binding Points, StringFormat={}{0:#\,##0.000000##}, UpdateSourceTrigger=LostFocus}"
             ElementStyle="{StaticResource TextBlockRightAlignStyle}"
             EditingElementStyle="{StaticResource TextBoxRightAlignStyle}"
             Width="85" />
   <datagridtextcolumn header="All in">
             Binding="{Binding AllIn, StringFormat={}{0:#\,##0.000000##}, Mode=OneWay, UpdateSourceTrigger=LostFocus}"
             ElementStyle="{StaticResource TextBlockRightAlignStyle}"
             EditingElementStyle="{StaticResource TextBoxRightAlignStyle}"
             CellStyle="{StaticResource NoTabStopDataGridCell}"
             Width="85" />
   <datagridtemplatecolumn header="Del">
               Width="30" >
    <datagridtemplatecolumn.celltemplate>
     <datatemplate>
      <button name="btnDelete">
          Background="Transparent"
          Margin="2"
          Command="{Binding CommandDelete}">
       <polygon points="1,0 0,1 4,5 0,9 1,10 5,6 9,10 10,9 6,5 10,1 9,0 5,4">
            Fill="Red"
            HorizontalAlignment="Center"
            VerticalAlignment="Center" />
      </polygon></button>
      <datatemplate.triggers>
       <datatrigger binding="{Binding Fill}">
              Value="Total">
        <setter property="Visibility">
            Value="Hidden"
            TargetName="btnDelete" />
       </setter></datatrigger>
      </datatemplate.triggers>
     </datatemplate>
    </datagridtemplatecolumn.celltemplate>
   </datagridtemplatecolumn>
  </datagridtextcolumn></datagridtextcolumn></datagridtextcolumn></datagridtextcolumn></datagridtextcolumn></datagrid.columns>
 </datagrid>

The interface for the class:

internal interface IExecutionDetail
{
DetailType DetailType { get; }
string Fill { get; }
string Broker { get; set; }
Decimal Amount { get; set; }
void UpdateAmount(decimal amount);
decimal? Spot { get; set; }
decimal? Points { get; set; }
decimal? AllIn { get; }
bool IsItem { get; }
void SetFill(int value);
DelegateCommand CommandDelete { get; }
}

That should allow you to get through the problem with lots of extras.

Mycroft Holmes · Answer 2 · 2012-06-21T20:03:00

This is called NAVIGATION and is is not as simple as you would think. It requires some design decisions. Read up on Navigation in SL/WPF and look at the way the apps are designed.

The way we do it is to have a navigation frame that displays the controls. Your query populates a collection in the VM which is bound by xaml to a datagrid in the view.

You can add a hyperlink button field in xaml to the grid that navigates the required view passing the ID through the navigation URL

OR
Trap the double click event (this involves add a timer and event to the gridview in SL) and navigate to the required view and use the selected item (bound to the gridview)

I cheat and use the one ViewModel to service both views as the List requirements are really simple.

Buttons on a table then using the button to open a new window

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0