Using WPF to populate a data grid and adding checkboxes to apply a filter

Question

Completely new to WPF, I am trying to populate a datagrid with data from a SQL table. And once the data is populated, use checkboxes to create a filter so that the data grid can be filtered.

At the moment, this is what I have.

<Window x:Class="WpfApp2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp2"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <CheckBox Content="QA" HorizontalAlignment="Left" Margin="82,58,0,0" VerticalAlignment="Top" Checked="CheckBox_Checked"/>
        <CheckBox Content="DEV" HorizontalAlignment="Left" Margin="82,27,0,0" VerticalAlignment="Top"/>
        <CheckBox Content="LAB" HorizontalAlignment="Left" Margin="82,94,0,0" VerticalAlignment="Top"/>
        <CheckBox Content="UAT" HorizontalAlignment="Left" Margin="173,27,0,0" VerticalAlignment="Top"/>
        <CheckBox Content="Pre-Prod" HorizontalAlignment="Left" Margin="173,62,0,0" VerticalAlignment="Top"/>
        <Button Content="Apply" HorizontalAlignment="Left" Margin="82,140,0,0" VerticalAlignment="Top" Width="75"/>
        <DataGrid HorizontalAlignment="Left" Height="181" Margin="82,202,0,0" VerticalAlignment="Top" Width="679"/>
    </Grid>
</Window>

Also, I'm guessing the checkbox's you want inside the DataGrid, -- not above it — Ilan Keshet, Nov 28 '20 at 23:50
https://stackoverflow.com/questions/5809816/datagrid-binding-in-wpf — Ilan Keshet, Nov 28 '20 at 23:54
This si not a PowerShell question. It's a UX/UI design question. Doing such things with PowerShell as your backend code does not really change that. PowerShell does not control form design decisions. What have you looked for? WPF and data grids (with/without checkboxes) is a common thing. So, you are trying to do this? [WPF – DataGrid with single click checkbox](https://code.4noobz.net/wpf-single-click-datagrid-checkbox). You are also not show enough code (just your XAML), thus forcing folks to assume what you are doing. — postanote, Nov 29 '20 at 00:18
As for this...[Completely new to WPF], that's fine, but it also means you really should spend the time getting ramped up on UX/UI using WPF proper and step away from PowerShell for that effort. See the UX/UI WPF videos on Youtube for that training. A good WPF using PowerShell series is here: https://www.dev4sys.com and his repo here: https://github.com/dev4sys — postanote, Nov 29 '20 at 01:26

score 1 · Accepted Answer · answered Nov 29 '20 at 00:50

I don't have an environment to try what you are after with SQL, but data is data.

So, here is a simple WPF example leveraging a Datagrid, with checkboxes executed via PowerShell. It loads the form, wait for a button click, and populates the Datagrid with data and checked and unchecked checkboxes.

Function Show-DataGrid 
{
[xml]$XAML = @"
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Services List" Height="261.541" Width="423.299" ResizeMode="NoResize" BorderBrush="Black" Background="White">
    <Window.Effect>
        <DropShadowEffect/>
    </Window.Effect>
    <Grid>
        <DataGrid Name="dataGrid" AutoGenerateColumns="False" AlternationCount="1" SelectionMode="Single" IsReadOnly="True" HeadersVisibility="Column" Margin="10,32,10,10" AlternatingRowBackground="#FFD8D8D8" CanUserResizeRows="False" >
            <DataGrid.Columns>
                <DataGridCheckBoxColumn Binding="{Binding checkboxChecked, UpdateSourceTrigger=PropertyChanged}">
                    <DataGridCheckBoxColumn.ElementStyle>
                        <Style TargetType="CheckBox"/>
                    </DataGridCheckBoxColumn.ElementStyle>
                </DataGridCheckBoxColumn>
                <DataGridTextColumn Header="Common Name" Width="125" Binding="{Binding CName}"/>
                <DataGridTextColumn Header="Service Name" Width="125" Binding="{Binding SName}"/>
                <DataGridTextColumn Header="Current Status" Width="125"  Binding="{Binding Status}"/>
            </DataGrid.Columns>
        </DataGrid>
        <Button Name="GenerateButton" Content="Generate" HorizontalAlignment="Left" Margin="10,7,0,0" VerticalAlignment="Top" Width="75"/>
    </Grid>
</Window>
"@
    
Add-Type -AssemblyName  System.Drawing,
                        PresentationCore,
                        PresentationFramework,
                        System.Windows.Forms,
                        microsoft.VisualBasic
[System.Windows.Forms.Application]::EnableVisualStyles()

$reader = (New-Object System.Xml.XmlNodeReader $xaml)
$Form   = [Windows.Markup.XamlReader]::Load( $reader )

$xaml.SelectNodes("//*[@Name]") | 
ForEach-Object {Set-Variable -Name "WPF_$($_.Name)" -Value $Form.FindName($_.Name) -Scope Script}

$CurrServices = Get-Service | 
                Select DisplayName, Name, StartType

[System.Collections.ArrayList]$CBNameList = @()

$WPF_GenerateButton.Add_Click(
{ 
$DataGridList = @"
checkboxChecked,CName,SName,Status
$true,Test,Checked,Checked
$true,Test 2,Checked 2,Checked 2
$false,Test 3,NOT Checked,Checked
$false,Test 4,NOT Checked,Checked
$true,Test 5,Checked!,Checked
"@ | 
ConvertFrom-Csv

    $WPF_dataGrid.ItemsSource = $DataGridList
    $WPF_dataGrid.items.Refresh()

})

$Form.ShowDialog() | 
Out-Null
}

Show-DataGrid

Using WPF to populate a data grid and adding checkboxes to apply a filter

1 Answers1