I have a pop up which contains a data grid. If I divide the data grid into columns, then it shows the columns in the data grid and there is no issue. But when I include some content in the rows in the data grid, then those contents are not visible.
<Popup Name="myPopUp"
Placement="MousePoint"
AllowsTransparency="False"
PopupAnimation="Slide"
StaysOpen="False"
Height="370"
Width="350">
<Border BorderThickness="3" BorderBrush="Black">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="320"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<DataGrid>
<DataGrid.Columns>
<DataGridTemplateColumn Header="Code" Width="160" IsReadOnly="True">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="Test"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>
</Border>
</Popup>
I am wondering why it is like that. Can someone help ?
Is that the case that a data grid cannot be included in a pop up ?
To make a popup control visible, you need to set the IsOpen property to true.
For your reference, http://www.c-sharpcorner.com/UploadFile/mahesh/using-xaml-popup-in-wpf/
Related
I'm converting a Winforms app to WPF and run in to this error. In the winforms application the system loads buttons into a datagridview. As theres no datagridview in wpf, I've used datagrid. Sadly though, the things dont work. For some odd reason i cannot fix, i cant test what i thought of, i get a weird displayindex error. What i was wondering if someone can tell me either an alternative to what is used in the winforms app or tell me if what i have written works.
Winforms Code:
Dim btn As New DataGridViewButtonColumn()
dgBoorMachine.Columns.Add(btn)
btn.HeaderText = "del"
btn.Text = "X"
btn.Name = "del"
btn.UseColumnTextForButtonValue = True
dgBoorMachine.Columns("del").Width = 30
WPF Code:
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="560"/>
<ColumnDefinition Width="425" />
<ColumnDefinition Width="560" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="156" />
<RowDefinition Height="55.2" />
<RowDefinition Height="89.6"/>
<RowDefinition Height="332.8"/>
<RowDefinition Height="217.6"/>
<RowDefinition Height="1" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<DataGrid x:Name="dgSlijpMachine" Grid.Row="2" Grid.Column="1">
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button x:Name="btn1" Content="X" Click="btn1_Click"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid>
</Grid>
The error might be because you're missing the <DataGrid.Colums> tag
instead of
<DataGrid x:Name="dgSlijpMachine" Grid.Row="2" Grid.Column="1">
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button x:Name="btn1" Content="X" Click="btn1_Click"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid>
it should be
<DataGrid x:Name="dgSlijpMachine" Grid.Row="2" Grid.Column="1">
<DataGrid.Columns>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button x:Name="btn1" Content="X" Click="btn1_Click"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
Now I don't know exactly what you want to achieve. What this will do, is add a column with a button to every row you add to your DataGrid and nothing else. If you actually want to populate your DataGrid with values, you should bind to the DataGrid's ItemsSource, eg.
<DataGrid x:Name="dgSlijpMachine" Grid.Row="2" Grid.Column="1" ItemsSource="{Binding MyItems}">
where MyItems is an ObservableCollection or similar type.
I have a TabContorl and I am adding tabitem dynamically. I have bind datatemplate to some viewmodel and view is loaded as defined in datatemplate.
<DataTemplate DataType="{x:Type viewmodels:ItemViewModel}">
<views:CustomerOrderView />
</DataTemplate>
<DataTemplate DataType="{x:Type viewmodels:InvoiceGeneratorViewModel}">
<views:InvoiceGenerator/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewmodels:OrderDetailsViewModel}">
<views:OrderDetailsView/>
</DataTemplate>
if i use controls directly in customerorderview then it works fine. It means if i switch the tab all values are loaded accordingly but does not work properly when if i use another usercontrol insite customerview user control. I have created once user control have one textbox, button and a popup contorl. When i click on button the popup opens and remains even if swich the tab. If textbox value is change the value is also changed for all tabs. It looks one view is serving all the tabs. I could not understand how to handle it.
Below is the user control which i am using inside customer
<UserControl x:Class="OrderManagement.Views.ProductSelectionView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="txtProduct" Grid.Row="0" Grid.Column="0"/>
<Button x:Name="btnSearch" Content="S" Click="OnSearchClick" Grid.Row="0" Grid.Column="1" Margin="5"/>
<Popup x:Name="popup" PlacementTarget="{Binding ElementName=btnSearch}" Placement="Bottom"
Width="300" Height="300" Margin="5">
<Border BorderBrush="Black" BorderThickness="2" Background="AliceBlue">
<Grid >
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<DataGrid x:Name="dataGrid" AutoGenerateColumns="False" Grid.Row="0" Grid.ColumnSpan="2"
IsReadOnly="False" CanUserAddRows="False" CanUserDeleteRows="False">
<DataGrid.Columns>
<DataGridCheckBoxColumn Binding="{Binding IsChecked}" IsReadOnly="False"/>
<DataGridTextColumn Header="Product Name" Binding="{Binding Name}"/>
<DataGridTextColumn Header="Quantity In Stock" Binding="{Binding QuantityInStock}"/>
</DataGrid.Columns>
</DataGrid>
<WrapPanel Grid.Row="1" Grid.ColumnSpan="2" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Right">
<Button Content="OK" Click="OnOKClick" Width="80"/>
<Button Content="Cancel" Click="OnCancelClick" Width="80" Margin="20,0,0,0"/>
</WrapPanel>
</Grid>
</Border>
</Popup>
</Grid>
</UserControl>
Tabcontrol virtualize the data as per its datacontext but popup and text value in productselection control remains the same for all tabs. opens the popup but it remains for all the tab.
Let me know if how it can be done or what is the mistake i am doing
I have WPF datagrid. I want to use
i) maximum available width for "Description" textblock (present inside 1st column)
ii) Auto width for Image control (present inside 1st column) and
iii) "Auto" width for rest of the column.
I have written follwing xaml code. But width is not working as per requriement.
Edit
Issue : Instead, 2nd column text is getting truncated.
screenshot:
Any suggestions?
Thanks!
<Grid Margin="10,0,10,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<DataGrid Grid.Row="0" Grid.ColumnSpan="2" ItemsSource="{Binding SelectedItemsCollectionView}" HorizontalAlignment="Stretch" AutoGenerateColumns="False">
<DataGrid.Columns>
<!--Get maixmum available space for 1st Column-->
<DataGridTemplateColumn Width="*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid Margin="5,0,0,0">
<Grid.ColumnDefinitions>
<!--Get "Auto" space for Image control-->
<ColumnDefinition Width="Auto" />
<!--Get remaining available space for Description textblock-->
<ColumnDefinition Width="*" ></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Stretch="None" Margin="0,0,5,0" Source="{Binding Converter={StaticResource ShowHideToImageConverterRef}, Path=IsHidden}"
Visibility="{Binding Converter={StaticResource VisibilityConverterRef}, Path=RowType}" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="1" Text="{Binding Description}" VerticalAlignment="Center" HorizontalAlignment="Left" />
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<!--Get "Auto" space for 2nd Column-->
<DataGridTextColumn Binding="{Binding Comments}" Width="Auto" />
</DataGrid.Columns>
</DataGrid>
<Label Grid.Row="1" Grid.Column="0" Content="Name" ></Label>
<TextBox Grid.Row="1" Grid.Column="1" Margin="10,0,0,0" Text="{Binding EmpName}"/>
</Grid>
Issue resolved after applying below solution suggested by Scott on other stackoverflow post "DataGrid column width doesn't auto-update".
1) In your DataGridTextColumn Bindings (all except your * sized column) set NotifyTargetUpdated=True.
2) On your DataGrid, add a handler to the TargetUpdated event.
3) In your TargetUpdated event handler:
-- a) Set the DataGrid's * sized column's width to 0.
-- b) Call the UpdateLayout() method on the DataGrid.
-- c) Set the DataGrid's * sized column's width back to new DataGridLength(1, DataGridLengthUnitType.Star)
I want a column in my datagrid to display both text and a small ellipsis "..." button - similar to what you see in the Visual Studio property grid. Here is a mockup of the datagrid column I'm trying to build:
When the user clicks the ellipsis button, I will display a custom picker dialog and then in the text section of the column, display what I can of the comma sepatated values (i.e. string) returned from the dialog.
How do I get a datagrid column to contain both text and button as I have mocked up here?
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.Resources>
<DataTemplate x:Key="mDataTemplate">
<Button Margin="10,10,0,0" >
<Button.Content>
<Grid x:Name="ButtonGrid" Height="Auto" HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock />
<Ellipse />
</Grid>
</Button.Content>
</Button>
</DataTemplate>
</Grid.Resources> </Grid>
You have to use a DataGridTemplateColumn.
Sample code:
<DataGrid>
<DataGrid.Columns>
<DataGridTemplateColumn Header="Your header">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<DockPanel>
<Button DockPanel.Dock="Right">...</Button>
<TextBlock Text="{Binding YourProperty}"></TextBlock>
</DockPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
I want to bind the Height of the ListBox to the Height of the StackPanel so the ListBox stretches itself Vertically so the green area is not visible anymore.
When there is no item in the listbox its hidden.
When there is item > 1 the ListBox must be stretching itself to the add/del buttons so the add/del buttons are always at the bottom of the stackpanel(dont want to use dockpanel for that)
How can I do that? I get no binding erros?
<StackPanel x:Name="stack" Background="Green" DataContext="{Binding DocumentViewModelList/}" Orientation="Vertical" >
<ListBox SelectionMode="Single" VirtualizingStackPanel.IsVirtualizing="False"
SelectedItem="{Binding SelectedDocumentViewModel,Mode=TwoWay}"
Height="{Binding ElementName=stack,Path=Height}"
Width="Auto"
Focusable="True"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto"
Grid.Row="1"
Name="documentListBox"
BorderThickness="1"
ItemsSource="{Binding DocumentList}"
Visibility="{Binding ElementName=documentListBox,Path=HasItems, Converter={StaticResource boolToVisibilityConverter}}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=Id}" />
<TextBlock Text="{Binding Path=Name}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<!--<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="IsSelected" Value="{Binding Mode=TwoWay, Path=IsSelected}" />
</Style>
</ListBox.ItemContainerStyle>-->
</ListBox>
</StackPanel>
Simply use a Grid instead of a StackPanel:
<Grid x:Name="grid"
Background="Green"
DataContext="{Binding DocumentViewModelList}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListBox Grid.Row="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" ..... />
<UniformGrid Grid.Row="1"
Rows="1"
HorizontalAlignment="Center"
VerticalAlignment="Bottom">
<Button Content="Delete" />
<Button Content="Add" />
<Button Content="Open" />
</UniformGrid>
</Grid>
The ListBox simply takes up the entire space of the first row, while the UniformGrid takes up the bottom row with only the space it needs (and makes the buttons all the same size as a bonus).
No need for hard-coded width/height values (or any bindings for height/width), and no value converters needed.
To implement the selective height (if has items x else y) use a value converter... also, I think height will be NaN so try ActualHeight (Bad practice but might work)... use a tool like snoop to see the values!
Is their a specific reason you are using a stackpanel? I grid will work better (StackPanel only give the min space needed where a grid can give as much space as needed)?
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListBox Grid.Row="1" />
<StackPanel Orientation="Horizontal" Grid.Row="1">
<!-- Buttons -->
</StackPanel>
</Grid>