Textbox is becoming readonly in flyout, UWP store app - c#

In button flyout I am using one usercontrol inside that I have textbox. when running the app the textbox is appearing as readonly, don't know why I am getting this issue. nowhere I am setting readonly.
<TextBox Margin="2" Height="32"
MaxHeight="60"
TextWrapping="Wrap"
HorizontalAlignment="Stretch"
TextAlignment="Left"
Text="ramesh"
Style="{x:Null}"/>

Figure out the issue it's because of anniversary update.
https://blogs.msdn.microsoft.com/wsdevsol/2016/09/14/combobox-from-an-appbarbutton-loses-mouse-input-on-1607/
I created attached property for solution given in above link. Below is the attached property
public class CompatExtensions
{
public static bool GetAllowFocusOnInteraction(DependencyObject obj)
{
return (bool)obj.GetValue(AllowFocusOnInteractionProperty);
}
public static void SetAllowFocusOnInteraction(DependencyObject obj, bool value)
{
obj.SetValue(AllowFocusOnInteractionProperty, value);
}
// Using a DependencyProperty as the backing store for AllowFocusOnInteraction.
// This enables animation, styling, binding, etc...
public static readonly DependencyProperty AllowFocusOnInteractionProperty =
DependencyProperty.RegisterAttached("AllowFocusOnInteraction",
typeof(bool),
typeof(CompatExtensions),
new PropertyMetadata(0, AllowFocusOnInteractionChanged));
private static bool allowFocusOnInteractionAvailable =
Windows.Foundation.Metadata.ApiInformation.IsPropertyPresent(
"Windows.UI.Xaml.FrameworkElement",
"AllowFocusOnInteraction");
private static void AllowFocusOnInteractionChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (allowFocusOnInteractionAvailable)
{
var element = d as FrameworkElement;
if (element != null)
{
element.AllowFocusOnInteraction = (bool)e.NewValue;
}
}
}
}
And an example of it used:
<AppBarButton local:CompatExtensions.AllowFocusOnInteraction="True" Icon="Setting">
<AppBarButton.Flyout>
<Flyout>
<StackPanel Orientation="Vertical" >
<ComboBox>
<ComboBoxItem Content="Red" IsSelected="True" />
<ComboBoxItem Content="Green" />
<ComboBoxItem Content="Blue"/>
</ComboBox>
</StackPanel>
</Flyout>
</AppBarButton.Flyout>
</AppBarButton>

Difficult to be sure about any answer given how the few details have been provided but I once saw something similar due to sizing of the TextBox. The UWP text box has a "delete" button (a small cross) at the end of the box to delete the current content. When the TextBox was sized vertically, the delete button scaled to take up the entirety of the TextBox thereby making it look read only.
If you're facing a similar issue, try setting AcceptsReturn="True" and InputScope="Text" on the TextBox.

Related

UWP PivotItem Header visibility binding

I'm doing a binding in UWP, the listview is not showing(so it's working fine), but the header is still on the view.
So the problem is that the header is not getting the binding from the PivotItem, what can be the problem?
<PivotItem Header="Hello" Visibility="{Binding isVisible, Converter={StaticResource Visibility}}">
<ListView ItemsSource="{Binding myList}"/>
</PivotItem>
This is actually a bit tricky. Setting Visibility on a PivotItem does indeed hide only the contents of the item, not the PivotItem itself. That said, you can hide it from the code-behind by removing it from the pivot completely:
MyPivot.Items.Remove(HideablePivotItem);
The problem is now the fact that you need to trigger it on binding change. For that purpose I suggest you use a custom Behavior and a CallMethodAction.
First install the Microsoft.Xaml.Behaviors.Uwp.Managed from NuGet (right-click your project, click Manage NuGet Packages... find the package using search and click Install.
Now, create a new class DataChangeTriggerBehavior class:
public class DataChangeTriggerBehavior : Trigger<FrameworkElement>
{
public static readonly DependencyProperty BindingProperty = DependencyProperty.Register(
nameof(Binding), typeof(object), typeof(DataChangeTriggerBehavior), new PropertyMetadata(null, BindingChanged));
public object Binding
{
get => (object)GetValue(BindingProperty);
set => SetValue(BindingProperty, value);
}
private static void BindingChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs args)
{
DataChangeTriggerBehavior changeTrigger = (DataChangeTriggerBehavior)dependencyObject;
if (changeTrigger.AssociatedObject == null) return;
Interaction.ExecuteActions(changeTrigger.AssociatedObject, changeTrigger.Actions, args);
}
}
This behavior will observe a binding and trigger its associated actions whenever the binding changes.
Now, update your Page element as follows:
<Page
...
x:Name="Page"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
xmlns:customBehavior="using:XXX"
mc:Ignorable="d">
Where XXX is the namespace where your behavior is defined.
Now use the behavior in your Pivot:
<Pivot x:Name="MyPivot">
<interactivity:Interaction.Behaviors>
<local:DataChangeTriggerBehavior Binding="{Binding isVisible}">
<core:CallMethodAction MethodName="TogglePivotItem"
TargetObject="{Binding ElementName=Page}" />
</local:DataChangeTriggerBehavior>
</interactivity:Interaction.Behaviors>
<PivotItem Header="Hello" Visibility="Collapsed" x:Name="HideablePivotItem">
<ListView ItemsSource="{Binding myList}"/>
</PivotItem>
</Pivot>
Finally you must define the TogglePivotItem method in your page's code-behind:
private int originalPosition = 0;
public void TogglePivotItem()
{
if (MyPivot.Items.Contains(HideablePivotItem))
{
//store the position of the item to be readded later
originalPosition = MyPivot.Items.IndexOf(HideablePivotItem);
MyPivot.Items.Remove(HideablePivotItem);
}
else
{
MyPivot.Items.Insert(originalPosition, HideablePivotItem);
}
}
I am storing the original position of the PivotItem so that it can be re-added to the same place again.

PropertyChangedCallback not firing when respective property bound to ScrollBar

I have a rather simple UserControl which I would like to extend with the DependencyProperty. The relevant code of the control is as follows:
public partial class CompassControl : UserControl
{
public static readonly DependencyProperty AngleProperty =
DependencyProperty.Register("Angle", typeof(Double), typeof(CompassControl),
new FrameworkPropertyMetadata( 0.0, FrameworkPropertyMetadataOptions.AffectsRender,
new PropertyChangedCallback(OnAngleChanged)));
private static void OnAngleChanged(DependencyObject target, DependencyPropertyChangedEventArgs e)
{
((CompassControl)target).SetImageAngle((Double)e.NewValue);
}
public CompassControl( )
{
InitializeComponent( );
}
public Double Angle
{
get { return (Double)GetValue(AngleProperty); }
set { SetValue(AngleProperty, value); }
}
This control is being used on a simple form; the relevant XAML as follows:
<DockPanel DockPanel.Dock="Bottom">
<DockPanel>
<TextBlock DockPanel.Dock="Left"
TextAlignment="Center" FontWeight="Bold" FontSize="12"
Padding="0,4,0,0" HorizontalAlignment="Left"
Height="22" Width="60" Margin="10,0,0,0"
Text="{Binding ElementName=scrollBarAngle, Path=Value}">
</TextBlock>
<ScrollBar DockPanel.Dock="Left" Name="scrollBarAngle" Orientation="Horizontal"
Height="22" Margin="10,0"
Maximum="360.0" Minimum="0.0" SmallChange="1.0" Value="0.0"
ValueChanged="scrollBarAngle_ValueChanged" />
</DockPanel>
</DockPanel>
<ctl:CompassControl DockPanel.Dock="Top" Name="compassControl"
Margin="5" Width="Auto" Height="Auto"
Angle="{Binding ElementName=scrollBarAngle, Path=Value}"
/>
</DockPanel>
The "Text" property of the TextBox and the "Angle" property of my control are bound to the "Value" property of the ScrollBar using the following binding:
"{Binding ElementName=scrollBarAngle, Path=Value}"
When I scroll the ScrollBar, the Text field is updated as expected, but the Angle does not change - the OnAngleChanged callback is not being called!
However if I directly change the Angle property in the ScrollBar's ValueChanged event everything works fine - the property got changed and the respective callback fired:
private void scrollBarAngle_ValueChanged( object sender, RoutedPropertyChangedEventArgs<double> e )
{
compassControl.Angle = e.NewValue;
}
Please help resolve this issue!
Thank you,
--Alex
My apologies - the problem was not in the code, but in the environment! I had several copies of VS2013 open, the project was open in two of them. Anyway, after reading Clemens comment indicating that my problem is not reproducible, I closed all instances of VS, then started the fresh instance, opened the project - and everything worked fine!
Thank you!

ZoomExtents method call works different than activating ZoomExtents through gesture

I've been working on a small 3D preview window in a MVVM style application... The view is created then its data context is set. Therefore it seems that ZoomExtentsWhenLoaded="True" doesn't seem to help do what I need. I need something like, ZoomExtentsWhenDataContextChanges.
Interestingly, I've found that if I use a mouse gesture like the one defined below, I can physically click on the HelixViewport3D and it will perform a ZoomExtents.
HelixViewport3D.ZoomExtentsGesture = new MouseGesture(MouseAction.LeftDoubleClick);
However, if do something like this...
HelixViewport3D.DataContextChanged += (o, e) => ResetCamera();
private void ResetCamera()
{
var dc = HelixViewport3D.DataContext as WellSurveyPlot3DViewModel;
HelixViewport3D.ResetCamera();
HelixViewport3D.Camera = dc.PerspectiveCamera;
HelixViewport3D.ZoomExtents();
}
The viewport does zoom, it just doesn't center itself, like it does when activating ZoomExtents when using the mouse gesture.
I tried ResetCamera, and several other things... What is the standard way of dealing with keeping a viewport around and swapping out the DataContext instead of creating a new one each time?
I fixed this with an attached property. I read through the HelixViewport3D source code and got this idea, after noticing how the camera works. It seems an update to the default camera through a property binding doesn't really do anything after the control is initialized.
public static class HelixViewport3DZoomExtent
{
private static readonly Type OwnerType = typeof(HelixViewport3DZoomExtent);
public static readonly DependencyProperty ZoomExtentsOnUpdateProperty = DependencyProperty.RegisterAttached("ZoomExtentsOnUpdate", typeof(bool), OwnerType, new PropertyMetadata(false, OnDataContextChanged));
public static bool GetZoomExtentsOnUpdate(DependencyObject obj)
{
return (bool)obj.GetValue(ZoomExtentsOnUpdateProperty);
}
public static void SetZoomExtentsOnUpdate(DependencyObject obj, bool value)
{
obj.SetValue(ZoomExtentsOnUpdateProperty, value);
}
private static void OnDataContextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var viewport = d as HelixViewport3D;
if (viewport == null) return;
if (viewport.DataContext == null) return;
viewport.Camera = viewport.DefaultCamera;
viewport.ZoomExtents();
}
}
Here is the Xaml
<Border BorderBrush="Black" BorderThickness="1">
<Grid>
<h:HelixViewport3D Name="HelixViewport3D"
PanGesture="LeftClick"
DataContext="{Binding PreviewPlot, UpdateSourceTrigger=PropertyChanged}"
DefaultCamera="{Binding PerspectiveCamera, UpdateSourceTrigger=PropertyChanged}"
services:HelixViewport3DZoomExtent.ZoomExtentsOnUpdate="{Binding RelativeSource={RelativeSource AncestorType={x:Type views:WellSurveyPlot3DPreview}},
Path=DataContext.PreviewUpdatedReZoom, UpdateSourceTrigger=PropertyChanged}">
<h:SunLight/>
<h:TubeVisual3D Path="{Binding TubePath}" Diameter="75" ThetaDiv="12" IsPathClosed="False" Fill="LightGray"/>
<h:GridLinesVisual3D Width="{Binding GridLength}" Length="{Binding GridLength}" MajorDistance="{Binding MajorGridLines}" Thickness="25"
MinorDistance="{Binding MajorGridLines, UpdateSourceTrigger=PropertyChanged}" LengthDirection="1,0,0" Normal="0,0,1"
Center="{Binding BottomPlaneCenter,UpdateSourceTrigger=PropertyChanged}" Fill="Red" />
<h:GridLinesVisual3D Width="{Binding GridLength}" Length="{Binding GridLength, UpdateSourceTrigger=PropertyChanged}" LengthDirection="0,0,1" Normal="1,0,0" Thickness="25"
MajorDistance="{Binding MajorGridLines}" MinorDistance="{Binding MajorGridLines}"
Center="{Binding BackLeftPlaneCenter, UpdateSourceTrigger=PropertyChanged}" Fill="Blue" />
<h:GridLinesVisual3D Width="{Binding GridLength}" Length="{Binding GridLength, UpdateSourceTrigger=PropertyChanged}" LengthDirection="1,0,0" Normal="0,1,0" Thickness="25"
MajorDistance="{Binding MajorGridLines}" MinorDistance="{Binding MajorGridLines}"
Center="{Binding BackRightPlaneCenter,UpdateSourceTrigger=PropertyChanged}" Fill="Green" />
</h:HelixViewport3D>
<Button Content="Open Well Viewer" HorizontalAlignment="Left" VerticalAlignment="Top" Command="{Binding OpenWindowCmd}"/>
</Grid>
</Border>
In my view model I have to toggle my PreviewUpdateReZoom property.
private void LoadSurveyPoints(List<WellSurveyPointCalculated> surveyPoints)
{
_coordinatesCalculator = _calcGlobalCoordsFactory.Create(surveyPoints);
_wellXyzCoordinates = _coordinatesCalculator.PlotGlobalCoordinates(100).ToList();
PreviewPlot = WellSurveyPlot3DViewModel();
PreviewUpdatedReZoom = false;//Toggle true false to send property changed and get attached property to fire.
PreviewUpdatedReZoom = true;
}
This now works such that every new item drawn into the viewport has the correct camera settings and zooms to extents...

Binding to RichTextBox Blocks property

I would like to bind directly to the Blocks property of a RichTextBox in my Xaml. This is not possible as the Blocks property is read only. I can bind directly to an individual run:
<RichTextBox x:Name="MyRichTextBox" FontSize="36" Margin="10" Foreground="White">
<Paragraph>
<Run Text="{Binding MyObject.Text}" Foreground="Yellow"/>
<Run Text="{Binding MyObject.Text}" Foreground="Cyan"/>
</Paragraph>
</RichTextBox>
I would like to do something like:
<RichTextBox x:Name="MyRichTextBox" Blocks="{Binding MyObject.RichTextBlocks}" FontSize="36" Margin="10" Foreground="White"/>
Particularly as I don't know in advance how many blocks will be returned from the binding object.
Is the correct way to achieve this to create an Attached Behaviour for the RichTextBox with a RichTextBlocks property that when being set enumerates through the blocks and calls RichTextBox.Blocks.Add() for each one?
I am new to C#, .NET and XAML so please excuse the elementary question and a simply explained answer would be greatly appreciated.
With the pointers from #Nogard and the other post, I created my own class with a Dependency Property called RichText. Have posted here in case it is of use to anyone else.
public class MyRichTextBox : RichTextBox
{
public static readonly DependencyProperty RichTextProperty = DependencyProperty.Register("RichText", typeof(Paragraph), typeof(MyRichTextBox), new PropertyMetadata(null, RichTextPropertyChanged));
public Paragraph RichText
{
get
{
return (Paragraph)GetValue(RichTextProperty);
}
set
{
SetValue(RichTextProperty, value);
}
}
private static void RichTextPropertyChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
{
MyRichTextBox richTextBox = (MyRichTextBox)dependencyObject;
Paragraph paragraph = (Paragraph)dependencyPropertyChangedEventArgs.NewValue;
// Remove any existing content from the text box
richTextBox.Blocks.Clear();
// Add the paragraph to the text box
richTextBox.Blocks.Add(paragraph);
}
}
}
and added this to my xaml...
<sub:MyRichTextBox x:Name="MyRichTextOverlay" RichText="{Binding CurrentOverlay.RichTextParagraph}" VerticalAlignment="Top" FontSize="36" Margin="10" Foreground="White" HorizontalAlignment="Center" TextWrapping="Wrap" TextAlignment="Center"/>

Switch on animation on Image from ViewModel

After getting the animation on an image to run
which I got from here: Animate image in a button
I want to be able to switch the animation on and off, depending
on a button click from outside, i.e. from the ViewModel
So I added a new DependencyProperty to the Bahavior (with all those things that are needed here)
public static readonly DependencyProperty IsShakingProperty =
DependencyProperty.Register(IsShakingName,
typeof(bool),
typeof(ShakeBehavior),
new PropertyMetadata(DefaultIsShaking));
I have added a new public property to my ViewModel
public bool IsShaking { get; set; }
But what can I do to switch the animation on and off, depending on the
ViewModel property set to true or false? (I want to control the animation
on a button click)
Here is some of the code of which i think it is relevant
private Timeline CreateAnimationTimeline()
{
DoubleAnimationUsingKeyFrames animation = new DoubleAnimationUsingKeyFrames();
animation.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("(0).(1)", UIElement.RenderTransformProperty, RotateTransform.AngleProperty));
int keyFrameCount = 8;
double timeOffsetInSeconds = 0.25;
double totalAnimationLength = keyFrameCount * timeOffsetInSeconds;
double repeatInterval = RepeatInterval;
bool isShaking = IsShaking;
// Can't be less than zero and pointless to be less than total length
if (repeatInterval < totalAnimationLength)
repeatInterval = totalAnimationLength;
animation.Duration = new Duration(TimeSpan.FromSeconds(repeatInterval));
int targetValue = 12;
for (int i = 0; i < keyFrameCount; i++)
animation.KeyFrames.Add(new LinearDoubleKeyFrame(i % 2 == 0 ? targetValue : -targetValue, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(i * timeOffsetInSeconds))));
animation.KeyFrames.Add(new LinearDoubleKeyFrame(0, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(totalAnimationLength))));
return animation;
}
Here is the part of my XAML:
<ListBox.ItemTemplate>
<DataTemplate>
<Button Focusable="False" Command="{Binding ClickToolCommand}" Grid.Row="{Binding Path=Row}" Grid.Column="{Binding Path=Col}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0">
<Image Source="myImage.png" Grid.Row="{Binding Path=Row}" Grid.Column="{Binding Path=Col}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0">
<i:Interaction.Behaviors>
<local:ShakeBehavior RepeatInterval="1" SpeedRatio="3.0" IsShaking="{Binding Path=IsShaking}"/>
</i:Interaction.Behaviors>
</Image>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
Perhaps a DataTrigger can help, as pointed out in other SOs, but I do not have a storyboard inside my XAML, as I have a custom Behavior
Any input highly appreciated!
Firstly, let me repeat what I said in the original post that started this whole thing. Doing a "shaky" image button becomes a whole lot simpler if you just use a custom control. Also, using a shaky image button as "a way to engage a users attention" is a horrible idea that reminds me of 1990's website design. In addition, there is a small flaw in the implementation you copied, there is no exit action on the trigger that was created. Regardless, here is how to do what you require:
Create an attached property as follows:
public static bool GetStopAnimating(DependencyObject obj)
{
return (bool)obj.GetValue(StopAnimatingProperty);
}
public static void SetStopAnimating(DependencyObject obj, bool value)
{
obj.SetValue(StopAnimatingProperty, value);
}
// Using a DependencyProperty as the backing store for StopAnimating. This enables animation, styling, binding, etc...
public static readonly DependencyProperty StopAnimatingProperty =
DependencyProperty.RegisterAttached("StopAnimating", typeof(bool), typeof(ShakeBehavior), new UIPropertyMetadata(true));
Then replace the existing "OnAttach" method with the folllowing:
private BeginStoryboard _beginStoryBoard;
private RemoveStoryboard _removeStoryboard;
protected override void OnAttached()
{
_orignalStyle = AssociatedObject.Style;
_beginStoryBoard = new BeginStoryboard { Storyboard = CreateStoryboard() };
_beginStoryBoard.Name = "terribleUi";
_removeStoryboard = new RemoveStoryboard();
_removeStoryboard.BeginStoryboardName = _beginStoryBoard.Name;
AssociatedObject.Style = CreateShakeStyle();
AssociatedObject.Style.RegisterName("terribleUi", _beginStoryBoard);
}
Then instead of having the shaking trigger based off the visibility of the button, change it to work off your attached property:
private Trigger CreateTrigger()
{
Trigger trigger = new Trigger
{
Property = StopAnimatingProperty,
Value = false,
};
trigger.EnterActions.Add(_beginStoryBoard);
trigger.ExitActions.Add(_removeStoryboard);
return trigger;
}
Then you use it as follows:
<Button Height="50" Width="150" >
<StackPanel>
<Image Source="\Untitled.png" local:ShakeBehavior.StopAnimating="{Binding YourPropertyToStopTheShaking}">
<i:Interaction.Behaviors>
<local:ShakeBehavior RepeatInterval="5.0" SpeedRatio="3.0" />
</i:Interaction.Behaviors>
</Image>
</StackPanel>
</Button>

Categories