Can't set InkToolbarRulerButton background as transparent using InkToolbar - xaml

I create a ink toolbar, and the initial controls are all except pens.
I can set the eraser button's background as transparent, but apply to the ruler button.
Is this a ink toolbar bug?
<InkToolbar Background="Transparent" InitialControls="AllExceptPens" TargetInkCanvas="{x:Bind inkCanvas}">
<InkToolbarEraserButton Background="Transparent"/>
<InkToolbarRulerButton Background="Transparent"/>
</InkToolbar>

The rule button is actually the InkToolbarStencilButton in the visual tree, not InkToolbarRulerButton. So that update your code snippet as follows will work.
<InkToolbar
Background="Transparent"
InitialControls="AllExceptPens"
<InkToolbarEraserButton Background="Red" />
<!--<InkToolbarRulerButton Background="Red" Foreground="Blue" />-->
<InkToolbarStencilButton Background="Red"></InkToolbarStencilButton>
</InkToolbar>

Related

How do I edit the header of an Expander control in WinUI 3?

When I edit properties of the Expander control, the effects seem to only apply to the content of the Expander, rather than the header.
E.g. if I set the BorderBrush as black and the Background as aquamarine, those properties only apply to the content:
<Expander Header="Expander" BorderBrush="Black" Background="Aquamarine">
<TextBlock Text="Here is some text"/>
</Expander>
See what the above code looks like
I know I can use this syntax:
<Expander>
<Expander.Header>
<!--XAML content here-->
</Expander.Header>
</Expander>
and put XAML content inside the header. So I tried putting a StackPanel in there, and editing the border and background on that—but it only applied to a small portion of the Expander header, and didn't cover the drop down caret, for example.
How do I change properties of the header?
You can edit the default style but this might be easier:
<Border
HorizontalAlignment="Left"
VerticalAlignment="Center"
Background="SkyBlue"
BorderBrush="HotPink"
BorderThickness="1"
CornerRadius="{StaticResource ControlCornerRadius}">
<Expander
Content="CONTENT"
Header="HEADER" />
</Border>
You just need to set the Border's properties.

How to resize NavigationView and SplitView in UWP

I want to enable user to resize the NavigationView in my UWP app. Couldn't find any resources how I could do that.
I see some of the apps have "Resizable splitView" but for SplitView also, I cannot see any such resize property exposed to set by default.
Pls help.
Thanks in Advance
There are no such property can resize SplitView and NavigationView, you need to custom layout to implement a similar effect. You could use Slider control and bind the OpenPaneLength Property of SplitView to Slider.Value to do this. Please refer to the following code.
<Grid>
<SplitView Name="CoreSplitView"
DisplayMode="Inline"
IsPaneOpen="True"
OpenPaneLength="{Binding Value, ElementName=MasterSlider, Mode=OneWay}">
<SplitView.Pane>
<Grid Name="PaneGrid" Background="Gray">
<Slider Name="MasterSlider"
MinWidth="480"
VerticalAlignment="Stretch"
Maximum="480"
Minimum="10"
Opacity="0"
Value="150"
/>
<StackPanel Name="PaneStackPanel"
Margin="0,0,10,0" Background="LightGray">
<TextBlock TextWrapping="Wrap" Text="Use a slider when you want your users to be able to set defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings).A slider is a good choice when you know that users think of the value as a relative quantity" />
</StackPanel>
</Grid>
</SplitView.Pane>
<Grid Name="ContentGrid" Background="LightSteelBlue">
</Grid>
</SplitView>
</Grid>
The StackPanel that is directly under our slider, acts like a cover for our Slider. Notice the StackPanel has Margin="0,0,10,0", this translates to a 10px distance from the right wall, which allows the Slider area to be exposed as a gray strip that is used to drag the Pane, again the 10px is arbitrary but it has to match the Minimum of the Slider.

OxyPlot in Xamarin Forms WPF project, how to change tracker text color

I'm using OxyPlot in a Xamarin Forms project.
In WPF, the tracker (popup when I click on a datapoint) has a white background with yellow text, making it impossible to see.
In UWP however, it is just fine with a yellow background and black text.
How can I change the font color of the tracker to black?
xmlns:oxy="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms"
<oxy:PlotView Model="{Binding MyModel}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
</oxy:PlotView>
You can change the default colors of Oxyplot Tracker by modifying the Control Template. For example,
<oxy:PlotView Height="500" Width="500" Model="{Binding MyModel}">
<oxy:PlotView.DefaultTrackerTemplate>
<ControlTemplate>
<oxy:TrackerControl Position="{Binding Position}" LineExtents="{Binding PlotModel.PlotArea}">
<oxy:TrackerControl.Background>
<SolidColorBrush Color="LightBlue" />
</oxy:TrackerControl.Background>
<oxy:TrackerControl.Content>
<TextBlock Text="{Binding}" Margin="7" Foreground="Black" />
</oxy:TrackerControl.Content>
</oxy:TrackerControl>
</ControlTemplate>
</oxy:PlotView.DefaultTrackerTemplate>
</oxy:PlotView>
Of course, you can set the binding as well in the above, but for the sake of example, given the color directly in above example.

Disabling snap points/bounce back on ScrollViewer in XAML

I have a Grid with an Image inside a ScrollViewer. The user needs to be able to zoom in and out of the image. The problem is when I zoom the scrollviewer seems to snap back to the left side of the image although I want the viewer to stay at the zoomed position. The XAML code looks like this
<ScrollViewer Name="ScrollViewer" HorizontalSnapPointsType="None" VerticalSnapPointsType="None" ZoomSnapPointsType="None">
<Grid x:Name="RenderedGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Image x:Name="RenderedImage" Stretch="Fill" />
<canvas:CanvasControl Name="DrawingCanvas" Draw="CanvasControl_Draw" ClearColor="Transparent"/>
</Grid>
</ScrollViewer>
I thought it would be enough with setting the SnapPointType to "None", but that doesn't seem to work.
I wrote a blog post exactly about this issue: Why is my zoomable ScrollViewer snapping the image to the left?
The first part of the problem is the ScrollViewer itself, it needs the HorizontalScrollBarVisibility and VerticalScrollBarVisibility set to Auto.
<ScrollViewer ZoomMode="Enabled"
MinZoomFactor="1"
MaxZoomFactor="4"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
For that to really work, you'll need to limit the Image size to some width/height, like this:
<Image Source="{Binding ImageUri}"
MaxWidth="{Binding DataContext.PageWidth, ElementName=MyPage}"
MaxHeight="{Binding DataContext.PageHeight, ElementName=MyPage}"/>
You can find more details in my blog post, and full source code on GitHub.

How to change color of Indeterminate ProgressBar in Windows phone

How can I change color of Indeterminate ProgressBar in Windows phone?
I have tried setting the background and border brush to null and change the foreground to black:
<ProgressBar Minimum="0" Maximum="100" IsIndeterminate="True" Foreground="Black" Background="{x:Null}" BorderBrush="{x:Null}"/>
But when I run it, it still has blue as the animation dots moving across the screen.
You need to change the <Style>
Document Outline > Right Click Progress Bar > Edit Template -> Edit A Copy
Look for
<Rectangle x:Name="E1" Fill="{ThemeResource ProgressBarIndeterminateForegroundThemeBrush}"/>
Change the Fill to any color you like
Repeat for Rectangle E2,E3,E4,E5
Or if you can just override ProgressBarIndeterminateForegroundThemeBrush
In App.xaml, like so
<Application.Resources>
<SolidColorBrush x:Key="ProgressBarIndeterminateForegroundThemeBrush" Color="Yellow" />
</Application.Resources>