|
|
<common:LayoutAwarePage
x:Class="Clearer.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Clearer"
xmlns:common="using:GridAppTest.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:conv="using:ClearStyle.Converters"
mc:Ignorable="d">
<common:LayoutAwarePage.Resources>
<conv:ColorToBrushConverter x:Key="ColorToBrushConverter"/>
<conv:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter"/>
<DataTemplate x:Key="toDoItemTemplate">
<Border Height="55" x:Name="todoItem">
<Grid Margin="2"
Background="{Binding Path=Color, Converter={StaticResource ColorToBrushConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<local:ThumbControl Loaded="Border_Loaded"
Width="40" Height="55" ManipulationMode="All" />
<local:ThumbControl Loaded="Border_Loaded"
Width="40" Height="55" ManipulationMode="All"
Grid.Column="2"/>
<TextBlock Text="{Binding Text, Mode=TwoWay}"
FontSize="25" TextTrimming="WordEllipsis"
Foreground="White"
VerticalAlignment="Center"
Grid.Column="1"/>
<Line Visibility="{Binding Path=Completed, Converter={StaticResource BoolToVisibilityConverter}}"
X1="0" Y1="0" X2="1" Y2="0"
Stretch="UniformToFill"
Stroke="White" StrokeThickness="2"
Margin="8,5,8,0"
Grid.Column="1"/>
</Grid>
</Border>
</DataTemplate>
<DataTemplate x:Key="toDoItemTemplateSmall">
<Border Height="40" Margin="0"
x:Name="todoItem">
<Grid Background="{Binding Path=Color, Converter={StaticResource ColorToBrushConverter}}"
Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<local:ThumbControl Loaded="BorderSmallTemplate_Loaded"
Width="20" Height="40" ManipulationMode="All" />
<local:ThumbControl Loaded="BorderSmallTemplate_Loaded"
Width="20" Height="40" ManipulationMode="All"
Grid.Column="2"/>
<TextBlock Text="{Binding Text, Mode=TwoWay}"
FontSize="20" TextTrimming="WordEllipsis"
Foreground="White"
VerticalAlignment="Center"
Grid.Column="1"/>
<Line Visibility="{Binding Path=Completed, Converter={StaticResource BoolToVisibilityConverter}}"
X1="0" Y1="0" X2="1" Y2="0"
Stretch="UniformToFill"
Stroke="White" StrokeThickness="2"
Margin="3,0,3,0"
Grid.Column="1"/>
</Grid>
</Border>
</DataTemplate>
<ItemsPanelTemplate x:Key="toDoListItemsPanel">
<StackPanel Orientation="Vertical">
<StackPanel.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
<AddDeleteThemeTransition/>
</TransitionCollection>
</StackPanel.ChildrenTransitions>
</StackPanel>
</ItemsPanelTemplate>
<TransitionCollection x:Key="entranceTransition">
<EntranceThemeTransition/>
</TransitionCollection>
<ControlTemplate TargetType="ListBoxItem" x:Key="listBoxItemTemplate">
<Border x:Name="LayoutRoot">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected">
<Storyboard>
<DoubleAnimation Duration="0" To="0"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="selectedDot" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To="1"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="selectedDot" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<DoubleAnimation Duration="0" To="1"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="selectedDot" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<!-- the 'dot' that indicates selection -->
<Ellipse Width="15" Height="15"
VerticalAlignment="Center" HorizontalAlignment="Left"
Fill="White" x:Name="selectedDot"
Opacity="0"/>
<!-- the content for this item -->
<ContentControl x:Name="ContentContainer"
ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"
HorizontalContentAlignment="Stretch"
Foreground="#FF1BA1E2" Margin="20 0 0 0"/>
</Grid>
</Border>
</ControlTemplate>
<Style TargetType="ListBoxItem" x:Key="itemContainerStyle">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template" Value="{StaticResource listBoxItemTemplate}"/>
</Style>
<ControlTemplate TargetType="ItemsControl" x:Key="listBoxControlTemplate">
<ScrollViewer x:Name="scrollViewer">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</common:LayoutAwarePage.Resources>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
ChildrenTransitions="{StaticResource entranceTransition}"
x:Name="ContentRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="background.jpg"
Stretch="UniformToFill" Opacity="0.2"
x:Name="leftHandTitle"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Grid.ColumnSpan="2"/>
<Grid Margin="20"
x:Name="itemDetailGrid"
DataContext="{Binding SelectedItem}"
ChildrenTransitions="{StaticResource entranceTransition}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Source="Assets/StoreLogo.png"
Width="50" Height="50"
HorizontalAlignment="Left"/>
<TextBlock Text="Clearer" FontSize="55"
Margin="60 20 0 20"
VerticalAlignment="Center"/>
<TextBox Text="{Binding Text, Mode=TwoWay}"
Grid.Row="1" FontSize="25"
TextChanged="ToDoItem_TextChanged"
x:Name="toDoItemTitle"
Height="50"/>
<Border Grid.Row="2" Margin="0 20 0 0"
BorderBrush="#444" BorderThickness="3"
Background="#55000000">
<TextBox Text="{Binding Description, Mode=TwoWay}"
TextWrapping="Wrap" FontSize="25" Foreground="White"
AcceptsReturn="True"
Background="Transparent" BorderThickness="0"
VerticalAlignment="Stretch"
Margin="10"/>
</Border>
<Button Content="Add new item"
Click="ButtonAddNew_Click"
FontSize="25"
Grid.Row="3"/>
</Grid>
<ListBox ItemsSource="{Binding Items}"
x:Name="todoList"
Margin="30,0,30,0" Grid.Column="1"
ItemTemplate="{StaticResource toDoItemTemplate}"
ItemsPanel="{StaticResource toDoListItemsPanel}"
Template="{StaticResource listBoxControlTemplate}"
ItemContainerStyle="{StaticResource itemContainerStyle}"
SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}">
</ListBox>
<ItemsControl ItemsSource="{Binding Items}"
x:Name="todoListCompact"
Visibility="Collapsed"
Margin="20,0,20,0" Grid.ColumnSpan="2"
ItemTemplate="{StaticResource toDoItemTemplateSmall}"
ItemsPanel="{StaticResource toDoListItemsPanel}"
Template="{StaticResource listBoxControlTemplate}">
</ItemsControl>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreenLandscape"/>
<VisualState x:Name="Filled"/>
<VisualState x:Name="FullScreenPortrait"/>
<VisualState x:Name="Snapped">
<Storyboard>
<!-- hide the item details view -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetailGrid" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<!-- hide the application title -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="leftHandTitle" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<!-- hide the to-do list -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="todoList" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<!-- show a more compact version of the list -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="todoListCompact" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</common:LayoutAwarePage>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
Submit an article or tip