Expand row in WPF datagrid - c#

I am using a DataGrid to display some log files, where each cell contains a TextBlock. I need help creating a method to expand a user selected row like this:
This is my code right now. It is based on the index of the clicked row:
DataGridRow testrow = (DataGridRow)logBrowserDataGrid.ItemContainerGenerator.ContainerFromIndex(index);
logBrowserDataGrid.UpdateLayout();
logBrowserDataGrid.ScrollIntoView(logBrowserDataGrid.Items[index]);
testrow = (DataGridRow)logBrowserDataGrid.ItemContainerGenerator.ContainerFromIndex(index);
testrow.Height = 100;
However this creates a weird result:
Do you know a god way to expand a row based on the index?
Do you know what happens in the weird result i get? It looks like i am expanding a part of the row, and the rest does stretch out. I have also studied it in runtime, and can see that its height is the correct 100, but the ActuallyHeight is still 20.
Additional info:
The default size of the rows are set by the .RowHeight property on the DataGrid.
I am using the AutoGenerateColumns feature, plus catching the AutogeneratingColumn event to replace the column with a DataGridTemplateColumn.

Why not replace the default DataGridCellTemplate with an Expander to do all that for you?
<DataGridColumn>
<DataGridColumn.CellTemplate>
<DataTemplate>
<Expander Header="{Binding SomeText}">
<TextBlock TextWrapping="Wrap" Text="{Binding SomeText}" />
</Expander>
</DataTemplate>
</DataGridColumn.CellTemplate>
</DataGridColum>
If you don't like the default Expander look, you can overwrite it's Template to look like a plain TextBlock
As a side note, to stretch and vertically align a DataGridRow, you want to stretch and align the Cell Content, not the Row.

I tried with an Expander and the functionality was precisely what I wanted, but the look was not however. I have tried restyling the Expander to fit my need, but gave up because of the events I needed to add to it (XamlReader + events was more than my programming skills could handle). But based on Rachels suggestion I made a UserControl with the following content:
<StackPanel Orientation="Vertical" MouseUp="StackPanel_MouseUp">
<TextBlock Name="headerTextBlock" Margin="3,2,3,2" Height="20" Width="Auto" TextWrapping="NoWrap"/>
<TextBlock Name="textTextBlock" Margin="3,2,3,2" Height="Auto" Width="Auto" TextWrapping="NoWrap" Visibility="Collapsed"/>
</StackPanel>
In the codebehind I then can handle the event "StackPanel_MouseUp" to change the visibility of the TextBlocks. This control looks and works like I wanted the restyled Expander to do.
Now my xaml string looks like this.
string xamlCellTemplateFormat =
#"<DataTemplate xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml""
~local~>
<local:CustomExpander x:Name=""UserControlTest"" Header=""{Binding Path=~binding~}"" Text=""{Binding Path=~binding~}""/>
</DataTemplate>";
string xamlCellTemplate = xamlCellTemplateFormat.Replace("~binding~", e.Column.Header.ToString());
xamlCellTemplate = xamlCellTemplate.Replace("~local~", " xmlns:local=\"clr-namespace:IS.AppFramework.Windows.LogBrowserWPF;assembly=" + Assembly.GetExecutingAssembly().GetName().Name + "\"");

Related

How to set button in side stackpanel to right edge in windows 10 universal app development

I an new to windows app development,i searched for this but not found any where.I need the button at right edge and Stretch the textbox till buttons start.But I am unable to set the button to Right edge.
How to acheve this.
A stackpanel works like a container. If you define layout properties on your stackpanel, then the objects inside your stackpanel cannot be displayed outside of the stackpanel's limits.
For example :
If I set my row and column number in my stackpanel,
<StackPanel Grid.Row="0" Grid.Column="2" Name="Version" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top">
<Label Grid.Column="4" Grid.Row="6" Name="Ver" Content="V." HorizontalAlignment="Right" />
<TextBlock Name="Vers" Text="1.0" TextAlignment="Right" />
</StackPanel>
Then the row/column properties set on my label are ignored and the 'HorizontalAlignment="Right"' will place my label on the right side of the stackpanel, not the grid.
A solution may be to remove your button from your stackpanel, you are then free to place your button anywhere on the grid.
Another solution can be to expand your stackpanel's limits.
To do so, you can use the Grid.ColumnSpan property or simply set your stackpanel on the right of the grid.
Hope that helped.

Dynamically add text in an image on Xaml/Windows Phone

I have a XAML ListBox where I am implementing an Image beside that a block of text is there. I want to display a count text in that image. For example for the first block in the image I want to display 1, for the 2nd block I want to display 2. This goes on. Below is the snippet. Can anybody please help me how can I write the count numbers in the image?
<StackPanel Grid.Column="0">
<Image Source="/Assets/Images/pin.png"></Image>
</StackPanel>
<TextBlock Name="locationID" Visibility="Collapsed" ></TextBlock>
</StackPanel>
</StackPanel>
If what you wanna do is display the index of each item of your datasource in your view, there are a couple of ways to do this.
You can save the item's index on a property of the datasource itself and bind that value in your view. This is probably the simplest solution if your collection is static. Cumbersome if dynamic, you would need to manually update the indexes of your collection changes.
You could expose the collection in the app level (making it global), write a converter and provide the item of the collection to it. Then you could search and return the index of that item in your global datasource.
You could implement a multibinding with the Cimbalino Toolkit providing both the item and the datasource and return the index.
here you go
<Grid Grid.Column="0">
<Grid.Background>
<ImageBrush ImageSource="/Assets/Images/pin.png"/>
</Grid.Background>
<TextBlock Text="text on image" Name="locationID" />
</Grid>
whole idea is to place the image as background of grid and place the text as content of the grid.

WPF Issues with binding to styled button

I have created a RadioButton style which I use across my application. The display part of which uses the content presenter to display whatever content I added to the button:
<ContentPresenter>
<ContentPresenter.ContentTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{TemplateBinding Content}" />
</Grid>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
I'm then attempting to bind a decimal with a string formatter to the styled button like so:
<RadioButton Content="{Binding Stake, StringFormat={}{0:C}}" Style="{DynamicResource NeutralSelectorButtonStyle}" />
Stake is a decimal within a ViewModel which is set as the DataContext. When I run this up the content coming through is blank.
I made a change using a label in the DataTemplate rather than a TextBlock, this displayed the decimal but had not formatted it.
Can anyone explain why this is happening and possibly provide a solution.
If you require any more information just ask :)
Thanks in advance.
You are almost there just instead of setting the string format inside binding you should use ContentStringFormat property when in ContentControls.
Take a look at this Label (it works with any content control):
<Label Content="{Binding Path=MaxLevelofInvestment}" ContentStringFormat="Amount is {0}"/>
ContentPresenter also has this property:
http://msdn.microsoft.com/en-us/library/system.windows.controls.contentpresenter.contentstringformat%28v=vs.110%29.aspx
Try it out. I hope it works for you.

Editing child objects of a combo box using c# and Wpf

Backgorund
I am currently writing a program that allows a user to select a manufacture from a combo box. The combo box is created in wpf using the following wpf code segment:
<ComboBox Height="23" Margin="40.422,128.423,229.908,0" Name="itemProductManufacture" ToolTip="Click to open drop down menu" VerticalAlignment="Top" Text="Select A Manufacture" SelectionChanged="itemProductManufacture_SelectionChanged" DropDownOpened="itemProductManufacture_DropDownOpened">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ManufactureId}" Width="0"/>
<Image Name="itemManufactureImage" Source="{Binding ManufactureImage}" Height="15" Width="70" Stretch="Uniform"/>
<TextBlock Text="{Binding ManufactureName}"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
The data is provided form a database and each entry has a Image, a name and an Id (intentionally not shown)
Problem
I am trying to code the behaviour of the combo box so when it is open the image height is 50 and when it is closed it is 15 this is so the image is larger when it is first displayed and then smaller once selected so it doesn't take up too much space on the form.
I have tried editing the image propities using code but am unable to accsess it using its name or any other children of the combo box.
Thanks
Jonathan
As you are using data template you won't be able to access the directly by its name.
Try something like this -
Image image = this.itemProductManufacture.ItemTemplate.FindName("itemManufactureImage", this) as Image;
One thing I am not clear is whether you want to change image size for all the items or the selected one? If you need to access the image for a particulat item in combobox you may have to use the ItemContainerGenerator.ContainerFromItem, as explained in following posts -
WPF - ItemsControl - How do I get find my "CheckBox" item that is in the ItemTemplate?
http://www.sitechno.com/Blog/HowToUseAttachedPropertiesAsAnExtensionMechanismForACheckedListbox.aspx
look at this, To know the various ways of finding controls - How can I find WPF controls by name or type?
You can edit image properties from code using binding. Or you can use triggers in Datatemplate. When comboboxitems checked properties change, you can change height property of corresponding image
Try this:
<Image Height = "{Binding Path=IsDropDownOpen,
RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type ComboBox}},
Converter={StaticResource myBoolToHeightConverter}}" />
An example for Converter here

WPF Hyperlink Child

I have a WPF Hyperlink that I am able to click and get its NavigateUri property just fine. However, I want to be able to bundle some additional information with the Hyperlink so I can process it in my event handler. This is how it looks right now:
<TextBlock Grid.Row="0">
<Hyperlink ToolTip="{Binding Path=Contact.ToolTipPersonalEmail}"
Name="ContactHyperlink" Foreground="#FF333333"
RequestNavigate="HandleContactEmailClicked"
NavigateUri="{Binding Path=Contact.Email}"
>
<TextBlock Text="{Binding Path=Contact.Fullname}" Width="Auto"
HorizontalAlignment="Stretch"
TextTrimming="CharacterEllipsis"/>
<TextBlock Text="{Binding Path=Data1}" Name="data1" Visibility="Collapsed" />
<TextBlock Text="{Binding Path=Data2}" Name="data2" Visibility="Collapsed" />
</Hyperlink>
</TextBlock>
Basically, in my event handler, I want to be able to access the data inside the two textblocks that have visibility = "Collapsed" (data1 and data2). I liken this to "hidden" data in an HTML form.
I tried messing with the "Inlines" property of Hyperlink but that's not working, and since this is inside a DataTemplate I can't access data1 and data2 by name in my code.
Any ideas?
Thanks.
creating textblocks to hold that data is somewhat... overkill. I'd go with one of these two options:
use databinding, to place a specific
object into the hyperlink, then to
get it back, all you need to do, is
access the DataContext of the
hyperlink,and it will provide you
the class which holds data1 and
data2
attach the object which
populates data1 and data2 into the
Hyperlink's TAG attribute
In your event handler you can do something like this:
ContentPresenter presenter = (ContentPresenter)sender.TemplatedParent;
DataTemplate template = presenter.ContentTemplate;
TextBlock textBlock = (TextBlock)template.FindName("data1", presenter);
Probably not the prettiest way, but it works for me.

Categories

Resources