MVVM - 如何显示在鼠标悬停在DataGrid中弹出在一排按钮 [英] MVVM - How to show a Popup in DataGrid on MouseOver on a Button in Row

问题描述

我有以下的代码，其中一个DataGrid是从我的ViewModel填充数据。 DataGrid中可以有多个行的每一行有一个按钮。

I have the following code where a DataGrid is populating the data from my ViewModel. DataGrid can have multiple rows each row have a Button.

我要显示一个弹出，当用户将鼠标悬停在该按钮。（目前我弹出不工作）

I want to show a popup when user will Mouse over on that button.(Currently my Popup is not working)

我是新来WPF，所以请考虑这帮助我。 ：）

I am new to WPF, so please help me by considering this. :)

非常感谢你！

<Grid DataContext="{StaticResource Windows1ViewModel}">
    <StackPanel Orientation="Vertical"
                Margin="20"
                HorizontalAlignment="Center"
                VerticalAlignment="Top">
        <Button Content="Refresh"
                Style="{StaticResource ButtonStyle1}"
                HorizontalAlignment="Left"
                Command="{Binding RefreshDateCommand}" />
        <TextBlock Text="{Binding MyDateTime}" />
        <Button Name="rndm" Content="Randomize Grid Data"
                HorizontalAlignment="Left"
                Margin="0 20 0 0"
                Command="{Binding RefreshPersonsCommand}" />
        <DataGrid ItemsSource="{Binding PersonsCollection}"
                  AutoGenerateColumns="False"
                  CanUserAddRows="False">
            <DataGrid.Columns>                    
                <DataGridTextColumn Binding="{Binding Name, Mode=TwoWay,
                                    UpdateSourceTrigger=PropertyChanged}"
                                    Header="Name (string)" />
                <DataGridTextColumn Binding="{Binding Age}"
                                    IsReadOnly="True"
                                    Header="Age (int)" />
                <DataGridTemplateColumn Header=" "
                                        IsReadOnly="True">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Grid>
                                <Button Name="btnAdditionalInformation" Content="AI"
                                       Width="40"
                                       Height="20">
                                </Button>
                            </Grid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                    <DataGridTemplateColumn.CellEditingTemplate>
                        <DataTemplate>
                            <Grid >
                                <Popup x:Name="popUp" 
                            PlacementTarget="{Binding ElementName= 
                                             btnAdditionalInformation}" 
                            IsOpen="True" Width="200" Height="100">
                                    <StackPanel Orientation="Vertical"
                                                Background="Gray" >
                                        <TextBlock Text="asdf"></TextBlock>
                                        <Button Content="button1"/>
                                    </StackPanel>
                                </Popup>
                            </Grid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellEditingTemplate>
                </DataGridTemplateColumn>
                <DataGridCheckBoxColumn Binding="{Binding IsMarried, Mode=TwoWay,
                                        UpdateSourceTrigger=PropertyChanged}"
                                        Header="IsMarried (bool)" />
                <DataGridTextColumn Binding="{Binding Height, Mode=TwoWay, 
                                    UpdateSourceTrigger=PropertyChanged}"
                                    Header="Height (double)" />
                <DataGridTextColumn Binding="{Binding BirthDate}"
                                    IsReadOnly="True"
                                    Header="BirthDate (DateTime)" />
                <DataGridTemplateColumn Header="FavoriteColor (SolidColorBrush)"
                                        IsReadOnly="True">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Grid Background="{Binding FavoriteColor}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>

        <Button Content="can execute command?"
                VerticalAlignment="Top"
                HorizontalAlignment="Left"
                Margin="0 20 0 0"
                Command="{Binding DoNothingCommand}" />
    </StackPanel>

</Grid>

推荐答案

下面是一个简单的例子：

Here is a simple example:

<StackPanel>
    <Button x:Name="btn" Content="Button"/>
    <Popup AllowsTransparency="True" Placement="Mouse" IsOpen="{Binding Path=IsMouseOver, ElementName=btn, Mode=OneWay}">
        <Border Background="DarkGray">
            <TextBlock Text="Popup"/>
        </Border>
    </Popup>
</StackPanel>

这将打开弹出时，鼠标移动到按钮上并关闭它，当它不是。但是，如果你需要这种行为，你应该考虑使用工具提示来代替。

This will open popup when mouse is over the button and close it, when its not. However if you need that kind of behavior you should consider using a tooltip instead.

这篇关于MVVM - 如何显示在鼠标悬停在DataGrid中弹出在一排按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！