Before explaining my problem here is my code:
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<StackPanel Background="WhiteSmoke" >
<Grid Margin="0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<TextBlock Text="Name: " FontWeight="Bold" Grid.Row="0" />
<TextBlock x:Name="parametro" Text="{Binding Username}" Grid.Column="1" Grid.Row="0" />
<TextBlock Text="Creation Date: " FontWeight="Bold" Grid.Row="2" />
<TextBlock Text="{Binding CreationDate}" Grid.Column="1" Grid.Row="2" />
<TextBlock Text="Creation User: " FontWeight="Bold" Grid.Row="4" />
<TextBlock Text="{Binding CreationUser}" Grid.Column="1" Grid.Row="4" />
<Button Style="{DynamicResource MetroCircleButtonStyle}" Grid.RowSpan="3" Foreground="Green" FontSize="13" Width="50" FontFamily="{StaticResource FontAwesome}" Content="" Grid.Column="2" Grid.Row="0" />
<Button Style="{DynamicResource MetroCircleButtonStyle}" Grid.RowSpan="3" Foreground="Red" FontSize="13" Width="50" FontFamily="{StaticResource FontAwesome}" Content="" Grid.Column="3" Grid.Row="0"
Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}, Path=DataContext.DeleteUser}"
CommandParameter="{Binding ElementName=parametro, Path=Text}"/>
<ComboBox x:Name="combo" SelectedItem="{Binding Role}" ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}},
Path=DataContext.Roles}" Grid.Row="6" Grid.Column="1"/>
<TextBlock Text="Ruolo: " FontWeight="Bold" Grid.Row="6" Grid.Column="0"/>
<TextBlock Text="Descrizione: " FontWeight="Bold" Grid.Row="8" Grid.Column="0"/>
<TextBox Grid.Row="8" Grid.Column="1"></TextBox>
</Grid>
</StackPanel>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
My problem is that when I write text in the textbox (last element in the xaml), the width of the textbox grows with it. Now I know that there is a maxwidth property, but since I don't have a defined width for my grid columns, I can't bind it to the width of my textbox. I don't want to set the width in terms of real pixels, since I want my application to be "resizable". I also tried to create a fake control like a Border, and bind the width of the textbox to it but it doesn't work. How can I solve this?
First, we need to make the template assume the size of its parent.
Set TextWrapping="WrapWithOverflow" on the textbox.
At least one column must have a width of * rather than the default of Auto. This will cause the Grid to size itself to its parent. The second column seemed best to me for that role.
Give the Grid HorizontalAlignment="Left" so it doesn't end up getting centered.
You can get rid of the StackPanel; it's not doing anything for you.
Second, we need to make some changes in the DataGrid to constrain the width of its row details area.
This is my example I tested with; your ItemsSource will differ of course.
<DataGrid
ItemsSource="{Binding Items}"
AutoGenerateColumns="False"
RowHeaderWidth="0"
>
<!--
ScrollContentPresenter includes the row header column.
DataGridDetailsPresenter doesn't. So we set RowHeaderWidth="0"
above to avoid making the details too wide by an amount equal to
the width of the row header.
This is just cosmetic, so leave RowHeaderWidth alone if you have
a requirement to keep the row header visible.
-->
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<Grid
Margin="0,10"
Background="WhiteSmoke"
HorizontalAlignment="Left"
Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<TextBlock Text="Name: " FontWeight="Bold" Grid.Row="0" />
<TextBlock x:Name="parametro" Text="{Binding Username}" Grid.Column="1" Grid.Row="0" />
<TextBlock Text="Creation Date: " FontWeight="Bold" Grid.Row="2" />
<TextBlock Text="{Binding CreationDate}" Grid.Column="1" Grid.Row="2" />
<TextBlock Text="Creation User: " FontWeight="Bold" Grid.Row="4" />
<TextBlock Text="{Binding CreationUser}" Grid.Column="1" Grid.Row="4" />
<Button Style="{DynamicResource MetroCircleButtonStyle}" Grid.RowSpan="3" Foreground="Green" FontSize="13" Width="50" Content="" Grid.Column="2" Grid.Row="0" />
<Button Style="{DynamicResource MetroCircleButtonStyle}" Grid.RowSpan="3" Foreground="Red" FontSize="13" Width="50" Content="" Grid.Column="3" Grid.Row="0"
Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}, Path=DataContext.DeleteUser}"
CommandParameter="{Binding ElementName=parametro, Path=Text}"/>
<ComboBox MaxWidth="185" x:Name="combo" SelectedItem="{Binding Role}" ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}},
Path=DataContext.Roles}" Grid.Row="6" Grid.Column="1"/>
<TextBlock Text="Ruolo: " FontWeight="Bold" Grid.Row="6" Grid.Column="0"/>
<TextBlock Text="Descrizione: " FontWeight="Bold" Grid.Row="8" Grid.Column="0"/>
<TextBox
Grid.Row="8"
TextWrapping="WrapWithOverflow"
Grid.Column="1"
></TextBox>
</Grid>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
How did I figure this out?
I added preview mouse-down handler to the Grid in the DataTemplate:
<Grid Margin="0,10" Background="WhiteSmoke" PreviewMouseDown="Grid_PreviewMouseDown">
Ran my test program with some test data, clicked on a row to expand the row details, and clicked in the row details area. And this is the handler I have for that mouse event:
private void Grid_PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
List<DependencyObject> parents = new List<DependencyObject>();
var parent = VisualTreeHelper.GetParent(sender as DependencyObject);
while (parent != null)
{
parents.Add(parent);
parent = VisualTreeHelper.GetParent(parent);
}
;
}
I set a breakpoint and looked at parents in the watch window.
- parents Count = 16 System.Collections.Generic.List<System.Windows.DependencyObject>
+ [0] {System.Windows.Controls.Primitives.DataGridDetailsPresenter} System.Windows.DependencyObject {System.Windows.Controls.Primitives.DataGridDetailsPresenter}
+ [1] {System.Windows.Controls.Primitives.SelectiveScrollingGrid} System.Windows.DependencyObject {System.Windows.Controls.Primitives.SelectiveScrollingGrid}
+ [2] {System.Windows.Controls.Border} System.Windows.DependencyObject {System.Windows.Controls.Border}
+ [3] {System.Windows.Controls.DataGridRow} System.Windows.DependencyObject {System.Windows.Controls.DataGridRow}
+ [4] {System.Windows.Controls.Primitives.DataGridRowsPresenter} System.Windows.DependencyObject {System.Windows.Controls.Primitives.DataGridRowsPresenter}
+ [5] {System.Windows.Controls.ItemsPresenter} System.Windows.DependencyObject {System.Windows.Controls.ItemsPresenter}
+ [6] {System.Windows.Controls.ScrollContentPresenter} System.Windows.DependencyObject {System.Windows.Controls.ScrollContentPresenter}
+ [7] {System.Windows.Controls.Grid} System.Windows.DependencyObject {System.Windows.Controls.Grid}
+ [8] {System.Windows.Controls.ScrollViewer} System.Windows.DependencyObject {System.Windows.Controls.ScrollViewer}
+ [9] {System.Windows.Controls.Border} System.Windows.DependencyObject {System.Windows.Controls.Border}
+ [10] {System.Windows.Controls.DataGrid Items.Count:10} System.Windows.DependencyObject {System.Windows.Controls.DataGrid}
+ [11] {System.Windows.Controls.Grid} System.Windows.DependencyObject {System.Windows.Controls.Grid}
+ [12] {System.Windows.Controls.ContentPresenter} System.Windows.DependencyObject {System.Windows.Controls.ContentPresenter}
+ [13] {System.Windows.Documents.AdornerDecorator} System.Windows.DependencyObject {System.Windows.Documents.AdornerDecorator}
+ [14] {System.Windows.Controls.Border} System.Windows.DependencyObject {System.Windows.Controls.Border}
+ [15] {CS7Test02.MainWindow} System.Windows.DependencyObject {CS7Test02.MainWindow}
The Grid's parent is DataGridDetailsPresenter:
+ [0] {System.Windows.Controls.Primitives.DataGridDetailsPresenter} System.Windows.DependencyObject {System.Windows.Controls.Primitives.DataGridDetailsPresenter}
His parent is SelectiveScrollingGrid, and on up the chain. By simple trial and error, I found the parent with the ActualWidth I wanted, and bound to that.
I found another way of applying the desired width as a feature of the DataGrid itself rather than the datatemplate. This lets you use arbitrary details templates without having to individually fix up each one to use the correct width.
<DataGrid.RowStyle>
<!--
This style exists only so we can use its Resources to declare
the DataGridDetailsPresenter style someplace where it'll be taken
as an implicit style for DataGridDetailsPresenter in this grid's
row details children.
-->
<Style TargetType="DataGridRow">
<Style.Resources>
<Style TargetType="DataGridDetailsPresenter">
<Setter
Property="Width"
Value="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
/>
</Style>
</Style.Resources>
</Style>
</DataGrid.RowStyle>
Related
I have a WPF app and I am trying to Automate it using FlaUI. I am facing a problem with the DxTabControl. I have provided Automation IDs to the DxTabControl. I am using DXTabControl.ItemHeaderTemplate to generate TabItems dynamically.
According to DevExpress Team, The DXTabControl.ItemHeaderTemplate doesnt support AutoamtionPeer so a custom implementation has been added to override its default behaviour.
Now, I am able to see the TabControl and the TabItems in the Inspect.exe.
Now , my requirement is to Access the currently selected Tabitem and find the CloseButton using the AutoamtionID mentioned in the XAML below and close it. Pasting below the line again. As there would be multiple TabItems generated, I am unable to get the Currently active/Selected TabItem .
The XAML is below
<dx:DXTabControl AutomationProperties.AutomationId="ViewsParentTabControl"
MaxWidth="4000"
MaxHeight="4000"
Margin="1,0,-1,0"
Focusable="False"
ItemsSource="{Binding OpenViews}"
SelectedIndex="{Binding SelectedTabIndex}"
TabContentCacheMode="CacheTabsOnSelecting">
<dx:DXTabControl.ItemHeaderTemplate>
<DataTemplate DataType="viewModels1:OpenViewDefinitionViewModel">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Name="CreatedViewName"
MaxWidth="100"
Text="{Binding Data.ViewDefinition.Name}"
TextTrimming="CharacterEllipsis"
ToolTip="{Binding DisplayName}" />
<TextBlock Grid.Row="0" Grid.Column="1"><Run Text=" [" /><Run Text="{Binding ItemsCount, FallbackValue=0, Mode=OneWay}" /><Run Text="]" /></TextBlock>
<controls2:ProgressIndicator AutomationProperties.AutomationId="ProgressCurrentView"
Grid.Row="0"
Grid.Column="3"
Width="14"
Margin="4,0,0,0"
VerticalAlignment="Center"
CircleBorder="{StaticResource ListBoxItem.Foreground}"
CircleFill="{StaticResource ListBoxItem.Foreground}"
IndicatorEnabled="{Binding IsDataLoading}" />
<Button AutomationProperties.AutomationId="CloseCurrentViewButton"
Grid.Row="0"
Grid.Column="2"
Width="10"
Height="10"
Margin="10,1,0,0"
Padding="0"
HorizontalAlignment="Right"
BorderThickness="0"
Command="{Binding DataContext.CloseItemCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=dx:DXTabControl}}"
CommandParameter="{Binding}"
Focusable="False"
Style="{StaticResource MwButtonStyle}"
ToolTip="Close">
<Path
Data="F1 M 26.9166,22.1667L 37.9999,33.25L 49.0832,22.1668L 53.8332,26.9168L 42.7499,38L 53.8332,49.0834L 49.0833,53.8334L 37.9999,42.75L 26.9166,53.8334L 22.1666,49.0833L 33.25,38L 22.1667,26.9167L 26.9166,22.1667 Z"
Fill="White"
Stretch="Fill" />
</Button>
</Grid>
</DataTemplate>
</dx:DXTabControl.ItemHeaderTemplate>
<dx:DXTabControl.ItemTemplate>
<DataTemplate DataType="viewModels1:OpenViewDefinitionViewModel">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<local:VoyagesGridControl />
<local:VoyageValidationUserControl
Grid.Row="1"
Grid.Column="0"
MinHeight="100"
MaxHeight="300"
Visibility="{Binding Path=IsVoyageValidationShowing, FallbackValue=Collapsed, Converter={StaticResource BooleanToVisibilityConverter}}" />
<local:VoyageHistoryUserControl
Grid.Row="2"
Grid.Column="0"
MinHeight="300"
MaxHeight="300"
Visibility="{Binding Path=IsVoyageHistoryShowing, FallbackValue=Collapsed, Converter={StaticResource BooleanToVisibilityConverter}}" />
<local:VesselHistoryUserControl
Grid.Row="3"
Grid.Column="0"
MinHeight="300"
MaxHeight="300"
Visibility="{Binding Path=IsVesselHistoryShowing, FallbackValue=Collapsed, Converter={StaticResource BooleanToVisibilityConverter}}" />
<local:VoyageEvents
Grid.Row="0"
Grid.RowSpan="3"
Grid.Column="1"
VerticalAlignment="Top"
Visibility="{Binding Path=IsVoyageEventsShowing, FallbackValue=Collapsed, Converter={StaticResource BooleanToVisibilityConverter}}" />
<controls2:ProgressIndicator AutomationProperties.AutomationId="showProgressForLoadingViews"
Grid.Row="0"
Grid.RowSpan="3"
Grid.Column="0"
Width="80"
HorizontalAlignment="Center"
VerticalAlignment="Center"
CircleBorder="{StaticResource ListBox.BorderBrush}"
CircleFill="{StaticResource ListBox.BorderBrush}"
IndicatorEnabled="{Binding IsDataLoading}" />
<!-- Buttons -->
<Grid Grid.Row="4" Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel
Grid.Column="0"
VerticalAlignment="Center"
Orientation="Horizontal">
<TextBlock Style="{StaticResource MwTextBlockLabelStyle}" Text="Last Refresh:" />
<TextBlock
Margin="2,0,4,0"
VerticalAlignment="Center"
Text="{Binding LoadDate, StringFormat=G}" />
</StackPanel>
<Button AutomationProperties.AutomationId="AddNewVoyageButton"
Grid.Row="0"
Grid.Column="1"
Padding="0"
Command="{Binding AddVoyagesCommand}"
Focusable="False"
Style="{StaticResource MwButtonStyle}"
ToolTip="Add a new voyage to this View (ALT + A)">
<StackPanel Orientation="Horizontal">
<ContentControl Height="26" Content="{StaticResource Add}" />
<Label Style="{StaticResource MwLabelStyle}">_Add</Label>
</StackPanel>
</Button>
<Button AutomationProperties.AutomationId="refreshVoyageButton"
Grid.Row="0"
Grid.Column="2"
Padding="0"
Command="{Binding RefreshVoyagesCommand}"
Focusable="False"
Style="{StaticResource MwButtonStyle}"
ToolTip="Refresh the this View (modified entries are left unchanged)">
<StackPanel Orientation="Horizontal">
<ContentControl Height="26" Content="{StaticResource Refresh}" />
<TextBlock Style="{StaticResource MwTextBlockLabelStyle}" Text="Refresh" />
</StackPanel>
</Button>
<Button AutomationProperties.AutomationId="showVoyageHistroyButton"
Grid.Column="4"
Margin="2,2,2,2"
Padding="0"
VerticalAlignment="Center"
Command="{Binding ShowVoyageHistoryCommand}"
Focusable="False"
ToolTip="Show the selected voyage's change history"
Visibility="{Binding Data.ViewDefinition.IsInternalView, Converter={StaticResource MwBoolToVisibilityConverterReverse}}">
<StackPanel Orientation="Horizontal">
<ContentControl Height="26" Content="{StaticResource ShowVoyageHistory}" />
<TextBlock
Style="{StaticResource MwTextBlockLabelStyle}"
Text="Hide Voyage History"
Visibility="{Binding IsVoyageHistoryShowing, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBlock
Style="{StaticResource MwTextBlockLabelStyle}"
Text="Show Voyage History"
Visibility="{Binding IsVoyageHistoryShowing, Converter={StaticResource MwBoolToVisibilityConverterReverse}}" />
</StackPanel>
</Button>
<Button AutomationProperties.AutomationId="showVesselHistroyButton"
Grid.Column="5"
Margin="2,2,2,2"
Padding="0"
VerticalAlignment="Center"
Command="{Binding ShowVesselHistoryCommand}"
Focusable="False"
ToolTip="Show the selected vessel's voyage history"
Visibility="{Binding Data.ViewDefinition.IsInternalView, Converter={StaticResource MwBoolToVisibilityConverterReverse}}">
<StackPanel Orientation="Horizontal">
<ContentControl Height="26" Content="{StaticResource ShowVesselHistory}" />
<TextBlock
Style="{StaticResource MwTextBlockLabelStyle}"
Text="Hide Vessel History"
Visibility="{Binding IsVesselHistoryShowing, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBlock
Style="{StaticResource MwTextBlockLabelStyle}"
Text="Show Vessel History"
Visibility="{Binding IsVesselHistoryShowing, Converter={StaticResource MwBoolToVisibilityConverterReverse}}" />
</StackPanel>
</Button>
<Button AutomationProperties.AutomationId="showVoyageButton"
Grid.Column="6"
Margin="2,2,2,2"
Padding="0"
VerticalAlignment="Center"
Command="{Binding ShowVesselVisitsCommand}"
Focusable="False"
ToolTip="Show the selected voyage's events"
Visibility="{Binding Data.ViewDefinition.IsInternalView, Converter={StaticResource MwBoolToVisibilityConverterReverse}}">
<StackPanel Orientation="Horizontal">
<ContentControl Height="26" Content="{StaticResource Anchor}" />
<TextBlock
Style="{StaticResource MwTextBlockLabelStyle}"
Text="Hide Voyage Events"
Visibility="{Binding IsVoyageEventsShowing, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBlock
Style="{StaticResource MwTextBlockLabelStyle}"
Text="Show Voyage Events"
Visibility="{Binding IsVoyageEventsShowing, Converter={StaticResource MwBoolToVisibilityConverterReverse}}" />
</StackPanel>
</Button>
<Border Grid.Row="0" Grid.Column="8">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding IsDuplicateView, Mode=TwoWay}" Value="true">
<Setter Property="Background" Value="LightGreen" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Button AutomationProperties.AutomationId="DuplicateCheckButton"
Padding="0"
Command="{Binding DuplicateVoyagesCommand}"
Focusable="False"
Style="{StaticResource MwButtonStyle}"
ToolTip="Switch to duplicate Voyages (ALT + D)"
Visibility="{Binding Data.ViewDefinition.IsInternalView, Converter={StaticResource MwBoolToVisibilityConverterReverse}}">
<StackPanel Orientation="Horizontal">
<ContentControl Height="26" Content="{StaticResource Duplicate}" />
<AccessText Style="{StaticResource MwAccessTextLabelStyle}" Text="{Binding VoyageDuplicateText}" />
</StackPanel>
</Button>
</Border>
<Button AutomationProperties.AutomationId="PublishVoyagesButton"
Grid.Row="0"
Grid.Column="9"
Padding="0"
Command="{Binding PublishVoyagesCommand}"
Focusable="False"
Style="{StaticResource MwButtonStyle}"
ToolTip="Publish any modified Voyages (ALT + P)"
Visibility="{Binding Data.ViewDefinition.IsInternalView, Converter={StaticResource MwBoolToVisibilityConverterReverse}}">
<StackPanel Orientation="Horizontal">
<ContentControl Height="26" Content="{StaticResource Publish}" />
<AccessText Style="{StaticResource MwAccessTextLabelStyle}" Text="{Binding VoyagePublishText}" />
</StackPanel>
</Button>
<Button AutomationProperties.AutomationId="UndoSingleVoyageButton"
Grid.Row="0"
Grid.Column="10"
Padding="0"
Command="{Binding UndoSingleChangedVoyagesCommand}"
Focusable="False"
Style="{StaticResource MwButtonStyle}"
ToolTip="Locally Undo unpublished changes to the selected voyage"
Visibility="{Binding Data.ViewDefinition.IsInternalView, Converter={StaticResource MwBoolToVisibilityConverterReverse}}">
<StackPanel Orientation="Horizontal">
<ContentControl Height="26" Content="{StaticResource Undo}" />
<TextBlock Style="{StaticResource MwTextBlockLabelStyle}" Text="Undo Selected" />
</StackPanel>
</Button>
<Button AutomationProperties.AutomationId="UndoandUnpublishVoyageButton"
Grid.Row="0"
Grid.Column="11"
Padding="0"
Command="{Binding UndoChangedVoyagesCommand}"
Focusable="False"
Style="{StaticResource MwButtonStyle}"
ToolTip="Locally Undo any changed and unpublished voyages"
Visibility="{Binding Data.ViewDefinition.IsInternalView, Converter={StaticResource MwBoolToVisibilityConverterReverse}}">
<StackPanel Orientation="Horizontal">
<ContentControl Height="26" Content="{StaticResource Undo}" />
<TextBlock Style="{StaticResource MwTextBlockLabelStyle}" Text="Undo All" />
</StackPanel>
</Button>
</Grid>
</Grid>
</DataTemplate>
</dx:DXTabControl.ItemTemplate>
</dx:DXTabControl>
My FlaUIapproach of locating the Controls is below
public IMainWindow ConfirmCreatedView()
{
_logger.Info("Checking the newly created View on the screen");
//Apoorv: Need to find TabItem here
_controlAction.Highlight(ViewsTabControl); // This highlights the TabControl- Works
int NumberOfActiveTabs = ViewsTabControl.TabItems.Length; // This gives me no of TabItems
TabItem SelectedTab= ViewsTabControl.SelectedTabItem as TabItem; // Gives me Null here
var newTab = ViewsTabControl.SelectedTabItemIndex ; // Give me -1 here
_controlAction.Highlight(ViewsTabControl.TabItems[2]); // Works. It highlights the TabItem at position 2
_controlAction.ClickWait<TabItem>(ViewsTabControl.TabItems[2]); // This goes and clicks the tab item
TabItem SelectedTabs = ViewsTabControl.SelectedTabItem as TabItem;
var check = ViewsTabControl.TabItems[2].FindAllChildren();
// TabItem ti = ViewsTabControl.SelectedItem as TabItem;
//_controlAction.Highlight()
_controlAction.Highlight(CloseCurrentView); // highlights the close button atTabItem[0]
_controlAction.Click<Button>(CloseCurrentView); // closes it
return this;
}
I am using FlaUI to Find the TabControl using AutomationID as shown below
private Tab ViewsTabControl => _uiAutomation.FindElement("ViewsParentTabControl", Automation.FindBy.Id).AsTab();
private TabItem ViewsTabItem => _uiAutomation.FindElement("DXTabItem", Automation.FindBy.Id).AsTabItem();
I would like to find the curently active TabItem based on the Index and then go and click the close button by automating it.
TabItem SelectedTab= ViewsTabControl.SelectedTabItem as TabItem; // Gives me Null here
var newTab = ViewsTabControl.SelectedTabItemIndex ; // Give me -1 here
It is not TabItem it is DXTabItem. This is the type you should cast to.
DXTabItem SelectedTab = ViewsTabControl.SelectedTabItem as DXTabItem;
DevEXpress don't create automation peers for controls within ItemHeaderTemplate. It will be necessary to use a custom automation peer to provide this functionality. For example, I used the following class for test purposes:
public class DXTabItemAutomationPeerEx : DXTabItemAutomationPeer, ISelectionItemProvider {
private DXTabItem TabItem => base.Owner as DXTabItem;
private DXTabControl TabControl => TabItem.With((DXTabItem x) => x.Owner);
public DXTabItemAutomationPeerEx(DXTabItem ownerCore) : base(ownerCore) { }
protected override List<AutomationPeer> GetChildrenCore() {
List<AutomationPeer> children = base.GetChildrenCore();
foreach (var button in LayoutTreeHelper.GetVisualChildren(Owner).OfType<Button>())
children.Add(new ButtonAutomationPeer(button));
return children;
}
bool ISelectionItemProvider.IsSelected { get {
if (TabControl != null) {
return TabControl.SelectedContainer == TabItem;
}
return false;
}
}
}
Post adding this code inside my MainPage.Xaml.cs , I added a static constructor to register it
static MainWindow() {
NavigationAutomationPeersCreator.Default.RegisterObject(typeof(DXTabItem), typeof(DXTabItemAutomationPeerEx), owner => new DXTabItemAutomationPeerEx((DXTabItem)owner));
}
post this , these lines work as charm
TabItem CurrentTab = ViewsTabControl.SelectedTabItem as TabItem;
var Children = ViewsTabControl.FindAllChildren();
foreach (var child in Children) {
var subChildren = child.FindAllChildren();
}
I am trying to show the overall progress of current playing song in below format.
hh:mm:ss / hh:mm:ss ---> current time in hh:mm:ss / total time in hh:mm:ss
<Border Margin="30,0,20,0" Name="NowPlayingScurbberPanel" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True" RelativePanel.Below="NowPlayingButtonPanel" RelativePanel.AlignBottomWithPanel="True">
<StackPanel Visibility="{Binding Path=ShouldProgressBarBeVisible, Converter={StaticResource BoolToVisibilityConverter}}" MinHeight="40">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock x:Uid="NowPlayingCurrentMediaTimeText" Margin="0,0,80,30" Style="{StaticResource NowPlayingMediaTimeStyle}" Grid.Row="0" Text="{Binding Path=DisplayedMediaTimeCurrent}" HorizontalAlignment="Right" />
<TextBlock x:Uid="slash" Margin="0,0,60,30" Style="{StaticResource NowPlayingMediaTimeStyle}" Grid.Row="0" Text=" / " HorizontalAlignment="Right" />
<Slider x:Uid="NowPlayingScrubber" Margin="0,20,0,0" Style="{StaticResource NowPlayingMediaScrubberStyle}" Grid.Column="1" x:Name="NowPlayingScrubber" Value="{Binding Path=ProgressBarPercentage, Mode=TwoWay}" DragStarting="OnScrubberDragStarted" DropCompleted="OnScrubberDragCompleted" ValueChanged="OnScrubberDragDelta" IsEnabled="{Binding Path=ScrubberEnabled}" />
<TextBlock x:Uid="NowPlayingTotalMediaTimeText" Margin="60,0,0,30" Style="{StaticResource NowPlayingMediaTimeStyle}" Grid.Row="0" Text="{Binding Path=DisplayedMediaTimeTotal}" HorizontalAlignment="Right" />
</Grid>
</StackPanel>
</Border>
Things are working fine if total and current played time in less than an hour but when it cross more than a hour than "Slash" overlap with total time. If i give additional margin then content with less than an hour time looks bad.
How can i give margin based on content length or is there any better solution to solve this problem.
Thanks
You just need to tweak your layout slightly. Depends how you want it to look exactly, do you want it to overlay or be at the side of the slider?
Something like this will put the timers first and then the progress bar but you should be able to tweak to how you wish.
<Border Margin="30,0,20,0" Name="NowPlayingScurbberPanel" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True" RelativePanel.Below="NowPlayingButtonPanel" RelativePanel.AlignBottomWithPanel="True">
<StackPanel Visibility="{Binding Path=ShouldProgressBarBeVisible, Converter={StaticResource BoolToVisibilityConverter}}" MinHeight="40">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock x:Uid="NowPlayingCurrentMediaTimeText" Margin="5" Style="{StaticResource NowPlayingMediaTimeStyle}" Grid.Row="0" Text="{Binding Path=DisplayedMediaTimeCurrent}" HorizontalAlignment="Right" Grid.Column="0" />
<TextBlock x:Uid="slash" Margin="5" Style="{StaticResource NowPlayingMediaTimeStyle}" Grid.Row="0" Text=" / " HorizontalAlignment="Right" Grid.Column="1" />
<TextBlock x:Uid="NowPlayingTotalMediaTimeText" Margin="5" Style="{StaticResource NowPlayingMediaTimeStyle}" Grid.Row="0" Text="{Binding Path=DisplayedMediaTimeTotal}" HorizontalAlignment="Right" Grid.Column="2" />
<Slider x:Uid="NowPlayingScrubber" Margin="5" Style="{StaticResource NowPlayingMediaScrubberStyle}" x:Name="NowPlayingScrubber" Value="{Binding Path=ProgressBarPercentage, Mode=TwoWay}" DragStarting="OnScrubberDragStarted" DropCompleted="OnScrubberDragCompleted" ValueChanged="OnScrubberDragDelta" IsEnabled="{Binding Path=ScrubberEnabled}" Grid.Column="3" />
</Grid>
</StackPanel>
</Border>
This could be further simplified by using a single TextBlock with a Run E.G.
<TextBlock x:Uid="NowPlayingCurrentMediaTimeText" Margin="5" Style="{StaticResource NowPlayingMediaTimeStyle}" Grid.Row="0" HorizontalAlignment="Right" Grid.Column="0" >
<Run Text="{Binding Path=DisplayedMediaTimeCurrent}"/>
<Run Text=" \ "/>
<Run Text="{Binding Path=DisplayedMediaTimeTotal}"/>
</TextBlock>
You would probably need a Value Converter to get the margin exactly how you want it.
<StackPanel Orientation="Horizontal">
<TextBox x:Name="aTextBox" Width="100" Height="30" />
<TextBlock x:Name="aTextBlock" Width="100" Height="30" Text="some text"
Margin="{Binding ElementName=aTextBox, Path=Text.Length, UpdateSourceTrigger=PropertyChanged}" />
</StackPanel>
You can do this in the code behind.
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void aTextBox_TextChanged(object sender, TextChangedEventArgs e)
{
aTextBlock.Margin = new Thickness(10 + aTextBox.Text.Length * 2, 0, 0, 0);
aTextBlock.Text = aTextBox.Text;
aTextBox.Width = 100 + aTextBox.Text.Length * 2;
aTextBlock.Width = 100 + aTextBox.Text.Length * 2;
}
}
<StackPanel Orientation="Horizontal">
<TextBox x:Name="aTextBox" Width="100" Height="30" TextChanged="aTextBox_TextChanged" />
<TextBlock x:Name="aTextBlock" Width="100" Height="30" Text="some text" />
</StackPanel>
Firstly, thank you for taking the time out to read this post. All contributions are very much appreciated.
I'm having difficulty understanding how I can bind a ComboBox ItemsSource within a DataTemplate to an ObservableCollection.
Here's my code thus far:
DataTemplate Template (notice the combo's at the bottom of the template):
<DataTemplate x:Key="ListBoxCustomTemplate">
<Grid Margin="4" HorizontalAlignment="Stretch" x:Name="lstBoxItemRoomGrid" >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" FontWeight="Bold" Text="{Binding TemplateGroupName}" />
<Image x:Name="imgDeleteListBoxItem" Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" Source="/Icons/Print-Groups-Config/delete-32.png" Height="25" Cursor="Hand"
ToolTip="Remove template" VerticalAlignment="Center"
HorizontalAlignment="Right" MouseLeftButtonUp="imgDeleteListBoxItem_MouseLeftButtonUp">
<Image.Style>
<Style>
<Setter Property="Image.Visibility" Value="Hidden" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=lstBoxItemRoomGrid}" Value="True">
<Setter Property="Image.Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding TemplateDescription}" TextWrapping="WrapWithOverflow" />
<!-- Header Template Selection -->
<Label Grid.Row="2" Grid.Column="0" Margin="0,3,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="Select Header:" FontWeight="DemiBold" Foreground="DarkGray" />
<telerik:RadComboBox x:Name="radComboHeaderTemplate" Grid.Row="3" Grid.Column="0" Width="120" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"
ClearSelectionButtonVisibility="Visible" SelectedValue="{Binding TemplateHeaderID}" />
<!-- Footer Template Selection -->
<Label Grid.Row="2" Grid.Column="1" Margin="0,3,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="Select Footer:" FontWeight="DemiBold" Foreground="DarkGray" />
<telerik:RadComboBox x:Name="radComboFooterTemplate" Grid.Row="3" Grid.Column="1" Width="120" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"
ClearSelectionButtonVisibility="Visible" SelectedValue="{Binding TemplateFooterID}" />
</Grid>
</DataTemplate>
When my Window loads, I download the collection data from my database and store into a local collection. Note that there are two Collections, one for each of the 2 ComboBoxes in my DataTemplate.
//Header Templates
private ObservableCollection<TemplateHeaderFooter> templatesHeader = new ObservableCollection<TemplateHeaderFooter>();
//Footer Templates
private ObservableCollection<TemplateHeaderFooter> templatesFooters = new ObservableCollection<TemplateHeaderFooter>();
//--- Constructors ---
public PrintTemplateGroupsConfigWindow()
{
InitializeComponent();
//Download Data From DB
this.templatesHeader = TemplateHeaderFootersDB.GetAllTemplatesOfType(1);
this.templatesFooters = TemplateHeaderFootersDB.GetAllTemplatesOfType(2);
}
How do I get the collection Data templatesFooters & templatesHeader into the the ItemsSources of their respective ComboBoxes?
The datatemplate is for a ListBox.
<telerik:RadListBox x:Name="lstBoxPrintGroupTemplates" Height="300" Width="280" ItemsSource="{Binding}" IsEnabled="False"
ItemTemplate="{StaticResource ListBoxCustomTemplate}" Style="{StaticResource DraggableListBox}" >
Many thanks. Any help is appreciated.
Define properties wrappers over the variables of your collections and then you can bind them to comboboxes as:
ItemsSource="{Binding TemplatesHeader, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
public ObservableCollection<TemplateHeaderFooter> TemplatesHeader
{
get{return templatesHeader;}
}
Similarly you can do for other property
I'm using a ExpanderView to display some data in my app. But I'm having some difficulty trying to find out how to get an ExpanderViewItem's data after it's been selected.
On a ListBox you can call SelectionChanged="yourFunction" in your xaml code.. but for the expanderview I have no idea how to do this?
This is my XAML code for the expander:
<!--Custom header template-->
<DataTemplate x:Key="CustomHeaderTemplate">
<TextBlock Text="" FontSize="28" />
</DataTemplate>
<!--Custom expander template-->
<DataTemplate x:Key="CustomExpanderTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Width="400" Height="60" Fill="#FFF1F1F1" HorizontalAlignment="Stretch" StrokeThickness="0" Grid.Row="0" Grid.Column="0" />
<TextBlock Text="{Binding procedureName}" FontSize="30" Foreground="#FF00457C" FontWeight="Normal" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Margin="10,0,0,0" />
</Grid>
</DataTemplate>
<!--Custom expander items template-->
<DataTemplate x:Key="ExpanderViewItems" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="15" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding flagIcon}" Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" />
<TextBlock FontSize="26" Text="{Binding N}" Foreground="Black" FontWeight="Normal" Grid.Row="0" Grid.Column="1"/>
<TextBlock FontSize="20" Text="{Binding RNG}" Foreground="Black" FontWeight="Normal" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="2"/>
<TextBlock FontSize="26" Text="{Binding ValueAndUnit}" Foreground="Black" FontWeight="Medium" HorizontalAlignment="Right" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"/>
<TextBlock FontSize="18" Text="{Binding COM}" Foreground="Black" FontWeight="Normal" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" TextWrapping="Wrap" />
<Line StrokeThickness="1" Stroke="#C4C6CC" Stretch="Fill" X1="0" X2="1" Y1="0" Y2="0" VerticalAlignment="Center" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" />
</Grid>
</DataTemplate>
<!--Listbox Containing ExpanderViews-->
<ListBox Name="testsList" Grid.Row="3" Grid.Column="0" >
<ListBox.ItemTemplate>
<DataTemplate>
<!--ExpanderView-->
<toolkit:ExpanderView Header="{Binding}"
HeaderTemplate="{StaticResource CustomHeaderTemplate}"
Expander="{Binding}"
ExpanderTemplate="{StaticResource CustomExpanderTemplate}"
x:Name="expander"
FontSize="36"
Foreground="#FF00457C"
ItemsSource="{Binding testItems}"
ItemTemplate="{StaticResource ExpanderViewItems}" >
</toolkit:ExpanderView>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I'd really appreciate any help in the right direction! This seems to be a question that is not easily answered around the web.
#Frederik I've implemented what you've done in the code above using the SelectionChanged event of the ListBox - it still works fine for me.
I've been banging my head against the wall for a bit, but finally managed to solve it. First of all for the ItemTemplate I've made sure that the template is placed in a ListBoxItem element as it follows:
<DataTemplate x:Key="ExpanderViewItems" >
<ListBoxItem DataContext="{Binding}" Tap="ListBoxItem_Tap_1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="15" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding flagIcon}" Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" />
<TextBlock FontSize="26" Text="{Binding N}" Foreground="Black" FontWeight="Normal" Grid.Row="0" Grid.Column="1"/>
<TextBlock FontSize="20" Text="{Binding RNG}" Foreground="Black" FontWeight="Normal" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="2"/>
<TextBlock FontSize="26" Text="{Binding ValueAndUnit}" Foreground="Black" FontWeight="Medium" HorizontalAlignment="Right" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"/>
<TextBlock FontSize="18" Text="{Binding COM}" Foreground="Black" FontWeight="Normal" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" TextWrapping="Wrap" />
<Line StrokeThickness="1" Stroke="#C4C6CC" Stretch="Fill" X1="0" X2="1" Y1="0" Y2="0" VerticalAlignment="Center" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" />
</Grid>
</ListBoxItem>
</DataTemplate>
Once this is in place, go in the code behind and in the Tap event declared for the ListBoxItem use something like this:
ListBoxItem item = sender as ListBoxItem;
ExpanderItemModel model = item.DataContext as ExpanderItemModel;
Of course, ExpanderItemModel will be whatever you're using for your expander items...
This worked fine for me
Hope this helps!
Good luck!
You can use the "tap" event on the listbox:
In your XAML file add a tap event listner:
<!--Listbox Containing ExpanderViews-->
<ListBox Name="testsList" Grid.Row="3" Grid.Column="0" Tap="testsList_Tap" >
<ListBox.ItemTemplate>
<DataTemplate>
<!--ExpanderView-->
<toolkit:ExpanderView Header="{Binding}"
...
In your code behind file, implement the tap handler:
private void testsList_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
someModel selectedItem = (someModel)this.testsList.SelectedItem;
// Do something with your seleted data
...
}
you can get the selected values by listbox selectionchanged or expanderview expanded events.
For listbox :
private void lstExams_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (e.AddedItems.Count > 0)
{
Model.ExamTitles data = (sender as ListBox).SelectedItem as Model.ExamTitles;
}
}
Here ExamTitles is a class which contains collections
For expanderview Expanded
private void ExpanderView_Expanded(object sender, RoutedEventArgs e)
{
ExpanderView expview = (sender as ExpanderView);
Model.ExamTitles data = expview.Header as Model.ExamTitles;
}
Hope this helps!
Hi buddies :) I am working on a wpf app which deals with groupboxes and wrap panel. Looking at the title, it seems to be simple but after dynamically generating set of groupboxes I am finding it difficult. Here is the scenario:
I have 2 xaml files in my project. One is CodecView.xaml and CodecWidgetView.xaml. I have dynamically generated 4 groupboxes on startup as follows:
CodecView.xaml:
<UserControl.Resources>
<DataTemplate x:Key="CWDataTemplate">
<WrapPanel>
<TextBlock Text="{Binding Description}" Margin="0,0,0,0"/>
<local:CodecWidgetView Margin="5,10,5,5"/>
</WrapPanel>
</DataTemplate>
</UserControl.Resources>
<Grid Grid.Row="0" >
<Grid Name="NumberofCodecs" >
<ItemsControl ItemTemplate="{StaticResource CWDataTemplate}" ItemsSource="{Binding CodecWidgets}"/>
</Grid>
</Grid>
CodecWidgetView.xaml:
<Grid>
<GroupBox Height="Auto" HorizontalAlignment="Stretch" Margin="5,5,5,5" Name="groupBox1" VerticalAlignment="Stretch" Width="Auto">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ToggleButton Name="FrequencyBox" Content="Master" Grid.Column="1" Height="25" Width="50" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0" />
<ComboBox Grid.Column="2" ItemsSource="{Binding ModesList}" SelectedItem="{Binding SelectedModesList, Mode=OneWayToSource}" SelectedIndex="2" Height="23" HorizontalAlignment="Center" Margin="0,0,0,0" Name="comboBox2" VerticalAlignment="Center" Width="80" />
<ComboBox Grid.Column="0" ItemsSource="{Binding FrequencyList}" SelectedItem="{Binding SelectedFrequencyList, Mode=OneWayToSource}" SelectedIndex="0" Height="23" HorizontalAlignment="Center" Margin="0,0,0,0" Name="comboBox1" VerticalAlignment="Center" Width="80" />
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<RadioButton Style="{StaticResource {x:Type ToggleButton}}" Command="{Binding OneSixBitCommand}" Margin="0" Content="16 Bit" Name="OneSixBit" Height="25" Width="45" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" />
<RadioButton Style="{StaticResource {x:Type ToggleButton}}" Command="{Binding TwoZeroBitCommand}" Margin="0" Content="20 Bit" Name="TwoZeroBit" Height="25" Width="45" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" />
<RadioButton Style="{StaticResource {x:Type ToggleButton}}" Command="{Binding TwoFourBitCommand}" Margin="0" Content="24 Bit" Name="TwoFourBit" Height="25" Width="45" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" />
<RadioButton Style="{StaticResource {x:Type ToggleButton}}" Command="{Binding ThreeTwoBitCommand}" Margin="0" Content="32 Bit" Name="ThreetwoBit" Height="25" Width="45" Grid.Column="3" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Grid Grid.Row="2">
<Label Name="BitDelay" Content="Bit Delay" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,205,0" Height="25" Width="55" />
<Slider Height="23" HorizontalAlignment="Center" Minimum="0.0" Maximum="255.0" TickFrequency="1.0" Margin="95,0,0,0" Name="bitdelayslider" VerticalAlignment="Center" Width="160" />
<TextBox Name="BitDelayValue" IsReadOnly="True" Text="{Binding ElementName=bitdelayslider,Path=Value, StringFormat=0.0}" Width="40" Height="20" Margin="0,0,110,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Grid Grid.Row="3">
<Label Name="DBGain" Content="DB Gain" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,205,0" Height="25" Width="55" />
<TextBox Name="DBGainValue" IsReadOnly="True" Text="{Binding ElementName=dbgainslider,Path=Value, StringFormat=0.0}" Width="40" Height="20" Margin="0,0,110,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Slider Height="23" HorizontalAlignment="Center" Minimum="0.0" Maximum="59.5" TickFrequency="0.5" Margin="95,0,0,0" Name="dbgainslider" VerticalAlignment="Center" Width="160" />
</Grid>
</Grid>
</GroupBox>
</Grid>
CodecViewModel.cs: is a viewmodel class of CodecView.xaml
public ObservableCollection<CodecWidgetViewModel> CodecWidgets { get; set; }
public CodecViewModel()
{
CodecWidgets = new ObservableCollection<CodecWidgetViewModel>();
CodecWidgets.Add(new CodecWidgetViewModel { Description = "Location 8 - Dig Mic A" });
CodecWidgets.Add(new CodecWidgetViewModel { Description = "Location 9 - Dig Mic B" });
CodecWidgets.Add(new CodecWidgetViewModel { Description = "Location 10 - PCM A 3P3V" });
CodecWidgets.Add(new CodecWidgetViewModel { Description = "Location 11 - PCM B 3P3V" });
}
CodecWidgetViewModel.cs: is a viewmodel class of CodecWidgetView.xaml
private string _description;
public string Description
{
get
{
return _description;
}
set
{
_description = value;
OnPropertyChanged("Description");
}
}
This on startup dynamically generates 4 groupboxes one below the other. Since my windowsize is minheight = 300 and minwidth = 300, I have set scrollviewer. Since I have used Wrappanel, When i stretch it, it should behave as expected. That's when width is stretched 2nd groupbox should go to the right side of 1st row and same happens below.
On Startup:
When Width is Stretched:
Expected behaviour:
Thus looking at the expected behaviour, I want to achieve how wrappanel behaves :) Even though I have used wrappanel but it doesn't wrk as expected. Please help :)
You have used a WrapPanel as the panel of each individual item in the ItemsSource, which is not doing what you want.
Instead you have to explicitly tell the ItemsControl to use a WrapPanel as the panel for all of its children.
<ItemsControl ItemTemplate="{StaticResource CWDataTemplate}" ItemsSource="{Binding CodecWidgets}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>