I created a simple Rating user control, the problem this control won't in WinRT work when I use binding, it works fine on windows phone, This is my Control:
public sealed partial class RatingControl : UserControl
{
public int Rate { get { return (int)GetValue(RateProperty); } set { SetValue(RateProperty, value); } }
public static readonly DependencyProperty RateProperty = DependencyProperty.Register("Rate",
typeof(int),
typeof(RatingControl), null);
public RatingControl()
{
this.InitializeComponent();
this.Loaded += RatingControl_Loaded;
}
void RatingControl_Loaded(object sender, RoutedEventArgs e)
{
List<Image> Images = new List<Image>();
for (int i = 0; i < 5; i++)
{
Image img = new Image { Width = 35, Height = 35, Margin = new Thickness(3) };
img.Source = new BitmapImage { UriSource = new System.Uri("ms-appx:Images/Stars/notFilled.png") };
Images.Add(img);
sp.Children.Add(img);
}
for (int i = 0; i < Rate; i++)
Images[i].Source = new BitmapImage { UriSource = new System.Uri("ms-appx:Images/Stars/Filled.png") };
}
}
When I hardcode the value, it works fine:
<local:RatingControl Rate="3" />
but when I use Binding, it just shows zero stars. I checked the value of Rate, it is always zero.
<local:RatingControl Rate="{Binding Decor, Mode=TwoWay}" />
UPDATE: I just found out that the binding happens before I get the value of the Rate, so its zero all the time. How can I fix that? I need the binding to happens after I get the value. Also I thought the Binding happens everytime I change the Rate value.
SOLUTION: I Didnt implement the DependencyObject right, I should've done this:
public static readonly DependencyProperty RateProperty = DependencyProperty.Register("Rate",
typeof(int),
typeof(RatingControl), new PropertyMetadata(0, new PropertyChangedCallback(BindRateControl)));
SOLUTION: I Didnt implement the DependencyObject right, I should've done this (adding a callback method):
public static readonly DependencyProperty RateProperty = DependencyProperty.Register("Rate",
typeof(int),
typeof(RatingControl),
new PropertyMetadata(0, new PropertyChangedCallback(BindRateControl)));
has you try adding the UserControl from code-behind. this help you to ensure that the UserControl is triggered after getting the value.
Related
i'm developing with uwp and i've a problem with data binding. I have a listView that i fill with a custom panel elements called PlaylistLeftOption class. This class inherit Panel class attributes that inherit FrameworkElement class attribute and its methods so i have a SetBinding method avaible.
Now i'm trying to bind the height value (it's equal to other elements) so i created a static attribute, called PerformanceItemHeight, in other extern singleton class.
since i need to fill listview dinamically i'm trying to bind the value inside the constructor but it don't work.
This is the code inside constructor:
public PlaylistLeftOption()
{
mainGrid.Background = new SolidColorBrush(Colors.Red);
mainGrid.BorderBrush = new SolidColorBrush(Colors.Black);
mainGrid.BorderThickness = new Thickness(0.5,0.25,0.5,0.25);
WidthVal = 200;
HeightVal = 50;
var myBinding = new Binding();
myBinding.Source = PerformanceLayout.Instance.PerformanceItemHeight;
myBinding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged;
myBinding.Mode = BindingMode.TwoWay;
SetBinding(HeightValProperty, myBinding);
Children.Add(mainGrid);
}
And this is the property:
public static readonly DependencyProperty HeightValProperty = DependencyProperty.Register(
"HeightVal",
typeof(double),
typeof(PlaylistLeftOption),
new PropertyMetadata(50)
);
public double HeightVal
{
get => (double)GetValue(HeightValProperty);
set
{
SetValue(HeightValProperty, value);
Height = HeightVal;
mainGrid.Height = HeightVal;
globalSize.Height = HeightVal;
}
}
This is the code for PerformanceItemHeight:
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
// Raise the PropertyChanged event, passing the name of the property whose value has changed.
this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
private double _performanceItemHeight = 50;
public double PerformanceItemHeight {
get => _performanceItemHeight;
set {
_performanceItemHeight = value;
this.OnPropertyChanged();
}
}
Why does via xaml it works?
i tryied to add PlaylistLeftOption item inside listview via xaml and it's ok!
thank you
By testing, the binding of HeightVal works in XAML and the binding of HeightVal does not work in code-behind. You could see the reason in the section Implementing the wrapper of the document Custom dependency properties which says that your wrapper implementations should perform only the GetValue and SetValue operations. Otherwise, you'll get different behavior when your property is set via XAML versus when it is set via code.
You could add a property-changed callback method to notify the changes of HeightVal actively.
For example:
public static readonly DependencyProperty HeightValProperty = DependencyProperty.Register(
"HeightVal",
typeof(double),
typeof(PlaylistLeftOption),
new PropertyMetadata(100, new PropertyChangedCallback(OnHeightValChanged))
);
private static void OnHeightValChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
PlaylistLeftOption playlistLeftOption = d as PlaylistLeftOption;
if(playlistLeftOption != null)
{
var height = (Double)e.NewValue;
playlistLeftOption.HeightVal = height;
}
}
And change the binging code like this:
var myBinding = new Binding();
myBinding.Source = PerformanceLayout.Instance;
myBinding.Path = new PropertyPath("PerformanceItemHeight");
myBinding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged;
myBinding.Mode = BindingMode.TwoWay;
SetBinding(HeightValProperty, myBinding);
To simplify the example let's suppose we just add a GridView in the Page:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<GridView x:Name="MainGrid" />
</Grid>
And this is the code:
public MainPage()
{
this.InitializeComponent();
this.Loaded += MainPage_Loaded;
}
private async void MainPage_Loaded(object sender, RoutedEventArgs e)
{
var collection = new ObservableCollection<String>();
MainGrid.ItemsSource = collection;
await Dispatcher.RunIdleAsync(test =>
{
for (int i = 0; i < 20000; i++)
{
collection.Add(i.ToString());
}
});
}
A GridView is filled with that ObservableCollection, I do not complain about scrolling but about resizing and maximizing the Window makes a huge lag and even worse in low spec computers.
I have done the following improvements:
Play with the values of IncrementalLoadingThreshold & DataFetchSize
<GridView x:Name="MainGrid" IncrementalLoadingThreshold="100" DataFetchSize="3"/>
Sometimes goes better but not sure if this values works with an static collection.
Change the alignment to top and left to track the SizeChanged and adapt to the Grid.
This goes better but when I tap on maximize it has a large lag.
I have also tried to follow old examples like http://xurxodeveloper.blogspot.com.es/2014/03/scroll-infinito-en-windows-81-con-xaml.html but it does not add more items when scroll has arrived to the end. And the performance tips and articles I found are just for scrolling.
So In this static case, is there a technique or another collection source to improve the resizing lag?
Firstly create a new Observable Collection that allows you to AddRange. Here's what I have
public class ObservableCollection2<T> : ObservableCollection<T>
{
bool _suppressNotification = false;
protected override void OnCollectionChanged(NotifyCollectionChangedEventArgs e)
{
if (!_suppressNotification)
base.OnCollectionChanged(e);
// do nothing
}
public ObservableCollection2() : base() { }
public ObservableCollection2(IEnumerable<T> collection) : base(collection)
{ }
public void AddRange(IEnumerable<T> list)
{
this._suppressNotification = true;
if (list == null)
throw new ArgumentNullException("list");
int index = this.Count;
foreach (T item in list)
{
base.Items.Add(item);
}
this._suppressNotification = false;
OnPropertyChanged(new System.ComponentModel.PropertyChangedEventArgs("Count"));
OnPropertyChanged(new System.ComponentModel.PropertyChangedEventArgs("Items[]"));
OnCollectionChanged(new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Add, list.ToList(), index));
}
}
Next you don't instantiate the collection on Loaded rather do it in constructor
public MainPage()
{
this.InitializeComponent();
dataCol = new ObservableCollection2<String>();
}
ObservableCollection2<String> dataCol = null;
protected override async void OnNavigatedTo(NavigationEventArgs e)
{
MainGrid.ItemsSource = dataCol;
List<stirng> tempList = new List<string>();
for (int i = 0; i < 20000; i++)
{
tempList .Add(i.ToString());
}
dataCol.AddRange(tempList);
}
In short you aren't triggering UI updates after every insert only when the collection has finished processing.. that means GridView gets update notification once rather than 2000 times
In my app I have A grid with visibility bound to a property in the view model.
What I want to do is when the visibility property changes at the view model, the grid fades in or out according to the visibility value: Visible/Collapsed.
how can I achieve this ?
Inspired by the answer of "HDW Production", here's the code for Windows Store and Windows Phone Store apps:
public class FadingVisibilityGrid : Grid
{
public static readonly DependencyProperty DeferredVisibilityProperty = DependencyProperty.Register(
"DeferredVisibility", typeof (Visibility), typeof (FadingVisibilityGrid), new PropertyMetadata(default(Visibility), DeferredVisibilityChanged));
private static void DeferredVisibilityChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
var newVisibility = (Visibility)e.NewValue;
var grid = (FadingVisibilityGrid)sender;
var animation = new DoubleAnimation
{
Duration = new Duration(TimeSpan.FromMilliseconds(200))
};
Storyboard.SetTarget(animation, grid);
Storyboard.SetTargetProperty(animation, "Grid.Opacity");
grid.FadeStoryBoard.Stop();
grid.FadeStoryBoard = new Storyboard();
grid.FadeStoryBoard.Children.Add(animation);
if (newVisibility == Visibility.Visible)
{
animation.From = 0;
animation.To = 1;
grid.Visibility = Visibility.Visible;
grid.FadeStoryBoard.Begin();
}
else
{
animation.From = 1;
animation.To = 0;
grid.FadeStoryBoard.Completed += (o, o1) =>
{
grid.Visibility = newVisibility;
};
grid.FadeStoryBoard.Begin();
}
}
public Visibility DeferredVisibility
{
get { return (Visibility) GetValue(DeferredVisibilityProperty); }
set { SetValue(DeferredVisibilityProperty, value); }
}
private Storyboard _fadeStoryBoard = new Storyboard();
public Storyboard FadeStoryBoard
{
get { return _fadeStoryBoard; }
set { _fadeStoryBoard = value; }
}
}
You need a new DependencyProperty, either by inheriting from Grid and adding one or by creating an attached property. Let's call it DeferredVisibility and let it be of type Visibility.
When DeferredVisibility is changed to Visible, set the Visibility to Visible and animate the opacity from 0 to 1.
When DeferredVisibility is changed to Collapsed, animate the opacity from 1 to 0 and THEN set the Visibility to Collapsed.
I am trying to create a custom Pushpin for Bing Maps in my WinRT application. My problem is that I need a reference to the actual Map from my page in order to pin the icons correctly in my userControl. So for example this is my DataTemplate which gets bound to the map and works fine for the normal pushpins. For my custom userControl to position correctly I need a reference to the parent Map in the userControl.
This is my XAML:
<m:MapItemsControl x:Name="Pushpinss" ItemsSource="{Binding InventoryItems}">
<m:MapItemsControl.ItemTemplate>
<DataTemplate>
<!-- NORMAL PUSHPIN WORKS -->
<m:Pushpin>
<m:MapLayer.Position>
<m:Location Latitude="{Binding WarehouseLatitude}"
Longitude="{Binding WarehouseLongitude}" />
</m:MapLayer.Position>
</m:Pushpin>
<!-- CUSTOM CONTROL DISPLAYS BUT DOES NOT POSITION CORRECTLY BECAUSE I NEED A REFERENCE TO THE MAP-->
<View:GPSIcon Latitude="{Binding WarehouseLatitude}"
Longitude="{Binding WarehouseLongitude}"
Radius="100000"/>
<x:Arguments>
</x:Arguments>
</DataTemplate>
</m:MapItemsControl.ItemTemplate>
</m:MapItemsControl>
This is my custom control:
public sealed partial class GPSIcon : UserControl
{
private Map _map;
private const double EARTH_RADIUS_METERS = 6378137;
public GPSIcon(Map map)
{
this.InitializeComponent();
_map = map;
_map.ViewChanged += (s, e) =>
{
UpdateAccuracyCircle();
};
}
public static readonly DependencyProperty LatitudeProperty =
DependencyProperty.Register("Latitude", typeof(double), typeof(GPSIcon), new PropertyMetadata(0));
public static readonly DependencyProperty LongitudeProperty =
DependencyProperty.Register("Longitude", typeof(double), typeof(GPSIcon), new PropertyMetadata(0));
public static readonly DependencyProperty RadiusProperty =
DependencyProperty.Register("Radius", typeof(double), typeof(GPSIcon), new PropertyMetadata(0));
public double Latitude
{
get { return (double)GetValue(LatitudeProperty); }
set { SetValue(LatitudeProperty, value); }
}
public double Longitude
{
get { return (double)GetValue(LongitudeProperty); }
set { SetValue(LongitudeProperty, value); }
}
/// <summary>
/// Radius in Metres
/// </summary>
public double Radius
{
get { return (double)GetValue(RadiusProperty); }
set
{
SetValue(RadiusProperty, value);
UpdateAccuracyCircle();
}
}
private void UpdateAccuracyCircle()
{
if (_map != null && Radius >= 0)
{
double groundResolution = Math.Cos(_map.Center.Latitude * Math.PI / 180) * 2 * Math.PI * EARTH_RADIUS_METERS / (256 * Math.Pow(2, _map.ZoomLevel));
double pixelRadius = Radius / groundResolution;
AccuracyCircle.Width = pixelRadius;
AccuracyCircle.Height = pixelRadius;
AccuracyCircle.Margin = new Thickness(-pixelRadius / 2, -pixelRadius / 2, 0, 0);
}
}
}
Is this possible at all? I have also tried using the x:Arguments directive as described here:
http://msdn.microsoft.com/en-us/library/ee795382.aspx
Thanks
UPDATE 1
Do following changes
1) Add empty constructor.
public GPSIcon()
{
this.InitializeComponent();
}
2) Declare DP of type Map
public Map MyMap
{
get { return (Map)GetValue(MyMapProperty); }
set { SetValue(MyMapProperty, value); }
}
public static readonly DependencyProperty MyMapProperty =
DependencyProperty.Register("MyMap", typeof(Map), typeof(GPSIcon), new PropertyMetadata(default(Map), OnMapSet));
private static void OnMapSet(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
_map = ((GPSIcon)(d)).MyMap;
_map.ViewChanged += (ss, ee) =>
{
((GPSIcon)(d)).UpdateAccuracyCircle();
};
}
3) Pass Map object like this in XAML
<m:Map x:Name="objMap">
<m:MapItemsControl x:Name="Pushpinss" ItemsSource="{Binding InventoryItems}">
<m:MapItemsControl.ItemTemplate>
<DataTemplate>
<View:GPSIcon Latitude="{Binding WarehouseLatitude}"
Longitude="{Binding WarehouseLongitude}"
Radius="100000"
MyMap="{Binding ElementName=objMap}"/>
</DataTemplate>
</m:MapItemsControl.ItemTemplate>
</m:MapItemsControl>
</m:Map>
Declare one more dependency property of type Map and then you should pass current map instance as a value of that DP in <View:GPSIcon ... />
Simply, you need to follow the same logic as how to Pass parameter to constructor from xaml in Silverlight
To get your custom UIElement to position properly on the map what you can do instead of doing this in code is simply set the position of the UIElement the same way you set the position of a pushpin.
For example:
<View:GPSIcon Radius="100000">
<m:MapLayer.Position>
<m:Location Latitude="{Binding WarehouseLatitude}"
Longitude="{Binding WarehouseLongitude}" />
</m:MapLayer.Position>
</View:GPSIcon>
I have a Page with an Pivot-control and in some cases I don't want to show a particular PivotItem.
Setting the Visibility to collapsed doesn't seem to affect it at all.
Any suggestions?
you should be able to remove or add PivotItems dynamically in your Pivot by using the respective collection methods on Pivot.Items .
Let me know if this doesn't work for your scenario.
I've created a custom behavior for showing/hiding pivot item
Usage:
< i:Interaction.Behaviors>
< common:HideablePivotItemBehavior Visible="{Binding variable}" />
</ i:Interaction.Behaviors >
Code:
/// <summary>
/// Behavior which enables showing/hiding of a pivot item`
/// </summary>
public class HideablePivotItemBehavior : Behavior<PivotItem>
{
#region Static Fields
public static readonly DependencyProperty VisibleProperty = DependencyProperty.Register(
"Visible",
typeof(bool),
typeof(HideablePivotItemBehavior),
new PropertyMetadata(true, VisiblePropertyChanged));
#endregion
#region Fields
private Pivot _parentPivot;
private PivotItem _pivotItem;
private int _previousPivotItemIndex;
private int _lastPivotItemsCount;
#endregion
#region Public Properties
public bool Visible
{
get
{
return (bool)this.GetValue(VisibleProperty);
}
set
{
this.SetValue(VisibleProperty, value);
}
}
#endregion
#region Methods
protected override void OnAttached()
{
base.OnAttached();
this._pivotItem = AssociatedObject;
}
private static void VisiblePropertyChanged(DependencyObject dpObj, DependencyPropertyChangedEventArgs change)
{
if (change.NewValue.GetType() != typeof(bool) || dpObj.GetType() != typeof(HideablePivotItemBehavior))
{
return;
}
var behavior = (HideablePivotItemBehavior)dpObj;
var pivotItem = behavior._pivotItem;
// Parent pivot has to be assigned after the visual tree is initialized
if (behavior._parentPivot == null)
{
behavior._parentPivot = (Pivot)behavior._pivotItem.Parent;
// if the parent is null return
if (behavior._parentPivot == null)
{
return;
}
}
var parentPivot = behavior._parentPivot;
if (!(bool)change.NewValue)
{
if (parentPivot.Items.Contains(behavior._pivotItem))
{
behavior._previousPivotItemIndex = parentPivot.Items.IndexOf(pivotItem);
parentPivot.Items.Remove(pivotItem);
behavior._lastPivotItemsCount = parentPivot.Items.Count;
}
}
else
{
if (!parentPivot.Items.Contains(pivotItem))
{
if (behavior._lastPivotItemsCount >= parentPivot.Items.Count)
{
parentPivot.Items.Insert(behavior._previousPivotItemIndex, pivotItem);
}
else
{
parentPivot.Items.Add(pivotItem);
}
}
}
}
#endregion
}
You can remove the pivot item from the parent pivot control
parentPivotControl.Items.Remove(pivotItemToBeRemoved);
Removing PivotItems is easy, but if you want to put them back afterwards I've found that the headers get messed up and start overlapping each other. This also happens if you set the Visibility of a header to Collapsed and then later make it Visible again.
So I solved my particular problem by setting the opacity of each unwanted PivotItem (and its header) to 0.
PivotItem p = (PivotItem)MainPivot.Items.ToList()[indexToHide];
p.Opacity = 0;
((UIElement)p.Header).Opacity = 0;
However, this leaves gaps where the missing PivotItems are.
For me, the gaps were not a problem because I only want to remove items at the end of my PivotItemList, so I get some whitespace between the last and first PivotItems. The problem was, I was still able to swipe to a hidden PivotItem. In order to fix this, I overrode Pivot.SelectionChanged() so that whenever the user swipes to a hidden PivotItem, the code moves on to the next item instead. I had to use a DispatchTimer from within SelectionChanged() and actually move to the next PivotItem from the DispatchTimer callback, since you have to be in the UI thread to change PivotItem.SelectedIndex.
private void MainPivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
t.Stop(); //t is my DispatchTimer, set to 100ms
if (MainPivot.SelectedIndex >= mFirstHiddenPivotItemIndex)
{
//move to the first or last PivotItem, depending on the current index
if (mCurrentSelectedPivotItemIndex == 0)
mPivotItemToMoveTo = mFirstHiddenPivotItemIndex - 1;
else
mPivotItemToMoveTo = 0;
t.Start();
}
mCurrentSelectedPivotItemIndex = MainPivot.SelectedIndex;
}
private void dispatcherTimer_Tick(object sender, EventArgs e)
{
MainPivot.SelectedIndex = mPivotItemToMoveTo;
t.Stop();
}
foreach (PivotItem item in MyPivot.Items.ToList())
{
if (item.Visibility == Visibility.Collapsed)
MyPivot.Items.Remove(item);
}
Setting IsLocked property to true will make all other Pivot items to disappear except the current pivot item.
But this will not hide one particular pivot item of our choice.
To elaborate on the solution of adding/removing pivotItems, rather than hiding them.
Let's say we want the pivotItem to be initially invisible, and appear only on a certain event.
mainPivot.Items.Remove(someTab);
Then to add it again,
if (!mainPivot.Items.Cast<PivotItem>().Any(p => p.Name == "someTab"))
{
mainPivot.Items.Insert(1,someTab);
}
I've used Insert rather than add to control the position where the tab appears.
You have to ensure you don't add the same tab twice, which is the reason for the if statement.
I've modified the Bajena behavior to improve it, solving the issue with losing the original position of the PivotItem when showing/hiding repeteadly and the issue when parentpivot control is null (not initialized yet).
Notice that this behavior must be attached to the Pivot, not to the PivotItem.
Code:
public class PivotItemHideableBehavior : Behavior<Pivot>
{
private Dictionary<PivotItem, int> DictionaryIndexes { get; set; }
public static readonly DependencyProperty VisibleProperty = DependencyProperty.Register(
"Visible",
typeof(bool),
typeof(PivotItemHideableBehavior),
new PropertyMetadata(true, VisiblePropertyChanged));
public static readonly DependencyProperty PivotItemProperty = DependencyProperty.Register(
"PivotItem",
typeof(PivotItem),
typeof(PivotItemHideableBehavior),
new PropertyMetadata(null));
public bool Visible
{
get { return (bool)GetValue(VisibleProperty); }
set { SetValue(VisibleProperty, value); }
}
public PivotItem PivotItem
{
get { return (PivotItem)GetValue(PivotItemProperty); }
set { SetValue(PivotItemProperty, value); }
}
protected override void OnAttached()
{
base.OnAttached();
AssociatedObject.Loaded += AssociatedObject_Loaded;
}
protected override void OnDetaching()
{
base.OnDetaching();
AssociatedObject.Loaded -= AssociatedObject_Loaded;
}
private void AssociatedObject_Loaded(object sender, RoutedEventArgs e)
{
DictionaryIndexes = new Dictionary<PivotItem, int>();
int index = 0;
foreach (PivotItem item in AssociatedObject.Items)
DictionaryIndexes.Add(item, index++);
}
private static void VisiblePropertyChanged(DependencyObject dpObj, DependencyPropertyChangedEventArgs change)
{
var behavior = (PivotItemHideableBehavior)dpObj;
var pivot = behavior.AssociatedObject;
if (!behavior.Visible)
{
if (pivot.Items.Contains(behavior.PivotItem))
pivot.Items.Remove(behavior.PivotItem);
}
else if (!pivot.Items.Contains(behavior.PivotItem))
{
int index = 0;
foreach (var item in behavior.DictionaryIndexes)
{
if (item.Key == behavior.PivotItem)
pivot.Items.Insert(index, behavior.PivotItem);
else if (pivot.Items.Contains(item.Key))
index++;
}
}
}
}
Usage:
<Interactivity:Interaction.Behaviors>
<Behaviors:PivotItemHideableBehavior PivotItem="{x:Bind PivotItemName}" Visible="{Binding IsPivotItemVisible}" />
</Interactivity:Interaction.Behaviors>