表格上的按钮，然后使用按钮打开一个新窗口 [英] Buttons on a table then using the button to open a new window

问题描述

Hiya，

我是MVVM的新手，非常需要一些帮助.

目前，我正在运行查询以填充用户控件上的表以显示数据网格.我现在需要做的是动态地对包含一个按钮的列进行编程，以打开一个视图，该视图具有一个构造函数，该构造函数可以包含该行所基于的预订ID，以向用户显示相关数据.

目标视图由一个窗口组成，该窗口具有关联的视图模型，该视图模型通过使用Cinch进行链接.

简而言之，我想做的是:

1)运行查询以提供表的数据集
2)在该表上添加一列，其中将包含一个打开预订"页面的按钮
3)将事件ID解析到视图中以显示相关信息.

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!

推荐答案

听起来您需要一个DataGrid:这是我创建的一个相当小的网格，并且该网格使用了接口:

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>

该类的界面:

内部接口IExecutionDetail
{
DetailType DetailType {get; }
字符串Fill {get; }
字符串Broker {get;放; }
小数金额{get;放; }
void UpdateAmount(十进制数);
小数点?现货{get;放; }
小数点?点数{得到；放; }
小数点? AllIn {得到; }
bool IsItem {get; }
void SetFill(int value);
DelegateCommand CommandDelete {get; }
}

这样应该可以解决很多问题.

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.

这叫做NAVIGATION，它并不像您想象的那么简单.它需要一些设计决策.阅读SL/WPF中的导航"，并了解应用程序的设计方式.

我们这样做的方法是拥有一个显示控件的导航框.您的查询将填充由xaml绑定到视图中的数据网格的VM中的集合.

您可以将xaml中的超链接按钮字段添加到网格中，以浏览所需的视图，以通过导航URL传递ID.

或
捕获双击事件(这涉及在SL中的gridview中添加计时器和事件)，并导航到所需的视图并使用选定的项(绑定到gridview)


我作弊并使用一个ViewModel来提供两个视图，因为List的要求非常简单.

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.

这篇关于表格上的按钮，然后使用按钮打开一个新窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！