WPF : Can we make groupbox header editable at runtime - wpf

i want groupbox's header editable that means at runtime i want it to be open for edit like we do rename in microsoft excelsheet in bottom left.
i came to know we can do it by control template but don't know how to write template for it.

It's easy to create Editable Header:
<GroupBox>
<GroupBox.HeaderTemplate>
<DataTemplate>
<TextBox Text="Editable Header"/>
</DataTemplate>
</GroupBox.HeaderTemplate>
<TextBlock Text="Some Content" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</GroupBox>
Or if you want to modify the template of all control?
Then you can find sample here: https://msdn.microsoft.com/en-us/library/vstudio/ms744748(v=vs.100).aspx

Related

WPF TextBox in DataTemplate of ToggleButton does not show text if in toolbar flyout

If I put the Column where the toolbar is hosted to be very big (800) then all the text is visible:
but if I put a smaller column this happens:
But I cannot understand why:
<DataTemplate x:Key="IconFilterButton">
<StackPanel Orientation="Horizontal">
<TextBlock
VerticalAlignment="Center"
Style="{StaticResource LargeIconStyle}"
Text="{Binding}" />
<TextBlock
Margin="6,0,0,0"
VerticalAlignment="Center"
DataContext="{Binding}"
Style="{StaticResource BodyTextStyle}"
Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ToggleButton}, Path=Tag}" />
</StackPanel>
</DataTemplate>
and here the definition
<ToggleButton
x:Name="DFilter"
Click="Filtering_Click"
Content=""
ContentTemplate="{StaticResource IconFilterButton}"
Tag="1d"
/>
<ToggleButton
x:Name="WFilter"
Click="Filtering_Click"
Content=""
ContentTemplate="{StaticResource IconFilterButton}"
Tag="1w"
/>
Even worst if I click on the button once they are out:
and then the text is visible but is wrong as the TextBlock is not considered in the object size:
The WPF ToolBar control uses a custom panel for the overflow Popup. In many styles, the ToolBarOverFlowPanel has a property WrapWidth set to a static value like 200. This determines how many items can be displayed before it wraps to another row in the popup.
I've created custom styling for this control and have found that the ToolBarOverFlowPanel used internally is buggy. That's probably the source of your problem.
You can re-template the ToolBar and wire-up a different value for WrapWidth to try to fix the issue, but my guess is that you'll still run into layout problems.
Otherwise, you might consider making your own replacement control.

How to set a specific header height for groupbox?

As the title say, I need to know how can I set a specific header height for a GroupBox, suppose I've this:
<GroupBox Header="Test">
</GroupBox>
this will display an header height based on the content of the header, but is possible also set a specific header height? How?
Thanks.
Instead of using a string for setting the GroupBox Header property, use directly a TextBlock, something like that:
<GroupBox>
<GroupBox.Header>
<TextBlock Text="High Header" VerticalAlignment="Bottom" MinHeight="100" />
</GroupBox.Header>
<Button Content="Button1" />
</GroupBox>

Using a DevX LookUpEdit control, with a GridControl, how can I hide column headings?

I currently have the following DevExpress WPF LookUpEdit control in my Xaml file. For the life of me, I can't find a way to hide the header row on the internal grid control. I'd like a very basic, single-column Tree View control. How can this be done?
<dxg:LookUpEdit x:Name="hierarchy"
Grid.Column="3"
Grid.Row="1"
HorizontalAlignment="Left"
Height="22"
Width="120"
Margin="0,2,0,3"
VerticalAlignment="Center"
FilterCondition="Contains"
ImmediatePopup="True"
ValueMember="nodeName"
DisplayMember="description"
EditValue="{Binding nodeName}"
ItemsSource="{Binding Source={StaticResource nodesSrc}}"
AutoPopulateColumns="False">
<dxg:LookUpEdit.PopupContentTemplate>
<ControlTemplate>
<dxg:GridControl >
<dxg:GridControl.Columns>
<dxg:GridColumn FieldName="description" />
</dxg:GridControl.Columns>
<dxg:GridControl.View>
<dxg:TreeListView
AutoWidth="True"
KeyFieldName="id"
ParentFieldName="parentID"
TreeDerivationMode="Selfreference">
</dxg:TreeListView>
</dxg:GridControl.View>
</dxg:GridControl>
</ControlTemplate>
</dxg:LookUpEdit.PopupContentTemplate>
</dxg:LookUpEdit>
Please, take a look at the Column Header Panel help-article - you can control this panel's visibility via the TreeListView.ShowColumnHeaders property.
P.S. Further, I suggest you to use the Visual Elements documentation-section that describe the control elements that you see on screen. Each sub-topic of this section contains a screenshot that outlines the described element and a brief overview of the element's purpose. Additionally, each topic contains a list of the settings that specify the element's visibility, content and appearance.

Bind Images in ComboBox using DataTemplate

I am working on an existing code. This thing has got a ComboBox with a few ComboBoxItems. Each items has got a StackPanel withing which there is an Image control and a TextBlock.
Now the source property of the Image control is set to different vector images stored in XAML files whereas the Text property of the TextBlock is set to a localized string.
I want to implement this not by having separate ComboBoxItems but by using DataTemplate. I can create a List of the strings for the TextBlock but I am not able to figure out as to how can I bind the images to the respective Image Controls.
I am open to any other better possible solution. Also, if you think that the right way to do it is the existing one, please let me know.
This might be a duplicate question but I couldn't find one that caters to my issue.
If it is, a link to the other question would suffice.
EDIT: Code Added
<ComboBox x:Name="imageInfoLevelsComboBox" SelectedIndex="1"
Style="{DynamicResource ComboBoxToolBarStyle}"
Margin="6,6,6,0" Width="50"
ToolTip="{x:Static Viewing:ViewingTexts.ImageInformationLevels}"
SelectionChanged="OnImageInfoLevelsComboBoxSelectionChanged" >
<ComboBoxItem x:Name="showAllComboBoxItem"
Style="{DynamicResource ComboBoxItemToolBarStyle}">
<StackPanel Orientation="Horizontal">
<Image x:Name="ImageInfoAllImage"
Source="{StaticResource ImageInfoFullIcon}"
Margin="0,0,4,0"
Width="24" Height="24"/>
<TextBlock
Text="{x:Static Viewing:ViewingTexts.ImageInformationFull}"
Margin="10,0,0,0"
VerticalAlignment="Center"/>
</StackPanel>
</ComboBoxItem>
<ComboBoxItem x:Name="showImportantComboBoxItem"
Style="{DynamicResource ComboBoxItemToolBarStyle}">
<StackPanel Orientation="Horizontal">
<Image x:Name="ImageInfoImportantImage"
Source="{StaticResource ImageInfoLimitedIcon}"
Margin="0,0,4,0"
Width="24" Height="24"/>
<TextBlock
Text="{x:Static Viewing:ViewingTexts.ImageInformationIntermediate}"
Margin="10,0,0,0"
VerticalAlignment="Center"/>
</StackPanel>
</ComboBoxItem>
<ComboBoxItem x:Name="showNotificationsComboBoxItem"
Style="{DynamicResource ComboBoxItemToolBarStyle}">
<StackPanel Orientation="Horizontal">
<Image x:Name="ImageInfoNotificationsImage"
Source="{StaticResource ImageInfoNoneIcon}"
Margin="0,0,4,0" Width="24" Height="24"/>
<TextBlock Text="{x:Static Viewing:ViewingTexts.ImageInformationNone}"
Margin="10,0,0,0" VerticalAlignment="Center"/>
</StackPanel>
</ComboBoxItem>
</ComboBox>
What I think I can do is create a class with 2 objects, one of type string and the other as Image. And then create a list and bind it with the combobox, but the issue is that I am nto sure how to use the vector image as an object.
Thanks.
I think you need to bind a list of objects with at least two properties instead of just a list of strings. One property would contain the string for the text block, the other property would be a urisource for the image.
Refer to this link for examples of urisource definitions Wpf - relative image source path
Bind the ItemsSource of your ComboBox to a collection of objects that has properties representing the text and the image. Then you need to create a IValueConverter and specify an instance of it on the binding of your image that can convert the value of the property on your object to a image source.
Here is one example:
http://www.codewrecks.com/blog/index.php/2010/07/23/bind-an-image-to-a-property-in-wpf/

Silverlight TextBlock TextTrimming inside ContentControl disappears

I'm displaying a series of messages (like emails) on a Grid:
<layout:TransitioningContentControl Name="tccCmdMessage" Margin="0,4">
<layout:TransitioningContentControl.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" FontWeight="SemiBold" />
<TextBlock Name="tbCmdMessage" Text="{Binding Message}" TextTrimming="WordEllipsis" />
</StackPanel>
</DataTemplate>
</layout:TransitioningContentControl.ContentTemplate>
</layout:TransitioningContentControl>
However, the tbCmdMessage never displays. If I remove the TextTrimming (or change it to None) it works. Alternatively if I don't use a ContentControl parent it also works.
Any ideas?
Take a look at this link: http://social.msdn.microsoft.com/Forums/eu/wpf/thread/30fd3279-7bc8-424f-9ee6-41b9f9589a1a.
I suppose explicitly specifying the Width (or MaxWidth) of the StackPanel can make the texts trimmed. You can also try to use another type of container, like Grid.
Other links with similar issue described:
Silverlight text trimming and wrapping issue
TextTrimming not working
http://forums.silverlight.net/t/58227.aspx/1

Resources