How to keep rotating image or canvas - winrt-xaml

This code only fire once to rotate the canvas. Why it does not rotate when user press the rotate button second time?
--update with button
<AppBarButton x:Name="CamRotate90" Margin="0,2,2,0" Width="90" Height="90" FontSize="16" Label="Rotate-Right" Icon="Rotate" Click="CamRotate90_Click">
</AppBarButton>
<Canvas x:Name="canvas" Margin="231,28,321,111" Width="700" Height="525" Grid.Row="0" Grid.RowSpan="3" Grid.Column="0">
<Image Canvas.Top="0" Canvas.Left="0" Margin="0" x:Name="preview" Width="700" Height="525" Stretch="UniformToFill" >
</Image>
</Canvas>
private void CamRotate90_Click(object sender, RoutedEventArgs e)
{
CompositeTransform ct = new CompositeTransform();
ct.CenterX = canvas.ActualWidth / 2;
ct.CenterY = canvas.ActualHeight/2;
ct.Rotation = 90;
canvas.RenderTransform = ct;
}

Instead of replacing the RenderTransform each time create the RenderTransform once and reuse it:
Xaml:
<Canvas x:Name="canvas" Margin="231,28,321,111" Width="700" Height="525" Grid.Row="0" Grid.RowSpan="3" Grid.Column="0">
<Canvas.RenderTransform>
<CompositeTransform />
</Canvas.RenderTransform>
<Image Canvas.Top="0" Canvas.Left="0" Margin="0" x:Name="preview" Width="700" Height="525" Stretch="UniformToFill" >
</Image>
</Canvas>
Code:
private void CamRotate90_Click(object sender, RoutedEventArgs e)
{
CompositeTransform ct = canvas.RenderTransform as CompositeTransform;
if (ct != null) // Just to make sure
{
ct.CenterX = canvas.ActualWidth / 2;
ct.CenterY = canvas.ActualHeight / 2;
ct.Rotation += 90;
}
}

Related

Xamarin Form - How To checked the checkbox on another check box checked in UWP

My application displays the fetures permissions on DataGrid from database. For realizing this I am using the MyToolkit.Controls.DataGrid. Now i want output for if user checked the admin or update/delete/create check box then View and list check box checked vice versa same for the and also i want to set checkbox checked value from database.
thanks in advance.
Image
if user checked the create/update/delete then same row list and view should be checkbox checked
if user checked the view check box then selected row column list should be checked
Datagrid xaml
<Toolkit:DataGrid.Columns >
<!--Feature Column-->
<Toolkit:DataGridTemplatedColumn CanSort="False" >
<Toolkit:DataGridTemplatedColumn.Header>
<TextBlock FontSize="16" Foreground="#000000" Width="280" Text="Feature" />
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate >
<TextBlock FontSize="14" Padding="6 0 0 0" Foreground="#333333" Width="280" Text="{Binding featureName}"/>
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
<!--Create-->
<Toolkit:DataGridTemplatedColumn Width="180" CanSort="False" >
<Toolkit:DataGridTemplatedColumn.Header>
<Border BorderBrush="Black" BorderThickness="1 0 0 0" >
<TextBlock FontSize="16" Padding="0" Foreground="#000000" Text=" Create" />
</Border>
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate >
<CheckBox Margin="30,0,0,0" Style="{StaticResource CheckBoxStyle1}" x:Name="CBCreate" DataContext="create" Tag ="{Binding featureId}" VerticalAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Left" HorizontalContentAlignment="Left" Checked="CBCreate_Checked" />
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
<!--Update-->
<Toolkit:DataGridTemplatedColumn Width="180" CanSort="False" >
<Toolkit:DataGridTemplatedColumn.Header>
<Border BorderBrush="Black" BorderThickness="1 0 0 0" >
<TextBlock FontSize="16" Foreground="#000000" Text=" Update" />
</Border>
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate >
<CheckBox Margin="30 0 0 0" Style="{StaticResource CheckBoxStyle1}" IsChecked="{Binding Update}" x:Name="CBUpdate" DataContext="update" Tag ="{Binding featureId}" VerticalAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Left" HorizontalContentAlignment="Left" />
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
<!--Delete-->
<Toolkit:DataGridTemplatedColumn Width="180" CanSort="False" >
<Toolkit:DataGridTemplatedColumn.Header>
<Border BorderBrush="Black" BorderThickness="1 0 0 0" >
<TextBlock FontSize="16" Foreground="#000000" Text=" Delete" />
</Border>
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate >
<CheckBox Margin="30,0,0,0" Style="{StaticResource CheckBoxStyle1}" IsChecked="{Binding Delete}" x:Name="CBDelete" DataContext="delete" Tag ="{Binding featureId}" VerticalAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Left" HorizontalContentAlignment="Left" />
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
<!--View-->
<Toolkit:DataGridTemplatedColumn Width="180" CanSort="False" >
<Toolkit:DataGridTemplatedColumn.Header>
<Border BorderBrush="Black" BorderThickness="1 0 0 0" >
<TextBlock FontSize="16" Foreground="#000000" Text=" View" />
</Border>
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate >
<CheckBox Checked="CBView_Checked" Unchecked="CBView_Unchecked" IsChecked="{Binding View}" Indeterminate="CBView_Indeterminate" Margin="30,0,0,0" Style="{StaticResource CheckBoxStyle1}" x:Name="view" DataContext="{Binding featureName}" Tag ="view" AccessKey="{Binding index}" VerticalAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Left" HorizontalContentAlignment="Left" />
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
<!--List-->
<Toolkit:DataGridTemplatedColumn Width="180" CanSort="False" x:Name="CLMList" >
<Toolkit:DataGridTemplatedColumn.Header>
<Border BorderBrush="Black" BorderThickness="1 0 0 0" >
<TextBlock FontSize="16" Foreground="#000000" Text=" List" />
</Border>
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate >
<CheckBox x:FieldModifier="public" IsChecked="{Binding List}" Margin="30,0,0,0" Style="{StaticResource CheckBoxStyle1}" x:Name="CBList" DataContext="list" Tag ="{Binding featureId}" VerticalAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Left" HorizontalContentAlignment="Left" Unchecked="CBList_Unchecked" Checked="CBList_Checked" />
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
</Toolkit:DataGrid.Columns>
</Toolkit:DataGrid>
in simple way if user click on update/create/delete check boxes then list and view check box row should be checked AND if user checked the view checkbox then List checkbox should be checked.
For your requirement, you could use two way bind to realize. For details code please refer the following. The following code was modified base on your provided demo, you could copy and replace directly.
FeatureData class
public class FeatureData : INotifyPropertyChanged
{
public int featureId { get; set; }
public string featureName { get; set; }
private bool _create;
public bool Create
{
get { return _create; }
set
{
_create = value;
UpdateViewAndList(value);
OnChanged();
}
}
private bool _update;
public bool Update
{
get { return _update; }
set
{
_update = value;
UpdateViewAndList(value);
OnChanged();
}
}
private bool _delete;
public bool Delete
{
get { return _delete; }
set
{
_delete = value;
UpdateViewAndList(value);
OnChanged();
}
}
private bool _list;
public bool List
{
get { return _list; }
set
{
_list = value;
OnChanged();
}
}
private bool _view;
public bool View
{
get { return _view; }
set
{
_view = value;
this.List = value;
OnChanged();
}
}
private void UpdateViewAndList(bool value)
{
if (value)
{
this.View = true;
this.List = true;
}
else
{
this.View = false;
this.List = false;
}
}
//public string index { get; set; }
public FeatureData(bool Create, bool Update, bool Delete, bool List, bool View, int featureId, string featureName)
{
this.featureId = featureId;
this.featureName = featureName;
this.Create = Create;
this.Update = Update;
this.Delete = Delete;
this.List = List;
this.View = View;
//this.index = index;
}
private bool _IsSelected = false;
public bool IsSelected { get { return _IsSelected; } set { _IsSelected = value; OnChanged("IsSelected"); } }
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
private void OnChanged([CallerMemberName]string prop = null)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(prop));
}
#endregion
}
Xaml bind
<Toolkit:DataGrid.Columns>
<!-- Feature Column -->
<Toolkit:DataGridTemplatedColumn CanSort="False">
<Toolkit:DataGridTemplatedColumn.Header>
<TextBlock
Width="280"
FontSize="16"
Foreground="#000000"
Text="Feature"
/>
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<TextBlock
Width="280"
Padding="6,0,0,0"
FontSize="14"
Foreground="#333333"
Text="{Binding featureName}"
/>
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
<!-- Create -->
<Toolkit:DataGridTemplatedColumn Width="180" CanSort="False">
<Toolkit:DataGridTemplatedColumn.Header>
<Border BorderBrush="Black" BorderThickness="1,0,0,0">
<TextBlock
Margin="15,0,0,0"
Padding="0"
FontSize="16"
Foreground="#000000"
Text="Create"
/>
</Border>
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<CheckBox
x:Name="CBCreate"
Margin="30,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Center"
IsChecked="{Binding Create,Mode=TwoWay}"
/>
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
<!-- Update -->
<Toolkit:DataGridTemplatedColumn Width="180" CanSort="False">
<Toolkit:DataGridTemplatedColumn.Header>
<Border BorderBrush="Black" BorderThickness="1,0,0,0">
<TextBlock
FontSize="16"
Foreground="#000000"
Text=" Update"
/>
</Border>
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<CheckBox
x:Name="CBUpdate"
Margin="30,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Center"
IsChecked="{Binding Update, Mode=TwoWay}"
/>
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
<!-- Delete -->
<Toolkit:DataGridTemplatedColumn Width="180" CanSort="False">
<Toolkit:DataGridTemplatedColumn.Header>
<Border BorderBrush="Black" BorderThickness="1,0,0,0">
<TextBlock
FontSize="16"
Foreground="#000000"
Text=" Delete"
/>
</Border>
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<CheckBox
x:Name="CBDelete"
Margin="30,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Center"
IsChecked="{Binding Delete, Mode=TwoWay}"
/>
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
<!-- View -->
<Toolkit:DataGridTemplatedColumn Width="180" CanSort="False">
<Toolkit:DataGridTemplatedColumn.Header>
<Border BorderBrush="Black" BorderThickness="1,0,0,0">
<TextBlock
FontSize="16"
Foreground="#000000"
Text=" View"
/>
</Border>
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<CheckBox
x:Name="view"
Margin="30,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Center"
IsChecked="{Binding View, Mode=TwoWay}"
Tag="view"
/>
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
<!-- List -->
<Toolkit:DataGridTemplatedColumn
x:Name="CLMList"
Width="180"
CanSort="False"
>
<Toolkit:DataGridTemplatedColumn.Header>
<Border BorderBrush="Black" BorderThickness="1,0,0,0">
<TextBlock
FontSize="16"
Foreground="#000000"
Text=" List"
/>
</Border>
</Toolkit:DataGridTemplatedColumn.Header>
<Toolkit:DataGridTemplatedColumn.CellTemplate>
<DataTemplate>
<CheckBox
x:Name="CBList"
Margin="30,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Center"
x:FieldModifier="public"
IsChecked="{Binding List, Mode=TwoWay}"
/>
</DataTemplate>
</Toolkit:DataGridTemplatedColumn.CellTemplate>
</Toolkit:DataGridTemplatedColumn>
</Toolkit:DataGrid.Columns>

UWP - How to format time in TimePicker_TimeChanged AND Select Time without Buttons inside in TimepickerFlyout

I am developing UWP App (Win10 VS2015). I have two problems.
1- How can I get the time in this format (4:00 PM or 9:34 AM etc..) in 12hours format, I can get the value without PM/AM via this TimePicker.Time = sender.Time.ToString(#"hh\:mm"), but I need the actual format as I mentioned.
XAML Code
<TimePicker ClockIdentifier="12HourClock" TimeChanged="TimePicker_TimeChanged" Style="{StaticResource TimePickerStyleCustom}"/>
.cs Code
private void TimePicker_TimeChanged(object sender, TimePickerValueChangedEventArgs e)
{
timeTitle.Text = (sender as TimePicker).Time.ToString(#"hh\:mm");
}
Via the above code, I can get the value without AM/PM and also it is in 24hour format i.e. 4:00PM is in 16:00, but I need it in 4:00PM or 4:00AM (this is just an example). If I put .ToString(#"hh\:mm tt"); it throws exception. How to get this please.
2- 2nd problem is, When we tap on the Timepicker, a TimePickerFlyout expands and we select time by clicking on hours/minutes and when finalize then click on the (Tick) Mark to select Time ... but I need to remove these buttons (Done (_/) & Cancel (X)) and select time by selecting the Hour/Min in Flyout panel rather than button click and assign it to a string. I can remove the buttons from TimePickerFlyoutPresenter Style but then how to make the Selection functional like button click.
See the screenshot, in first portion the 2 buttons are available and it worked, but I need the 2nd portion as shown in the right side.
For First problem
TimeSpan represents a time interval not a time of day. You have to convert it to DateTime then format it
private void TestTimePicker_TimeChanged(object sender, TimePickerValueChangedEventArgs e)
{
string Text = (sender as TimePicker).Time.ToString(#"hh\:mm");
var dateTime = new DateTime((sender as TimePicker).Time.Ticks); // Date part is 01-01-0001
var formattedTime = dateTime.ToString("h:mm tt", CultureInfo.InvariantCulture);
}
Problem 2
For this either you have to implement your own TimerPickerFlyout from PickerFlyoutBase or from Flyout. It is bit complicated and I havent worked on that. You can watch this link for that
There is a easy workaround . As you mentioned in question you have to edit TimePickerFlyoutPresenter style.
I tried adding Tapped event handler to FirstPickerHost,SecondPickerHost,ThirdPickerHost.But you cant add event handlers in app.xaml. So i used Behavioural SDK's interactions. If you have Template10 used in your project you dont have to download anything just add following namespaces in app.xaml
xmlns:interact="using:Microsoft.Xaml.Interactivity"
xmlns:interactcore="using:Microsoft.Xaml.Interactions.Core"
<Style TargetType="TimePickerFlyoutPresenter">
<Setter Property="Width" Value="242" />
<Setter Property="MinWidth" Value="242" />
<Setter Property="MaxHeight" Value="396" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
<Setter Property="AutomationProperties.AutomationId" Value="TimePickerFlyoutPresenter" />
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource DateTimeFlyoutBorderThickness}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TimePickerFlyoutPresenter">
<Border x:Name="Background"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
MaxHeight="396">
<Grid x:Name="ContentPanel">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" x:Name="FirstPickerHostColumn" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" x:Name="SecondPickerHostColumn" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" x:Name="ThirdPickerHostColumn" />
</Grid.ColumnDefinitions>
<Rectangle x:Name="HighlightRect" Fill="{ThemeResource SystemControlHighlightListAccentLowBrush}" Grid.Column="0" Grid.ColumnSpan="5" VerticalAlignment="Center" Height="44" >
</Rectangle>
<Border x:Name="FirstPickerHost" Grid.Column="0" >
<interact:Interaction.Behaviors>
<interactcore:EventTriggerBehavior EventName="Tapped">
<interactcore:InvokeCommandAction Command="{Binding ClosePopUp}"/>
</interactcore:EventTriggerBehavior>
</interact:Interaction.Behaviors>
</Border>
<Rectangle x:Name="FirstPickerSpacing" Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" HorizontalAlignment="Center" Width="2" Grid.Column="1" >
</Rectangle>
<Border x:Name="SecondPickerHost" Grid.Column="2" >
<interact:Interaction.Behaviors>
<interactcore:EventTriggerBehavior EventName="Tapped">
<interactcore:InvokeCommandAction Command="{Binding ClosePopUp}"/>
</interactcore:EventTriggerBehavior>
</interact:Interaction.Behaviors>
</Border>
<Rectangle x:Name="SecondPickerSpacing" Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" HorizontalAlignment="Center" Width="2" Grid.Column="3" >
</Rectangle>
<Border x:Name="ThirdPickerHost" Grid.Column="4" >
<interact:Interaction.Behaviors>
<interactcore:EventTriggerBehavior EventName="Tapped">
<interactcore:InvokeCommandAction Command="{Binding ClosePopUp}"/>
</interactcore:EventTriggerBehavior>
</interact:Interaction.Behaviors>
</Border>
</Grid>
<Grid Grid.Row="1" Visibility="Collapsed">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Height="2" VerticalAlignment="Top" Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" Grid.ColumnSpan="2" />
<Button x:Name="AcceptButton" Grid.Column="0" Content="" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="16" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource DateTimePickerFlyoutButtonStyle}" Margin="0,2,0,0" />
<Button x:Name="DismissButton" Grid.Column="1" Content="" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="16" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource DateTimePickerFlyoutButtonStyle}" Margin="0,2,0,0" />
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And you have to set datacontext of Timepicker to your viewmodel.
<TimePicker x:Name="TestTimePicker" Time="{Binding SelectedTime,Mode=TwoWay}" ClockIdentifier="12HourClock" Time="0" TimeChanged="TestTimePicker_TimeChanged" >
</TimePicker>
public MainPage()
{
this.InitializeComponent();
DataContext = new TestViewModel();
TestTimePicker.DataContext = this.DataContext;
}
public class TestViewModel:INotifyPropertyChanged
{
public DelegateCommand<TappedRoutedEventArgs> ClosePopUp { get; set; }
TimeSpan selectedTime;
public TimeSpan SelectedTime
{ get { return selectedTime; }
set
{
if (value != selectedTime)
{
selectedTime = value;
OnPropertyChanged("SelectedTime");
}
}
}
public TestViewModel()
{
ClosePopUp = new DelegateCommand<TappedRoutedEventArgs>((args) =>
{
if (args.OriginalSource is Grid)
{
Grid grid = args.OriginalSource as Grid;
if (grid != null)
{
var fly = FlyoutBase.GetAttachedFlyout(grid);
var flyoutpresenter = FindParent<TimePickerFlyoutPresenter>(grid);
if (flyoutpresenter != null)
(flyoutpresenter.Parent as Popup).IsOpen = false;
var firstPicker= FindParent(grid,"FirstPickerHost");
var secondPicker = FindParent(grid, "SecondPickerHost");
var thirdPicker = FindParent(grid, "ThirdPickerHost");
var textblock = FindElementInVisualTree<TextBlock>(grid);
if (firstPicker != null)
{
SelectedTime = new TimeSpan(int.Parse(textblock.Text), SelectedTime.Minutes, SelectedTime.Seconds);
}
if(secondPicker!=null)
{
SelectedTime = new TimeSpan(SelectedTime.Hours, int.Parse(textblock.Text), SelectedTime.Seconds);
}
if (thirdPicker != null)
{
// AM/PM
}
}
}
else if(args.OriginalSource is TextBlock)
{
TextBlock textblock = args.OriginalSource as TextBlock;
if (textblock != null)
{
var fly = FlyoutBase.GetAttachedFlyout(textblock);
var flyoutpresenter = FindParent<TimePickerFlyoutPresenter>(textblock);
if (flyoutpresenter != null)
(flyoutpresenter.Parent as Popup).IsOpen = false;
var firstPicker = FindParent(textblock, "FirstPickerHost");
var secondPicker = FindParent(textblock, "SecondPickerHost");
var thirdPicker = FindParent(textblock, "ThirdPickerHost");
if (firstPicker != null)
{
SelectedTime = new TimeSpan(int.Parse(textblock.Text), SelectedTime.Minutes, SelectedTime.Seconds);
}
if (secondPicker != null)
{
SelectedTime = new TimeSpan(SelectedTime.Hours, int.Parse(textblock.Text), SelectedTime.Seconds);
}
if (thirdPicker != null)
{
// AM/PM
}
}
}
else
{
}
});
}
public event PropertyChangedEventHandler PropertyChanged;
void OnPropertyChanged(string propertyName)
{
// the new Null-conditional Operators are thread-safe:
this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
private T FindParent<T>(DependencyObject child) where T : DependencyObject
{
var parent = VisualTreeHelper.GetParent(child);
if (parent != null && parent is T)
return (T)parent;
else if (parent == null)
return null;
else
{
var result = FindParent<T>(parent);
if (result != null)
return result;
}
return null;
}
private DependencyObject FindParent(DependencyObject child,string parentName)
{
var parent = VisualTreeHelper.GetParent(child);
if (parent != null && (parent as FrameworkElement).Name.Equals(parentName))
return parent;
else if (parent == null)
return null;
else
{
var result = FindParent(parent,parentName);
if (result != null)
return result;
}
return null;
}
private T FindElementInVisualTree<T>(DependencyObject parentElement) where T : DependencyObject
{
var count = VisualTreeHelper.GetChildrenCount(parentElement);
if (count == 0) return null;
for (int i = 0; i < count; i++)
{
var child = VisualTreeHelper.GetChild(parentElement, i);
if (child != null && child is T)
return (T)child;
else
{
var result = FindElementInVisualTree<T>(child);
if (result != null)
return result;
}
}
return null;
}
}
What i'm doing above in ClosePopUp command is programmatically finding TimePickerFlyoutPresenter using VisualTreeHelper getparaent() method
TimePickerFlyoutPresenter parent is a PopUp that is actually your TimePickerFlyout. Set popup's IsOpen to false
// Updated the code to reflect selected hour and minute in timepicker. One issue left is update the selected AM or PM. I ll update if i get the solution
Here is a link to complete project which solves all issues
Source Code

Positon of DropDown list of ComboBox in UWP

I have a ComboBox in my universal application, I want DropDown list open below of my combo not over it.
how can I change position of DropDown list of ComboBox in UWP?
The DropDown of a ComboBox is actually a Popup, and the position where to show this Popup is defined in the code behind, and we can't access to it. One workaround is finding this Popup and relocate it when it is opened, but using this method we need to calculate the VerticalOffset property each time when it is opened, and there are quite many scenarios for different value of VerticalOffset.
So my suggestion is design a custom control which behavior like a ComboBox, for example I created a UserControl like this:
<Button x:Name="rootButton" BorderBrush="Gray" BorderThickness="2" Click="Button_Click" MinWidth="80" Background="Transparent" Padding="0">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Width="{Binding ElementName=rootButton, Path=ActualWidth}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="32" />
</Grid.ColumnDefinitions>
<TextBlock Text="{x:Bind selectedItem, Mode=OneWay}" Grid.Column="0" VerticalAlignment="Center" FontSize="15" HorizontalAlignment="Center" />
<FontIcon Grid.Column="1" FontSize="12" FontFamily="Segoe MDL2 Assets" Glyph="" HorizontalAlignment="Right"
Margin="0,10,10,10" VerticalAlignment="Center" />
</Grid>
<FlyoutBase.AttachedFlyout>
<MenuFlyout Placement="Bottom" x:Name="menuFlyout">
<MenuFlyoutItem Text="Item 1" Click="MenuFlyoutItem_Click" />
<MenuFlyoutItem Text="Item 2" Click="MenuFlyoutItem_Click" />
<MenuFlyoutItem Text="Item 3" Click="MenuFlyoutItem_Click" />
<MenuFlyoutItem Text="Item 4" Click="MenuFlyoutItem_Click" />
<MenuFlyoutItem Text="Item 5" Click="MenuFlyoutItem_Click" />
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
</Button>
and the code behind in this UserControl:
public sealed partial class CustomComboBox : UserControl, INotifyPropertyChanged
{
public CustomComboBox()
{
this.InitializeComponent();
selectedItem = "";
}
private string _selectedItem;
public string selectedItem
{
get { return _selectedItem; }
set
{
_selectedItem = value;
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs("selectedItem"));
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
var item = sender as MenuFlyoutItem;
selectedItem = item.Text;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
FlyoutBase.ShowAttachedFlyout(sender as Button);
}
}
And you can use this CustomComboBox in other page like this:
<local:CustomComboBox VerticalAlignment="Center" HorizontalAlignment="Center" />
By default this CustomComboBox will show its DropDown list under it, unless there is no enough space under it to hold this DropDown, in this case, the DropDown will be shown above this CustomComboBox.

Silverlight - get updated cell content value from a textbox inside a datagrid

I have a DataGrid which will have Two TextBoxes that will be binded from a list
It is simple and fine...
Assume that user changing a value "bbb" to 123 and he removes a record "ccc" Here grid get refreshed... at this time the changed values is being removed! and original value is binded!!!
I need to collect current values of the cell content of the datagrid How?
Below is my sample code:
MainPage.XAML
<UserControl x:Class="SampleDataGridApplication.MainPage"
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"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="400" Loaded="UserControl_Loaded" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
<Grid x:Name="LayoutRoot" Background="White">
<Border Name="bdAddUsersCSVButtons" Width="380" Height="40" Canvas.Top="60" Margin="12,530,8,30">
<Canvas Width="Auto" Height="Auto">
<Button Content="Remove" Height="30" Width="100" HorizontalAlignment="Left" Name="btnRemove" Canvas.Left="150" Canvas.Top="5" Cursor="Hand"
FontFamily="Lucida Grande" FontSize="13" FontStyle="Normal" FontWeight="Bold" VerticalAlignment="Top" Click="btnRemove_Click" />
<Button Content="Reset" Height="30" Width="100" Name="btnReset" HorizontalAlignment="Left" Canvas.Left="280" Canvas.Top="5" VerticalAlignment="Top" Cursor="Hand"
FontFamily="Lucida Grande" FontSize="13" FontStyle="Normal" FontWeight="Bold" Click="btnReset_Click" />
</Canvas>
</Border>
<sdk:DataGrid AutoGenerateColumns="False" Height="500" HorizontalAlignment="Left" Margin="10,10,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="380" >
<sdk:DataGrid.Columns>
<sdk:DataGridTemplateColumn CanUserResize="False" Header="" Width="30" CanUserReorder="False">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<CheckBox Name="chboxUser" IsChecked="False" VerticalAlignment="Center" Padding="0,15,0,0" Width="20" Height="20" CommandParameter="{Binding EmailID}" />
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>
<sdk:DataGridTemplateColumn CanUserResize="False" Header="FirstName" Width="100" CanUserReorder="False" IsReadOnly="True">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBox Name="txtFirstName" FontFamily="Lucida Grande" Width="80" Height="22" Foreground="#666666" FontSize="9" FontStyle="Normal" Margin="0,3,0,0" TabIndex="0"
FontWeight="Normal" Text="{Binding FirstName}"></TextBox>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>
<sdk:DataGridTemplateColumn CanUserResize="False" Header="EmailID" Width="245" CanUserReorder="False" IsReadOnly="True">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBox Name="txtEmailID" FontFamily="Lucida Grande" Width="80" Height="22" Foreground="#666666" FontSize="9" FontStyle="Normal" Margin="0,3,0,0" TabIndex="0"
FontWeight="Normal" Text="{Binding EmailID}"></TextBox>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>
</sdk:DataGrid.Columns>
</sdk:DataGrid>
</Grid>
</UserControl>
MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SampleDataGridApplication
{
public partial class MainPage : UserControl
{
List<Users> _lstUsers = new List<Users>();
public MainPage()
{
InitializeComponent();
}
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
GenerateList();
LoadValues();
}
private void LoadValues()
{
dataGrid1.ItemsSource = _lstUsers;
}
private void GenerateList()
{
_lstUsers = new List<Users>
{
new Users { FirstName="aaa", EmailID="aaa#gmail.com" },
new Users { FirstName="bbb", EmailID="bbb#gmail.com" },
new Users { FirstName="ccc", EmailID="ccc#gmail.com" },
new Users { FirstName="ddd", EmailID="ddd#gmail.com" },
new Users { FirstName="eee", EmailID="eee#gmail.com" },
new Users { FirstName="fff", EmailID="fff#gmail.com" },
new Users { FirstName="ggg", EmailID="ggg#gmail.com" },
new Users { FirstName="hhh", EmailID="hhh#gmail.com" },
};
}
private void btnRemove_Click(object sender, RoutedEventArgs e)
{
List<Users> _lstTemp = dataGrid1.ItemsSource as List<Users>;
//Here i'm reading the DataGrid Values; i need to collect current values of the records how?
foreach (Users _RowValue in dataGrid1.ItemsSource)
{
CheckBox _CheckBox = dataGrid1.Columns[0].GetCellContent(_RowValue) as CheckBox;
if (_CheckBox.IsChecked == true)
{
_lstTemp = (from value in _lstTemp.Where(Item=> Item.EmailID!= _CheckBox.CommandParameter.ToString()) select value).ToList();
}
}
dataGrid1.ItemsSource = null;
dataGrid1.ItemsSource = _lstTemp;
}
private void btnReset_Click(object sender, RoutedEventArgs e)
{
dataGrid1.ItemsSource = null;
LoadValues();
}
public class Users
{
public string FirstName { get; set; }
public string EmailID { get; set; }
}
}
}
I got an answer finally
add a Key_UP event to that textbox
and in code behind:
private void txtFirstName_KeyUp(object sender, KeyEventArgs e)
{
List<Users> _lstTemp = dataGrid1.ItemsSource as List<Users>;
var selectedrow = dataGrid1.SelectedItem as Users;
TextBox _TextFirstName = dataGrid1.Columns[1].GetCellContent(selectedrow) as TextBox;
(from value in _lstTemp
where value.EmailID == selectedrow.EmailID
select value).ToList().ForEach(value => value.FirstName = _TextFirstName.Text);
dataGrid1.ItemsSource = _lstTemp;
}
i'm happy that it fixed my issue but makes me wild that no one is intrested to share an idea :(

Pop Up: a problem with margin Top

I'm developing a Windows Phone app.
I use a user control to show a pop up:
<UserControl x:Class="XXXXXXX.Views.Lists.GameDescriptionControl"
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"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}" Height="290" Width="460">
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}" Margin="0,0,0,0" Width="460">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="133"/>
<RowDefinition Height="86"/>
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Center" Margin="10" Name="gameDescription" Text="" VerticalAlignment="Top" TextWrapping="Wrap" Grid.Row="1" Style="{StaticResource PhoneTextTitle3Style}" />
<Button Content="{Binding Path=AppResources.Yes, Source={StaticResource LocalizedStrings}}" Height="72" HorizontalAlignment="Left" Margin="50,5,0,0" Name="okButton" VerticalAlignment="Top" Width="160" Click="okButton_Click" Grid.Row="2" />
<Button Content="{Binding Path=AppResources.No, Source={StaticResource LocalizedStrings}}" Height="72" HorizontalAlignment="Left" Margin="244,5,0,0" Name="cancelButton" VerticalAlignment="Top" Width="160" Click="cancelButton_Click" Grid.Row="2" />
<TextBlock Grid.Row="0" x:Name="caption" HorizontalAlignment="Left" Margin="10" TextWrapping="Wrap" Text="{Binding Path=AppResources.Description, Source={StaticResource LocalizedStrings}}" Style="{StaticResource PhoneTextLargeStyle}"/>
</Grid>
</UserControl>
And this is the code to show the Pop Up:
private void showInfo(int gameId)
{
string gameDesc = getGameInfo(gameId);
p = new Popup();
GameDescriptionControl gd = new GameDescriptionControl();
gd.Description = gameDesc;
gd.OkClicked += new EventHandler(gd_OkClicked);
gd.CancelClicked += new EventHandler(gd_CancelClicked);
p.Child = gd;
// Set where the popup will show up on the screen.
p.VerticalOffset = 10;
p.HorizontalOffset = 10;
// Open the popup.
p.IsOpen = true;
}
But I get this:
As you can see, caption TextBlock hasn't got a margin top.
Any advice?
Margin will refer to the area outside of your textblock. If you want to move your text away from the edge of the textblock you will need to use the Padding attribute.
Not to act like the word paperclip, but it looks like you're trying to make a custom MessageBox.
Check this implementation out: http://cloudstore.blogspot.com/2011/01/customizing-messagebox-on-windows-phone.html . It's a great implementation of a messagebox that is very easy to use, looks/behaves very closely to the real MessageBox, and is lightweight.
Adding the few files that come with the solution, all you have to do is:
private MessageBoxService mbs = new MessageBoxService();
...
mbs.Closed +=new System.EventHandler(mbs_Closed);
mbs.Show("Confirm?","Are you sure you wish to do that?",MessageBoxServiceButton.YesNo,null);
void mbs_Closed(object sender, System.EventArgs e)
{
mbs.Closed -= mbs_Closed;
if (mbs.Result == MessageBoxResult.Yes)
{
...
}
}

Resources