I have this strange problem with AppBarButton. I have binded the button to a method in my view model like this:
XAML for MainView
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" BackgroundColor="{StaticResource HsAppBarColor}" Opacity="1">
<shell:ApplicationBar.Buttons>
<cal:AppBarButton IconUri="/icons/appbar.feature.settings.rest.png" Text="ajustes" Message="GoToSettings" />
<cal:AppBarButton IconUri="/icons/appbar.favs.rest.png" Text="favoritos" Message="GoToFavs" />
</shell:ApplicationBar.Buttons>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
C# for MainViewModel
public void GoToSettings() {
navigation.UriFor<SettingsViewModel>().Navigate();
}
It fires GoToSettings code and it navigates to SettingsView page however, SettingsViewModel is never initialized and the constructor is not called. Caliburn code for binding view with view model doesn't work.
I wonder if having a Pivot in MainPage which sets a DataContext for its Sample Data could affect. I tried commenting the data context but it still didn't called SettingsViewModel constructor.
This is the Pivot XAML code
<controls:Pivot toolkit:TurnstileFeatherEffect.FeatheringIndex="0" Margin="0" Title="" DataContext="{Binding Source={StaticResource Stores}}" TitleTemplate="{StaticResource StoresPivotTitleTemplate}" HeaderTemplate="{StaticResource StoresPivotHeaderTemplate}" Style="{StaticResource StoresPivotStyle}" FontFamily="Arial Narrow" Background="{x:Null}">
<controls:PivotItem Header="Restorantes" BorderThickness="0,-20,0,0" Margin="12,0" Background="{x:Null}">
<Grid>
<ListBox toolkit:TurnstileFeatherEffect.FeatheringIndex="2" cal:Message.Attach="[Event SelectionChanged] = [Action Restaurants_SelectionChanged];" ItemTemplate="{StaticResource StoresListItemTemplate}" ItemsSource="{Binding Collection}" Margin="0" ItemContainerStyle="{StaticResource StoresListContainerStyle}" Background="{x:Null}"/>
</Grid>
</controls:PivotItem>
<controls:PivotItem Header="Tiendas" Margin="12,0">
<Grid>
<ListBox toolkit:TurnstileFeatherEffect.FeatheringIndex="2" cal:Message.Attach="[Event SelectionChanged] = [Action Stores_SelectionChanged];" ItemTemplate="{StaticResource StoresListItemTemplate}" ItemsSource="{Binding Collection}" Margin="0" ItemContainerStyle="{StaticResource StoresListContainerStyle}" FontFamily="Segoe WP"/>
</Grid>
</controls:PivotItem>
</controls:Pivot>
Stores_SelectionChanged method also navigates to a page but this time the binding works and the viewmodel constructor is fired.
Any idea why it doesn't work in the AppBarButton but it does work in the Pivot attached action when they use the same view model behind?
EDIT: added full xaml for view
<phone:PhoneApplicationPage
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
xmlns:cal="clr-namespace:Caliburn.Micro;assembly=Caliburn.Micro"
xmlns:controlsPrimitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
x:Class="Happyshop.Views.StoresView"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
shell:SystemTray.IsVisible="True" Foreground="{x:Null}">
<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileFeatherTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:TurnstileFeatherTransition Mode="ForwardIn" BeginTime="0:0:0.7"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:TurnstileFeatherTransition Mode="BackwardOut"/>
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:TurnstileFeatherTransition Mode="ForwardOut" BeginTime="0:0:0.2"/>
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>
<phone:PhoneApplicationPage.Resources>
<Style x:Key="StoresPivotStyle" TargetType="controls:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.Background>
<SolidColorBrush Color="{StaticResource HsDarkBlue}"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="65"/>
<RowDefinition Height="96"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid CacheMode="BitmapCache" Grid.RowSpan="3"/>
<Border Margin="-12,-5,0,0" BorderThickness="0,0,0,0">
<ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Margin="12,5,0,0"/>
</Border>
<Border Grid.Row="1" toolkit:TurnstileFeatherEffect.FeatheringIndex="1" >
<controlsPrimitives:PivotHeadersControl x:Name="HeadersListElement" Background="Black"/>
</Border>
<ItemsPresenter x:Name="PivotItemPresenter" Margin="0" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
<phone:PhoneApplicationPage.Background>
<SolidColorBrush Color="{StaticResource HsDarkBlue}"/>
</phone:PhoneApplicationPage.Background>
<phone:PhoneApplicationPage.FontFamily>
<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
</phone:PhoneApplicationPage.FontFamily>
<phone:PhoneApplicationPage.FontSize>
<StaticResource ResourceKey="PhoneFontSizeNormal"/>
</phone:PhoneApplicationPage.FontSize>
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" BackgroundColor="{StaticResource HsAppBarColor}" Opacity="1">
<shell:ApplicationBar.Buttons>
<cal:AppBarButton IconUri="/icons/appbar.feature.settings.rest.png" Text="ajustes" Message="GoToSettings" />
<cal:AppBarButton IconUri="/icons/appbar.favs.rest.png" Text="favoritos" Message="GoToFavs" />
</shell:ApplicationBar.Buttons>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
<controls:Pivot toolkit:TurnstileFeatherEffect.FeatheringIndex="0" Margin="0" Title="" DataContext="{Binding Source={StaticResource Stores}}" TitleTemplate="{StaticResource StoresPivotTitleTemplate}" HeaderTemplate="{StaticResource StoresPivotHeaderTemplate}" Style="{StaticResource StoresPivotStyle}" FontFamily="Arial Narrow" Background="{x:Null}">
<controls:PivotItem Header="Restorantes" BorderThickness="0,-20,0,0" Margin="12,0" Background="{x:Null}">
<Grid>
<ListBox toolkit:TurnstileFeatherEffect.FeatheringIndex="2" cal:Message.Attach="[Event SelectionChanged] = [Action Restaurants_SelectionChanged];" ItemTemplate="{StaticResource StoresListItemTemplate}" ItemsSource="{Binding Collection}" Margin="0" ItemContainerStyle="{StaticResource StoresListContainerStyle}" Background="{x:Null}"/>
</Grid>
</controls:PivotItem>
<controls:PivotItem Header="Tiendas" Margin="12,0">
<Grid>
<ListBox toolkit:TurnstileFeatherEffect.FeatheringIndex="2" cal:Message.Attach="[Event SelectionChanged] = [Action Stores_SelectionChanged];" ItemTemplate="{StaticResource StoresListItemTemplate}" ItemsSource="{Binding Collection}" Margin="0" ItemContainerStyle="{StaticResource StoresListContainerStyle}" FontFamily="Segoe WP"/>
</Grid>
</controls:PivotItem>
</controls:Pivot>
UPDATE
It was a stupid error. When you use generate class with intellisense the class created is not marked as public. Classes are by default marked as internal so Caliburn project could not access the ViewModel and hence why it would not bind it.
Resolved. The problem was that classes created via code generation of Intellisense in Visual Studio are not marked as public.
Classes must be marked public in order to Caliburn to be able to access and instantiate one. Otherwise they use the default visibility which is internal
Related
I'm creating an application for educational purposes. How can i use multiple User controls in my "MainWindow.xaml"?
I want to use User controls on my MainWindow so that I wont need multiple windows. So after you press next on the sign up layout,
it should take you to the thank you screen which is also another UserControl class. Although in the same Window.
I've read as many different "solutions" as I could, without any real luck..
Here's the code I have atm.
Main Window.xaml
<Window x:Class="WpfApp1.MainWindow"
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="700" Width="700"
WindowStartupLocation="CenterScreen">
<Grid>
<!--Background image-->
<Grid.Background >
<ImageBrush ImageSource="login-page-background-3.jpg"/>
</Grid.Background>
<!--Main content scroll-->
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<local:SignUpControl>
</local:SignUpControl>
</ScrollViewer>
</Grid>
MainWindow.xaml.cs has no code...
SignUpControl.Xaml
<UserControl x:Class="WpfApp1.SignUpControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<StackPanel
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextBlock.TextAlignment="Center">
<!--Login main content white box-->
<Border Background="WhiteSmoke"
Opacity="0.4"
CornerRadius="30"
Padding="15 50 15 15"
Width="350"
Margin="50 50 50 0">
<StackPanel>
<!--Sign Up header-->
<TextBlock FontSize="20"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Height="auto"
FontFamily="Goudy Stout" >Sign Up</TextBlock>
<!--Sign up subtext-->
<TextBlock FontSize="14"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Height="auto"
FontFamily="Ravie" >It's about to get fun!</TextBlock>
<!--Inner grid for Username & Password-->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!--Textbox for username-->
<TextBox Grid.Row="0" BorderThickness="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontFamily="Arial" FontWeight="Bold" FontSize="14" x:Name="UsernameBox" Margin="5"/>
<TextBlock IsHitTestVisible="False" Text="Username" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10,0,0,0" FontFamily="Arial" FontWeight="Bold" FontSize="14" Foreground="Black">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Text, ElementName=UsernameBox}" Value="">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<!--PasswordBox-->
<TextBox Grid.Row="1" BorderThickness="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontFamily="Arial" FontWeight="Bold" FontSize="14" x:Name="passwordBox" Margin="5"/>
<TextBlock Grid.Row="1" IsHitTestVisible="False" Text="password" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10,0,0,0" FontFamily="Arial" FontWeight="Bold" FontSize="14" Foreground="Black">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Text, ElementName=passwordBox}" Value="">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
<!--Next Button-->
<Button Content="Next"
HorizontalAlignment="Center"
FontWeight="Bold"
FontSize="14"
BorderThickness="0"
FontFamily="Goudy Stout"
Background="Transparent"
Padding="20 10"
Margin="0 10"
x:Name="NextButton"
Click="NextButton_Click"/>
</StackPanel>
</Border>
<!--Border for PreRegistered account-->
<Border Background="WhiteSmoke"
Opacity="0.4"
CornerRadius="50"
Padding="0"
Width="400"
Height="auto"
Margin="0 12.5 0 0">
<!--Already registered button-->
<Button Content="I already have an account"
HorizontalAlignment="Center"
Opacity="0.8"
FontSize="13"
BorderThickness="0"
FontFamily="Goudy Stout"
Background="Transparent"
Foreground="Black"
x:Name="alreadyRegBtn"
Padding="0 10"
Margin="0 5 0 5"/>
</Border>
</StackPanel>
How do I go about doing this solution where I can change between user controls on the same window, Ofcourse after the thank you screen I will be using the same logic to go to "Sign In!" an so on...
When i'm not using Prism or Dependency Injection then I normally use the View Model first approach.
In this scenario we have a property on our Windows ViewModel that is a class that the other UserControls ViewModels inherit from, normally just use a ViewModelBase class that has the implimentation of INotifyPropertyChanged:
private ViewModelBase currentViewModel;
public ViewModelBase CurrentViewModel
{
get { return currentViewModel; }
set { currentViewModel = value; NotifyPropertyChanged(); }
}
Now inside of your MainWindow like #Tomtom said you have a ContentControl bound to that property. This means that using DataTemplates You can have a different View display depending on which ViewModel type is currently on that property.
<Window.Resources>
<DataTemplate DataType="{x:Type viewmodels:ViewModel1}">
<views:View1/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewmodels:ViewModel2}">
<views:View2/>
</DataTemplate>
</Window.Resources>
<ContentControl Content="{Binding CurrentViewModel}"/>
With this in place all you need to do is have some logic that changes the ViewModel on the MainWindow ViewModel and the View will update to display the correct View for that ViewModel.
Edit: One thing to note is there are lots of different ways people use to achieve what you want, none of them are really right or wrong but they all suit different peoples needs and coding styles.
I've answered a similar question a while ago.
See this post
You can create a ContentControl in your Window and switch the bound UserControl where the user clicks or something else
In my MainWindow I have defined a region, that I am injecting my UserControls into (using Prism, but it doesn't matter). My control should be resizeable (it works perfectly) and moveable. To drag and move my user control I am using Blend's MouseDragElementBehavior. Problem is, that although my control moves, when I resize MainWindow it gets cut :
When I am not moving my control everything works, as expected, when I resize MainWindow scrollBar shows up:
But when I move my user control to the bottom of the MainWindow, the ScrollBar is not showing up like it does't know, that my control has been moved:
Important: The ScrollBar is showing up in both scenarios at exact same time, though when I move my user control down it should appear much more sonner, when I reach the bounds of the user control. On the picture below you can see the moment when the ScrollBar is showing up after I draged my control down. It appeared too late, control gets cut.
It's hard to explain, let me know if you understood me correctly.
My code:
<Window x:Class="ViewInjection.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:prism="http://prismlibrary.com/"
Title="MainWindow">
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*" ScrollViewer.CanContentScroll="True" ScrollViewer.IsDeferredScrollingEnabled="True"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Click="Button_Click">Add View</Button>
<ItemsControl Grid.Row="1" prism:RegionManager.RegionName="ContentRegion" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
</ScrollViewer>
</Window>
UserControl:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:ViewInjection.Views"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="ViewInjection.Views.ViewA"
mc:Ignorable="d">
<Border x:Name="Border" HorizontalAlignment="Center" VerticalAlignment="Center" BorderBrush="#FF626161" BorderThickness="2" CornerRadius="3" MinHeight="200" MinWidth="200">
<i:Interaction.Behaviors>
<ei:MouseDragElementBehavior ConstrainToParentBounds="true"/>
</i:Interaction.Behaviors>
<DockPanel x:Name="sizableContent" Background="LightGray" Focusable="False" LastChildFill="True" MinHeight="300" MinWidth="300">
<DockPanel DockPanel.Dock="Bottom" >
<!--Make user control resizeable-->
<Thumb DockPanel.Dock="Right" VerticalAlignment="Bottom" Margin="0,0,1,1"
DragDelta="OnResizeThumbDragDelta"
DragStarted="OnResizeThumbDragStarted"
DragCompleted="OnResizeThumbDragCompleted">
<Thumb.Style>
<Style TargetType="{x:Type Thumb}">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="resizeVisual" DockPanel.Dock="Right" VerticalAlignment="Bottom" >
<Line X1="6" Y1="18" X2="18" Y2="6" Stroke="DarkGray" StrokeThickness="1.5"/>
<Line X1="10" Y1="18" X2="18" Y2="10" Stroke="DarkGray" StrokeThickness="1.5"/>
<Line X1="14" Y1="18" X2="18" Y2="14" Stroke="DarkGray" StrokeThickness="1.5"/>
<Grid.Style>
<Style TargetType="{x:Type Grid}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="SizeNWSE"/>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Style>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</Thumb.Style>
</Thumb>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Button Margin="12" Width="75" TabIndex="1" Content="Ok"/>
</StackPanel>
</DockPanel>
<StackPanel HorizontalAlignment="Center" Margin="16,16,16,4">
<TextBlock Text="My UserControl"/>
</StackPanel>
</DockPanel>
</Border>
</UserControl>
P.S.
I am using items control to have multiple controls within that region. I am using Grid as a template, because I want controls to overlap each other.
My requirement is to group datagrid rows based on a condition and display the grouped rows in alternating colours along with an edit button for each group. The problem here is my datagrid Column headers are not aligning with the Data grid data rows .
Current Grid
I have already gone through a lot of posts with not much help I have tried this post as well WPF DataGrid GroupStyle . This example has group style for a grid but I tried to do the same for a datagrid.
Current XAML
<Window x:Class="TimeSeriesDataGrid.View.TimeSeriesView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" Width="Auto" Height="Auto"
xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase"
xmlns:viewmodel="clr-namespace:TimeSeriesDataGrid.ViewModel"
xmlns:converter="clr-namespace:TimeSeriesDataGrid.Converters"
xmlns:local="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WPF45"
xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WPF45"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" Title="{Binding WindowTitle}" ResizeMode="CanMinimize">
<Window.DataContext>
<viewmodel:TimeSeriesViewModel />
</Window.DataContext>
<Window.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="#FFEEEFFF" Offset="0.836"/>
</LinearGradientBrush>
</Window.Background>
<Window.Resources>
<converter:RowColorConverter x:Key="RowColorConverter" />
<CollectionViewSource x:Key="TimeSeriesCollectionViewSource" CollectionViewType="ListCollectionView" Source="{Binding GetTimeSeries}" >
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="DocumentId"/>
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
</Window.Resources>
<Grid Margin="0,0,0,-3">
<Grid.RowDefinitions>
<RowDefinition Height="8*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<DataGrid
DataContext="{StaticResource TimeSeriesCollectionViewSource}"
SelectedItem="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.SelectedTimeSeries}"
ItemsSource="{Binding}"
CanUserReorderColumns="False"
SnapsToDevicePixels="True"
Grid.Column="0"
Grid.Row="0"
x:Name="dg_TimeSeriesEdit"
AutoGenerateColumns="False"
CanUserResizeColumns="False"
ScrollViewer.IsDeferredScrollingEnabled="True"
VirtualizingStackPanel.IsVirtualizing="true"
HeadersVisibility="Column"
HorizontalContentAlignment="Center"
CanUserAddRows="False"
CanUserDeleteRows="False"
MaxHeight="800"
MaxWidth="2550"
HorizontalGridLinesBrush="#FFC92222"
VerticalGridLinesBrush="#FFC92222"
Width="Auto"
Height="Auto" >
<DataGrid.GroupStyle>
<GroupStyle AlternationCount="2" >
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<StackPanel Orientation="Vertical" VerticalAlignment="Center" Background="Transparent">
<Button Grid.Column="0" BorderThickness="0" Content="Edit" Margin="0,0,0,5" Height="Auto" Width="50" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<local:EventToCommand Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.EditGroupCmd}" CommandParameter="{Binding Path=Items}" PassEventArgsToCommand="True" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</StackPanel>
<ItemsPresenter />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</DataGrid.GroupStyle>
<DataGrid.RowStyle>
<Style>
<Setter Property="DataGridRow.Background"
Value="{Binding RelativeSource={RelativeSource AncestorType=GroupItem},
Path=(ItemsControl.AlternationIndex), Converter={StaticResource RowColorConverter}}"/>
</Style>
</DataGrid.RowStyle>
<DataGrid.Columns >
.
.
</DataGrid.Columns>
</DataGrid>
</Grid>
</Grid>
</Window>
Any Help would be appreciated.
I managed to allign the header with data after TranslateTransform on datagridcolumn header
<DataGrid.ColumnHeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform X="50"></TranslateTransform>
</Setter.Value>
</Setter>
</Style>
</DataGrid.ColumnHeaderStyle>
<DataGrid.RowValidationErrorTemplate>
I've been trying to understand Scrollviewers, and thought I'd take a look at Microsoft's template for a Grid App for 8.1, whose content extends off the screen. What's odd is that there doesn't seem to even be a Scrollviewer in the XAML page. Can anyone tell me what is enabling the scrolling?
<Page
x:Name="pageRoot"
x:Class="GridApp.GroupedItemsPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:GridApp"
xmlns:data="using:GridApp.Data"
xmlns:common="using:GridApp.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<x:String x:Key="ChevronGlyph"></x:String>
<!--
Collection of grouped items displayed by this page, bound to a subset
of the complete item list because items in groups cannot be virtualized
-->
<CollectionViewSource
x:Name="groupedItemsViewSource"
Source="{Binding Groups}"
IsSourceGrouped="true"
ItemsPath="Items"
d:Source="{Binding Groups, Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}"/>
</Page.Resources>
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Horizontal scrolling grid -->
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Title}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Subtitle}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid GroupPadding="0,0,70,0"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="0,0,0,2">
<Button Foreground="{ThemeResource ApplicationHeaderForegroundThemeBrush}"
AutomationProperties.Name="Group Title"
Click="Header_Click"
Style="{StaticResource TextBlockButtonStyle}" >
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" Margin="0,-11,10,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-11,0,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
</Grid>
</Grid>
If we go check out the default GridView template and look for the ItemsPresenter we see it's embedded in a ScrollViewer at the template level. Since now we know there's one there, if we look up towards the top in the Setter declarations we've got some Properties available to us to interact with that ScrollViewer from the GridView itself by seeing;
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled" />
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
<Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True" />
So if we wanted that GridView to not scroll anymore we could tell it not to like;
<GridView ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>
since it's set to "Auto" at the template level by default.
That's the thing about templates, sometimes it just takes digging one level deeper. Hope this helps, cheers.
I need to create 10 or more text boxes that have the same event and logic,
instead of copy and paste it there is option to create it once and than inherit from it?
For example name1 will inherit from name
<TextBox x:Name="Name" AcceptsReturn="True" AllowDrop="True"
PreviewDragEnter="DropText_PreviewDragEnter"
PreviewDrop="DropText_PreviewDrop"
SelectionChanged="listbox_SelectionChanged"
HorizontalAlignment="Left" Height="25" TextWrapping="Wrap"
VerticalAlignment="Top" Width="150" Grid.Column="4" Margin="0,50,0,0"
Grid.Row="2" />
<TextBox x:Name="name1" AcceptsReturn="True" AllowDrop="True"
PreviewDragEnter="DropText_PreviewDragEnter"
PreviewDrop="DropText_PreviewDrop"
SelectionChanged="listbox_SelectionChanged"
HorizontalAlignment="Left" Height="25" TextWrapping="Wrap"
VerticalAlignment="Top" Width="150" Grid.Column="4" Margin="0,50,0,0"
Grid.Row="2" />
you can create a control template of your textbox as a resource. Mark the resource as x:Shared=False
<Grid.Resources>
<ControlTemplate TargetType="TextBox" x:Key="TxtBoxTemplate" x:Shared="False">
<Grid.Resources>
use this template on other instances of textbox.
<TextBox x:Name="name1" Grid.Row="0" Template="{StaticResource TxtBoxTemplate}"/>
<TextBox x:Name="name2" Grid.Row="1" Template="{StaticResource TxtBoxTemplate}"/>
<TextBox x:Name="name3" Grid.Row="2" Template="{StaticResource TxtBoxTemplate}"/>
Complete code as follows.
<Grid>
<Grid.Resources>
<ControlTemplate TargetType="TextBox" x:Key="TxtBoxTemplate" x:Shared="False">
<TextBox x:Name="Name"
AcceptsReturn="True"
AllowDrop="True"
PreviewDragEnter="DropText_PreviewDragEnter"
PreviewDrop="DropText_PreviewDrop"
SelectionChanged="listbox_SelectionChanged"
HorizontalAlignment="Left" Height="25" TextWrapping="Wrap"
VerticalAlignment="Top" Width="150" Grid.Column="4" Margin="0,50,0,0" Grid.Row="2"
TextChanged="Name_OnTextChanged"
/>
</ControlTemplate>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBox x:Name="name1" Grid.Row="0" Template="{StaticResource TxtBoxTemplate}"/>
<TextBox x:Name="name2" Grid.Row="1" Template="{StaticResource TxtBoxTemplate}"/>
<TextBox x:Name="name3" Grid.Row="2" Template="{StaticResource TxtBoxTemplate}"/>
</Grid>
As mentioned by HighCore in comment, ItemsControl might be of your help here.
Create an ItemsControl and set ItemTemplate to have TextBox inside it. (Create ObjectDataProvider to return number of textBoxes you need)
<Grid>
<Grid.Resources>
<ObjectDataProvider x:Key="EnumerableRange"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:linq="clr-namespace:System.Linq;assembly=System.Core"
ObjectType="{x:Type linq:Enumerable}" MethodName="Range">
<ObjectDataProvider.MethodParameters>
<sys:Int32>1</sys:Int32>
<sys:Int32>15</sys:Int32>
</ObjectDataProvider.MethodParameters>
</ObjectDataProvider>
</Grid.Resources>
<ItemsControl ItemsSource="{Binding Source={StaticResource EnumerableRange}}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox x:Name="Name"
AcceptsReturn="True"
AllowDrop="True"
PreviewDragEnter="DropText_PreviewDragEnter"
PreviewDrop="DropText_PreviewDrop"
SelectionChanged="listbox_SelectionChanged"
HorizontalAlignment="Left" Height="25"
TextWrapping="Wrap"
VerticalAlignment="Top" Width="150" Grid.Column="4"
Margin="0,50,0,0" Grid.Row="2"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
UPDATE
You can use Style then to declare common properties over there and events and simply have multiple instances of TextBox referring to that style.
<Grid>
<Grid.Resources>
<Style TargetType="TextBox">
<Setter Property="AcceptsReturn" Value="True"/>
<Setter Property="AllowDrop" Value="True"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Width" Value="150"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Margin" Value="0,50,0,0"/>
<EventSetter Event="PreviewDragEnter"
Handler="DropText_PreviewDragEnter"/>
<EventSetter Event="PreviewDrop"
Handler="DropText_PreviewDrop"/>
<EventSetter Event="SelectionChanged"
Handler="listbox_SelectionChanged"/>
</Style>
</Grid.Resources>
<TextBox x:Name="Name"/>
<TextBox x:Name="Name1"/>
......
<TextBox x:Name="Name15"/>
</Grid>
Note i haven't set x:Key on Style so it will get applied by default to all TextBoxes in your Grid. If you don't want that set x:Key and use that for all TextBoxes.
# first method : create a class with name customTextbox.cs and write down properties and events for textbox
public class customTextbox:TextBox
{
public customTextbox():base()
{
this.AcceptsReturn = true;
this.AllowDrop = true;
this.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
//set your remaining propreties
this.PreviewDragEnter +=customTextbox_PreviewDragEnter;
this.PreviewDragLeave +=customTextbox_PreviewDragLeave;
this.SelectionChanged += customTextbox_SelectionChanged;
}
void customTextbox_SelectionChanged(object sender, System.Windows.RoutedEventArgs e)
{
//code here
}
private void customTextbox_PreviewDragLeave(object sender, System.Windows.DragEventArgs e)
{
//code here
}
private void customTextbox_PreviewDragEnter(object sender, System.Windows.DragEventArgs e)
{
//code here
}
}
and in xaml
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525"
xmlns:hp="clr-namespace:WpfApplication3">
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<hp:customTextbox Height="100" Width="100" Grid.Row="0"></hp:customTextbox>
<hp:customTextbox Grid.Row="1" ></hp:customTextbox>
<hp:customTextbox Grid.Row="2" ></hp:customTextbox>
</Grid>
#second method:create a usecontrol like this(http://prntscr.com/2mren4) and replace usercontrol with textbox like below
<TextBox x:Class="WpfApplication3.CustomTB"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<!--set all properties and event you required inside textbox-->
and in .cs file use textbox instead of usercontrol like below
public partial class CustomTB : TextBox
{
public CustomTB()
{
InitializeComponent();
}
}
and in another window add
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525"
xmlns:hp="clr-namespace:WpfApplication3">
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<hp:CustomTB Grid.Row="0"/>
</Grid>