I have a the Following FlipView in a winRT project
<FlipView x:Name="Flip" GotFocus="FlipView_GotFocus" Grid.Row="1" ItemsSource="{Binding Controls, ElementName=pageRoot}" SelectedItem="{Binding SelectedControl, ElementName=pageRoot, Mode=TwoWay}">
<FlipView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<ContentPresenter Content="{Binding}" />
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
inside of it i will have several usercontrols that have some TextBox, but when i focus in one of the TextBox , the virtual Keyboard gets in front of the other TextBox, it doesnt "lift" the app like it normally does when i have a simple page with TextBoxs.
Is there a way to detect Keyboard showing up and pulling the view of the app up?
Here is one of the UserControl im using
<UserControl.Resources>
<ResourceDictionary>
<common:ByteArrayToBitmapImageConverter x:Key="ByteArrayToBitmapImageConverter" />
<common:StringToValidityConverter x:Key="StringToValidityConverter" />
</ResourceDictionary>
</UserControl.Resources>
<StackPanel>
<StackPanel Style="{StaticResource SubHeaderStyle}">
<Image Source="/Images/Contract/Sales.png" Style="{StaticResource SubHeaderImageStyle}" />
<TextBlock x:Uid="Sale" Style="{StaticResource SubHeaderTextStyle}" />
</StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Image Grid.RowSpan="6" Width="300" Source="{Binding Picture, Converter={StaticResource ByteArrayToBitmapImageConverter}}" />
<TextBlock x:Uid="SalesOffice" Grid.Row="1" Grid.Column="2" />
<TextBox Grid.Row="1" Grid.Column="3" Text="{Binding Office, Mode=TwoWay}" Style="{StaticResource TextBoxStyle}"
common:TextBoxBehavior.Validity="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource StringToValidityConverter}}" />
<TextBlock x:Uid="SalesAgent" Grid.Row="2" Grid.Column="2" />
<TextBox Grid.Row="2" Grid.Column="3" Text="{Binding AgentName, Mode=TwoWay}" Style="{StaticResource TextBoxStyle}"
common:TextBoxBehavior.Validity="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource StringToValidityConverter}}" />
<TextBlock x:Uid="MobilePhone" Grid.Row="3" Grid.Column="2" />
<TextBox Grid.Row="3" Grid.Column="3" Text="{Binding MobilePhone, Mode=TwoWay}" Style="{StaticResource TextBoxStyle}"
common:TextBoxBehavior.Validity="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource StringToValidityConverter}}" InputScope="Number" />
<TextBlock x:Uid="EmailAddress" Grid.Row="4" Grid.Column="2" />
<TextBox Grid.Row="4" Grid.Column="3" Text="{Binding EmailAddress, Mode=TwoWay}" Style="{StaticResource TextBoxStyle}"
common:TextBoxBehavior.Validity="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource StringToValidityConverter}}" />
</Grid>
</StackPanel>
and here is how it looks
Edit:
seems that i can detect the keyboard with
Windows.UI.ViewManagement.InputPane.GetForCurrentView().Showing
Windows.UI.ViewManagement.InputPane.GetForCurrentView().Hidding
now i just need to learn how to pull my view up.
As you found, you can use the InputPane's Showing and Hiding events to detect the InputPane's visibility changes. The InputPaneVisibilityEventArgs includes the OccludedRect that it will cover, and you can apply a RenderTransform to your page to Translate it out of the way.
<Page.RenderTransform>
<CompositeTransform x:Name="pageTransform"/>
</Page.RenderTransform>
And a painfully naive implementation:
void Page_Showing(InputPane sender, InputPaneVisibilityEventArgs args)
{
// We probably want something more sophisticated to make sure the
// focus control and any dependencies are in view
pageTransform.TranslateY -= args.OccludedRect.Height;
// Tell the InputPane we already handled things so it doesn't move the page again
args.EnsuredFocusedElementInView = true;
}
void Page_Hiding(InputPane sender, InputPaneVisibilityEventArgs args)
{
pageTransform.TranslateY = 0;
args.EnsuredFocusedElementInView = true;
}
In reality you'll want to do the math to make sure the necessary controls are in view. You can use animations to make the shift more smooth. If you want to get even more creative you can switch to a new visual state which has just the necessary fields for editing in a more friendly layout. In your UserControl case you may want to shift just the control rather than the page.
Also give it a test on a Windows 10 desktop since the soft-keyboard behavior will interact a bit differently with a windowed app.
Related
I have just started learning windows app development. Like what do we call it (A dialog box, Contentdialogbox, Message Dialog)? Thanks in advance.
Okay I tried this since I have my data in a datatemplate inside a contentpresenter(Making a master detail view) now when user clicks on a icon the popup should open and also display the data related to that event selected inside that list.How do I achieve this since the popup dialog control is defined inside a datatemplate so in my cs file it does not recognize the control so I am not able to open the popup dialog.
Xaml Code:
<DataTemplate x:Key="DetailContentTemplate" x:DataType="data:Event">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="50" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="Section2" Grid.Row="0">
<Grid.Background>
<ImageBrush ImageSource="ms-appx:///Assets/8.JPG" Stretch="Fill" />
</Grid.Background>
<TextBlock MaxWidth="250"
Margin="36,62,34,68"
FontFamily="Baskerville Old Face"
FontSize="30"
Foreground="{ThemeResource ToggleButtonPressedForegroundThemeBrush}"
TextWrapping="WrapWholeWords"
d:LayoutOverrides="Width, LeftPosition, RightPosition, TopPosition, BottomPosition">
<Run Text="Gravitas Premier League" />
</TextBlock>
</Grid>
<Grid x:Name="Content"
Grid.Row="1"
Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<RelativePanel>
<SymbolIcon x:Name="symbol"
Margin="0,0,5,0"
HorizontalAlignment="Left"
RelativePanel.AlignLeftWithPanel="True"
Symbol="Globe" />
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Top"
RelativePanel.RightOf="symbol"
Style="{ThemeResource BaseTextBlockStyle}"
Text="Category" />
</RelativePanel>
</StackPanel>
<StackPanel Grid.Column="1" HorizontalAlignment="Center">
<RelativePanel>
<SymbolIcon x:Name="symboll"
Margin="0,0,5,0"
HorizontalAlignment="Left"
RelativePanel.AlignLeftWithPanel="True"
Symbol="People" />
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Top"
RelativePanel.RightOf="symboll"
Style="{ThemeResource BaseTextBlockStyle}"
Text="SubCategory" />
</RelativePanel>
</StackPanel>
<StackPanel Grid.Column="2" HorizontalAlignment="Right">
<RelativePanel>
<SymbolIcon x:Name="symbllol"
Margin="0,0,5,0"
HorizontalAlignment="Left"
RelativePanel.AlignLeftWithPanel="True"
Symbol="Bullets" />
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Top"
RelativePanel.RightOf="symbllol"
Style="{ThemeResource BaseTextBlockStyle}"
Text="Rupee" />
</RelativePanel>
</StackPanel>
</Grid>
<TextBlock Grid.Row="2"
HorizontalAlignment="Center"
Style="{ThemeResource ScenarioDescriptionTextStyle}"
Text="{x:Bind description}"
TextWrapping="WrapWholeWords" />
<Grid Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<SymbolIcon Grid.Column="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Symbol="Phone" />
<SymbolIcon Grid.Column="1"
x:Name="People"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Symbol="People"
IsTapEnabled="True"
Tapped="ShowPopupOffsetClicked"
/>
<SymbolIcon Grid.Column="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Symbol="Mail" />
</Grid>
</Grid>
</DataTemplate>
Now how do I open up the popup when the user taps the symbol with the name People and with necessary bindings of data with a observablecollection say EventList.
There are a lot of ways to implement the UI like in your screenshot. As you've added template10 in your question, I suppose you are using Template10 in your project. And in Template10, we can use ModalDialog to implement this. Here I use a Minimal Template 10 project for example.
Firstly, we may need to change ModalBackground to make the background color looks like what in your screenshot. As the ModalDialog we used here is the root frame created by Bootstrapper automatically, so we need override CreateRootElement in App.xaml.cs like:
public override UIElement CreateRootElement(IActivatedEventArgs e)
{
var b = Current;
var frame = new Windows.UI.Xaml.Controls.Frame();
var nav = b.NavigationServiceFactory(BackButton.Attach, ExistingContent.Include, frame);
//change background
var background = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.Gray);
background.Opacity = 0.2;
return new Template10.Controls.ModalDialog
{
ModalBackground = background,
DisableBackButtonWhenModal = true,
Content = nav.Frame
};
}
Then we can edit Busy.xaml to implement the panel in your screenshot. In Busy.xaml, it's a UserControl used as the ModalContent of ModalDialog. For example,
<UserControl x:Class="T10Minimal.Views.Busy"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:T10Minimal.Views"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="300"
d:DesignWidth="400"
mc:Ignorable="d">
<Grid Width="300"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="White"
CornerRadius="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
...
</Grid.RowDefinitions>
<TextBlock Margin="20,0"
VerticalAlignment="Center"
FontSize="24"
Foreground="Black">
Song Options
</TextBlock>
<Button Margin="12"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Click="CloseClicked"
Foreground="Black"
Style="{StaticResource TextBlockButtonStyle}">
<SymbolIcon Symbol="Clear" />
</Button>
...
</Grid>
</UserControl>
The bindings might like the BusyText in the original control, you can change its type to your binding data's type and also change the SetBusy method. After this, you can call SetBusy method in your ShowPopupOffsetClicked method to open the "popup".
This is just a simple sample, you can refer to it to implement your own. And in the sample, I used the ModalDialog created as the root frame of the application. If you need more than one ModalDialog, you can refer to Search (and Login) Sample on GitHub.
I have a TextBox in my Windows Phone application. It seems only the upper half of the TextBox is clickable to edit the Text. I need the whole TextBox to be clickable.
Why is this?
<Grid x:Name="FolderNameGrid">
<TextBlock Text="{Binding SelectedPostbox.LabelToUpper}"
Style="{StaticResource PageTitleTextBlockStyle}"
Visibility="{Binding IsInSearchMode, Converter={StaticResource BoolToVisibilityConverter}, ConverterParameter=!}" />
<TextBox x:Name="SearchTextBox"
Margin="20,10,20,10"
KeyDown="SearchTextBox_OnKeyDown"
TextChanged="SearchTextBox_OnTextChanged"
GotFocus="SearchTextBox_GotFocus"
PlaceholderText="{Binding TextSource, Converter={StaticResource Language}, ConverterParameter=Module-Messages-Search, FallbackValue=Module-Messages-Search}"
Visibility="{Binding IsInSearchMode, Converter={StaticResource BoolToVisibilityConverter}}" />
</Grid>
Try adding RowDefinitions to your grid. The 2 controls are overlapping now.
e.g.
<Grid x:Name="FolderNameGrid">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="{Binding SelectedPostbox.LabelToUpper}"
Style="{StaticResource PageTitleTextBlockStyle}"
Visibility="{Binding IsInSearchMode, Converter={StaticResource BoolToVisibilityConverter}, ConverterParameter=!}" />
<TextBox Grid.Row="1"
x:Name="SearchTextBox"
Margin="20,10,20,10"
KeyDown="SearchTextBox_OnKeyDown"
TextChanged="SearchTextBox_OnTextChanged"
GotFocus="SearchTextBox_GotFocus"
PlaceholderText="{Binding TextSource, Converter={StaticResource Language}, ConverterParameter=Module-Messages-Search, FallbackValue=Module-Messages-Search}"
Visibility="{Binding IsInSearchMode, Converter={StaticResource BoolToVisibilityConverter}}" />
</Grid>
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 have a ListBox bound to some data, all with an ItemTemplate set, I want to fire PointerPressed Event from this list by pressing anywhere in the ListBox area (cause I just need that for some purpose), but apparently the Selection of the items is preventing that, (I'm using commands) here's my code
<ScrollViewer x:Name="sv"
x:FieldModifier="public"
VerticalScrollBarVisibility="Visible"
VerticalScrollMode="Enabled"
HorizontalScrollBarVisibility="Disabled"
HorizontalScrollMode="Disabled">
<ListBox x:Name="lb"
ItemsSource="{Binding Path=Tweets}">
<WinRTBehaviors:Interaction.Behaviors>
<Win8LnBehaviors:EventToCommandBehavior Event="PointerPressed"
Command="svPointerPressed"
PassEventArgsToCommand="True" />
</WinRTBehaviors:Interaction.Behaviors>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="65">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="3*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>
</Grid.RowDefinitions>
<Image x:Name="Img_ProfilePicture"
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
Stretch="Fill"
Source="{Binding ProfilePictureSource}"
Margin="2">
</Image>
<TextBlock x:Name="Tb_ProfileName"
Grid.Row="0"
Grid.Column="1"
Text="{Binding UserName}"
Margin="5,0,0,0"
FontFamily="Segoe UI Mono"
FontSize="12"
FontWeight="Bold" />
<TextBlock x:Name="Tb_FeedTime"
Grid.Row="0"
Grid.Column="2"
Text="{Binding StatusDateTime}"
Margin="5,0,0,0"
FontFamily="Segoe UI Light"
FontSize="10" />
<TextBlock x:Name="Tb_FeedData"
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"
Text="{Binding Status}"
Margin="10,0,0,0"
FontFamily="Wasco Sans"
TextWrapping="Wrap">
</TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
The code behind :
public RelayCommand<RoutedEventArgs> svPointerPressed
{
get
{
return new RelayCommand<RoutedEventArgs>((routedEventArgs) =>
{
_dispatcher = Window.Current.Dispatcher;
_dispatcher.RunAsync(CoreDispatcherPriority.High, () =>
{
MessageDialog m = new MessageDialog("Tapped !");
m.ShowAsync();
});
});
}
private set{}
}
I even tried to fire the PointerPressed event from one of the components like those TextBoxes but still not firing.
I'd be so thankful , thx
I'd go and just give up at this point. A ScrollViewer filters out pointer events and you will be better off figuring out an alternative design.
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>