列标题中的图像以及WPF中的文本 [英] Image in column header along with the text in WPF
本文介绍了列标题中的图像以及WPF中的文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是新的 WPF 和 插入 代码关键字>图像 列标题 标题 text 和想要 to 在 image OnClick事件上编写代码。
目前全部 列 和行数据从 数据库< 获取 / span>。
newRow = dataInfo.ProcessDataRow（filter，ProcessNames [j]，ProcessCaseNames [i]）;
if （newRow！= null ）
{
App.Current.Dispatcher.Invoke（（Action）（（）= >
{
ReportData.Add（newRow）;
}））;
}
xaml代码：
< DataGrid ItemsSource = {Binding Path = ReportData，Mode = TwoWay} SelectedItem = {Binding SelectedRow} AutoGenerateColumns = True Grid.Row = 1 HorizontalAlignment = Stretch Name = Datagrid VerticalAlignment = 拉伸 BorderThickness = 1 IsReadOnly = True AlternatingRowremoved = Gainsboro AlternationCount = 2 CanUserReorderColumns = < span class =code-string> True BorderBrush = 黑色 Margin = 0,3,0,90 SelectionChanged = Datagrid_SelectionChanged >
任何人都可以帮助我如何从代码背后实现这个功能。
解决方案
你可以简单创建一个Header样式，其中你可以使用一个stackpanel，它将包含一个文本块和一个具有适当路径的图像，并将该标题样式添加到运行时到该控件
XAML代码
< 窗口 x：Class = PrintingApplication.MainWindow
xmlns = http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns：x = http://schemas.microsoft.com/winfx/2006/xaml
< span class =code-attribute>
标题 = MainWindow 高度 = 350 宽度 = 525 >
< Window.Resources >
< 样式 TargetType = {x：Type DataGridColumnHeader} x：键 = imageDataGridRowHeader >
< Setter Property =Template>
< Setter .Value>
< ControlTemplate TargetType ={ x ： 输入DataGridColumnHeader} >
< StackPanel Orientation =Horizontal>
< TextBlock Text ={ Binding RelativeSource = {RelativeSource Mode = FindAncestor，AncestorType = {x ： Type DataGrid} }，Path = Columns [1] .Header}/>
< Image IsHitTestVisible =TrueHeight =20Width =20VerticalAlignment =CenterSource =/ PrintingApplication; Component / dark_windows_8 -wide.jpgMargin =0 KeyboardNavigation .IsTabStop =False/>
< / StackPanel >
< / ControlTemplate >
< / Setter.Value >
< / Setter >
< / Style >
< / Window.Resources >
< 网格 >
< DataGrid x：名称 = data1 AutoGenerateColumns = True ItemsSource = {Binding Path =。} 宽度 = 500 高度 = 500 PreviewMouseRightButtonDown = data1_PreviewMouseRightButtonDown_1 > < / DataGrid >
< / Grid >
< / Window >
电话背后代码
public MainWindow（）
{
InitializeComponent（）;
BindDataToDataGrid（）;
}
私有 void BindDataToDataGrid（）
{
DataTable dt = new DataTable（）;
dt.Columns.Add（ ID）;
dt.Columns.Add（ Image）;
dt.Rows.Add（ Kartik， 发送）;
dt.Rows.Add（ Ashok， 重新发送）;
dt.Rows.Add（ Paresh， 报告）;
dt.AcceptChanges（）;
data1.ItemsSource = dt.DefaultView;
data1.AutoGeneratingColumn + = data1_AutoGeneratingColumn;
}
void data1_AutoGeneratingColumn（ object sender，DataGridAutoGeneratingColumnEventArgs e）
{
if （Convert.ToString（e.Column.Header）== 图像）
{
e.Column.HeaderStyle = FindResource（ imageDataGridRowHeader） as Style;
}
}
我想要下面的内容 （图片按钮点击）
< window.resources>
< style targettype = {x：Type DataGridColumnHeader} x：key = < span class =code-string> imageDataGridRowHeader xmlns：x = < span class =code-string>＃unknown >
< setter property = 模板 >
< setter.value>
< controltemplate targettype = {x：Type DataGridColumnHeader} >
< stackpanel orientation = 水平 >
< textblock text = {Binding RelativeSource = {RelativeSource Mode = FindAncestor，AncestorType = {x：Type DataGrid}}，Path = Columns [1] .Header} />
<按钮x：名称= btnFilter保证金= 3,0,0,0 Content = Content_1 >
< Button.Template>
< controltemplate>
< image ishittestvisible = True height = 10 width = 10 verticalalignment = 中心 source = / .. Image.png margin = 0 keyboardnavigation.istabstop = False />
< / controltemplate >
< / Button.Template >
< / 按钮 >
< / stackpanel >
< / controltemplate >
< / setter.value >
< / setter >
< / style >
< / window.resources >
< grid> < / 网格 >
和.xaml.cs我在下面添加了Click事件：
void data1_AutoGeneratingColumn（ object sender，DataGridAutoGeneratingColumnEventArgs e ）
{
e.Column.HeaderStyle = FindResource（ imageDataGridRow< big>标题） as 样式;
EventManager.RegisterClassHandler（ typeof （按钮），Button.ClickEvent， new RoutedEventHandle < / big > r（btn_Click））;
}
I am new to WPF and in my application I want to insert an image in the one of the columns header with the header text and want to write code on the image OnClick event.
Currently all the column and row data is fetched from database.
newRow = dataInfo.ProcessDataRow(filter, ProcessNames[j], ProcessCaseNames[i]);
if (newRow != null)
{
App.Current.Dispatcher.Invoke((Action)(() =>
{
ReportData.Add(newRow);
}));
}
xaml code:
<DataGrid ItemsSource="{Binding Path=ReportData, Mode=TwoWay}" SelectedItem="{Binding SelectedRow}" AutoGenerateColumns="True" Grid.Row="1" HorizontalAlignment="Stretch" Name="Datagrid" VerticalAlignment="Stretch" BorderThickness="1" IsReadOnly="True" AlternatingRowremoved="Gainsboro" AlternationCount="2" CanUserReorderColumns="True" BorderBrush="Black" Margin="0,3,0,90" SelectionChanged="Datagrid_SelectionChanged">
Can anyone please assist me how to implement this functionality from code behind.
解决方案
You can simple Create one Header style in which u can take one stackpanel which will contain one textblock and one image with appropriate path and add that header style to runtime to that control
XAML Code
<Window x:Class="PrintingApplication.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"> <Window.Resources> <Style TargetType="{x:Type DataGridColumnHeader}" x:Key="imageDataGridRowHeader"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type DataGridColumnHeader}"> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGrid}}, Path=Columns[1].Header}"/> <Image IsHitTestVisible="True" Height="20" Width="20" VerticalAlignment="Center" Source="/PrintingApplication;Component/dark_windows_8-wide.jpg" Margin="0" KeyboardNavigation.IsTabStop="False"/> </StackPanel> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <Grid > <DataGrid x:Name="data1" AutoGenerateColumns="True" ItemsSource="{Binding Path=.}" Width="500" Height="500" PreviewMouseRightButtonDown="data1_PreviewMouseRightButtonDown_1"></DataGrid> </Grid> </Window>
Code Behind Call
public MainWindow() { InitializeComponent(); BindDataToDataGrid(); } private void BindDataToDataGrid() { DataTable dt = new DataTable(); dt.Columns.Add("ID"); dt.Columns.Add("Image"); dt.Rows.Add("Kartik", "Send"); dt.Rows.Add("Ashok", "Resend"); dt.Rows.Add("Paresh", "Report"); dt.AcceptChanges(); data1.ItemsSource = dt.DefaultView; data1.AutoGeneratingColumn += data1_AutoGeneratingColumn; } void data1_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e) { if (Convert.ToString(e.Column.Header) =="Image") { e.Column.HeaderStyle = FindResource("imageDataGridRowHeader") as Style; } }
I wanted something like below (Image Button Click)
<window.resources> <style targettype="{x:Type DataGridColumnHeader}" x:key="imageDataGridRowHeader" xmlns:x="#unknown"> <setter property="Template"> <setter.value> <controltemplate targettype="{x:Type DataGridColumnHeader}"> <stackpanel orientation="Horizontal"> <textblock text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGrid}}, Path=Columns[1].Header}" /> <Button x:Name="btnFilter" Margin="3,0,0,0" Content="Content_1"> <Button.Template> <controltemplate> <image ishittestvisible="True" height="10" width="10" verticalalignment="Center" source="/..Image.png" margin="0" keyboardnavigation.istabstop="False" /> </controltemplate> </Button.Template> </Button> </stackpanel> </controltemplate> </setter.value> </setter> </style> </window.resources> <grid></grid>
and in .xaml.cs to have Click event I added below:
void data1_AutoGeneratingColumn(object sender ,DataGridAutoGeneratingColumnEventArgs e) { e.Column.HeaderStyle = FindResource("imageDataGridRow <big> Header")as Style; EventManager.RegisterClassHandler(typeof(Button), Button.ClickEvent, new RoutedEventHandle</big>r(btn_Click)); }
这篇关于列标题中的图像以及WPF中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
