c# Windows Foundation why can't I draw a shape # coordinates - c#

W11, VS2022
I'm fairly new to UI design in c#. I'm trying to draw a control at runtime and I can't seem to find the way to specify its x & y properties or set it to a Point.
xaml
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid x:Name="layoutRoot"></Grid>
</Grid>
</Page>
c# method
public MainPage()
{
this.InitializeComponent();
var ellipse1 = new Ellipse
{
Fill = new SolidColorBrush(Windows.UI.Colors.Pink),
Width = 200,
Height = 200
};
layoutRoot.Children.Add(ellipse1);
}
`
Have tried setleft, setright and location but they are all missing.
Thanks in Advance


Change it to Canvas
var ellipse1 = new Ellipse
{
Fill = new SolidColorBrush(Colors.Pink),
Width = 200,
Height = 200
};
int left = 50, top = 50;
Canvas.SetLeft(ellipse1, left); // second option Canvas.SetRight()
Canvas.SetTop(ellipse1, top); // second option Canvas.SetTop()
layoutRoot.Children.Add(ellipse1);
EDIT:
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Canvas x:Name="layoutRoot">
</Canvas>
</Page>

Related

WPF Richtextbox loaded document paragraph borders

I have a UserControl that basically wraps a RichTextBox It looks something like this:
<UserControl x:Class="Installers.Ui.Views.Controls.RichTextBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<UserControl.Resources>
<ResourceDictionary Source="../../Theme/ElementsTheme.xaml"></ResourceDictionary>
</UserControl.Resources>
<RichTextBox x:Name="MyRichTextbox" Background="{StaticResource BackgroundColorBrush}" Foreground="{StaticResource GrayColorBrush}" BorderThickness="0" BorderBrush="Transparent">
</RichTextBox>
</UserControl>
I have some styling in the code behind, something that looks like:
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
var text = GetValue(RTFTextProperty).ToString();
var memoryStream = new MemoryStream(ASCIIEncoding.Default.GetBytes(text));
MyRichTextbox.Selection.Load(memoryStream, DataFormats.Rtf);
MyRichTextbox.IsReadOnly = IsReadOnly;
}
This is the outcome:
Now on to my question: As you can see there are "Boxes" around some of the text, How can I change the color of them to the background color or how can I remove them entirely?

Dragablz not scrollable when using TabStripPlacement left

I'm trying to apply a vertical scrollbar to the Dragablz TabControl. Minimum example:
MainWindow.cs
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
TabablzControl tb = new TabablzControl();
TabItem tabItem;
for (int i = 0; i < 15; i++)
{
tabItem = new TabItem
{
Header = $"Tab_{i}"
};
tb.Items.Add(tabItem);
}
tb.TabStripPlacement = Dock.Left;
MystackPanel.Children.Add(tb);
}
}
MainWindow.xaml:
<Window x:Class="WpfApp3.MainWindow"
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"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:local="clr-namespace:WpfApp3"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<ScrollViewer>
<StackPanel x:Name="MystackPanel">
</StackPanel>
</ScrollViewer>
</Window>
Currently the vertical scrollbar appears only when the stackpanel that holds the TabablzControl is wrapped with the scrollviewer. However, it's still not possible to scroll within the tabs.
I tried also this solution https://stackoverflow.com/a/36919193/9200834 to build a custom control template. This fails, because this Dragablz style is not applicable to the TabItem object.
Does anyone have an idea, how to put a vertical scrollbar to the Dragablz tabs?

Change color from another class is not working

I try to change the color of a canvas by pressing a button using command binding insted of click event to avoid any code behind in the MyView.xaml.cs file. The command is fireing and the messageboxes show the correct color code values before and after changing it so the new color is set but the color of the canvas do not change. If a use a click event and the code behind in the MyView.xaml.cs insted than all work fine but I would like to get it work wiht command bindning and without code behind in the MyView.xaml.cs file. How can I do that and what is that I am not doing right?
MainWindow.xaml
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:View="clr-namespace:WpfApp1.View"
xmlns:ViewModel="clr-namespace:WpfApp1.ViewModel"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525" Background="YellowGreen"
WindowStartupLocation="CenterScreen">
<Window.DataContext>
<ViewModel:MyClass/>
</Window.DataContext>
<View:MyView/>
</Window>
MyView.xaml file
<UserControl x:Class="WpfApp1.View.MyView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:ViewModel="clr-namespace:WpfApp1.ViewModel"
xmlns:View="clr-namespace:WpfApp1.View">
<Canvas Name="MainCanvas" Height="300" Width="502" Background="#FF148B63">
<Button Name="ChangeColorButton" Command="{Binding CommandChangeColor}" Content="new color" Height="25" Width="55" Margin="225,268,225,10"/>
</Canvas>
</UserControl>
MyClass.cs
public class MyClass : MyView
{
List<Color> _listOfColors = new List<Color>();
public MyClass(){ MyInitColor(); }
public ICommand CommandChangeColor
{
get { return new MyCommand(ChangeColor); }
}
public void ChangeColor()
{
MessageBox.Show("Color before: " + MainCanvas.Background.ToString());
Random rnd = new Random();
int i = rnd.Next(_listOfColors.Count - 1);
MainCanvas.Background = new SolidColorBrush(_listOfColors[i]);
MessageBox.Show("Color after: " + MainCanvas.Background.ToString());
}
}

Since you can have many instances of a UserControl, how would MyClass know which instance of MainCanvas it should be updating?
So similar to your binding for CommandChangeColor you should also bind the Background to some property in MyClass. Something like:
Xaml:
<Canvas Name="MainCanvas" Height="300" Width="502" Background="{Binding BackGroundColor}">
<Button Name="ChangeColorButton" Command="{Binding CommandChangeColor}" Content="new color" Height="25" Width="55" Margin="225,268,225,10"/>
</Canvas>
MyClass.cs
public SolidColorBrush BackGroundColor {get;set;}
public void ChangeColor()
{
MessageBox.Show("Color before: " + MainCanvas.Background.ToString());
Random rnd = new Random();
int i = rnd.Next(_listOfColors.Count - 1);
BackGroundColor = new SolidColorBrush(_listOfColors[i]);
MessageBox.Show("Color after: " + MainCanvas.Background.ToString());
}
You will probably also want to implement INotifyPropertyChanged.

Render Xaml Controls from C# code behind in UWP

The Image that I have created from Code behind is visible in my Visual tree but is not rendered on screen when I run my app.
This is my Code Behind
public MainPage()
{
this.InitializeComponent();
//Image that was created in Xaml
image.Source = new BitmapImage(new Uri("ms-appx:///testimage.jpg"));
//Image creation from C# code
Image image1 = new Image();
image1.Width = 200;
image1.Height = 200;
image1.Margin = new Thickness(50, 50, 0, 0);
image1.Source = new BitmapImage(new Uri("ms-appx:///download.jpg"));
//grid is the Grid name in Xaml
grid.Children.Add(image1);
}
This is my XAML
<Page Name="HI"
x:Class="test1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:test1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:Name="grid">
<Image x:Name="image" Visibility="Visible" HorizontalAlignment="Left" Height="200" Margin="10,200,0,0" VerticalAlignment="Top" Width="200"/>
</Grid>
What am I missing here?

Your Xaml isn't complete. You are missing a closing tag for Page.

WPF UserControl Animation in Code-behind Not Working with ContentPresenter

When the code is like this, the animation works as expected.
AnimatedUserControl2.xaml
<UserControl x:Class="WpfPoc20120908.AnimatedUserControl2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300" IsVisibleChanged="AnimatedUserControl2_OnIsVisibleChanged">
<Grid Background="Coral">
<Canvas>
<TextBlock x:Name="MNB" Text="ABCD"/>
</Canvas>
</Grid>
</UserControl>
AnimatedUserControl2.xaml.cs (Partial Code Only)
private void AnimatedUserControl2_OnIsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
{
if (Visibility == Visibility.Visible)
{
var storyboard = new Storyboard();
var visibilityAnimation = new ObjectAnimationUsingKeyFrames();
visibilityAnimation.KeyFrames.Add(new DiscreteObjectKeyFrame(Visibility.Visible,
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0))));
Storyboard.SetTargetProperty(visibilityAnimation, new PropertyPath(VisibilityProperty));
storyboard.Children.Add(visibilityAnimation);
var opacityAnimation = new DoubleAnimation(0, 1, new Duration(TimeSpan.FromSeconds(1)));
Storyboard.SetTargetProperty(opacityAnimation, new PropertyPath(OpacityProperty));
storyboard.Children.Add(opacityAnimation);
var canvasLeftAnimation = new DoubleAnimationUsingKeyFrames();
canvasLeftAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(200,
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0))));
canvasLeftAnimation.KeyFrames.Add(new SplineDoubleKeyFrame(0, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1)),
new KeySpline(new Point(0.25, 0.1),
new Point(0.25, 1))));
Storyboard.SetTargetProperty(canvasLeftAnimation, new PropertyPath(Canvas.LeftProperty));
storyboard.Children.Add(canvasLeftAnimation);
MNB.BeginStoryboard(storyboard, HandoffBehavior.SnapshotAndReplace, false);
}
}
However, when I use a ContentPresenter in the XAML code, the animation does not work at all.
AnimationUserControl2.xaml (1st Revision)
<UserControl x:Class="WpfPoc20120908.AnimatedUserControl2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300" IsVisibleChanged="AnimatedUserControl2_OnIsVisibleChanged">
<Grid Background="Coral">
<Canvas>
<ContentPresenter x:Name="MNB"/>
</Canvas>
</Grid>
</UserControl>
When I try to wrap the ContentPresenter with a Grid, the animation still doesn't work.
AnimationUserControl2.xaml (2nd Revision)
<UserControl x:Class="WpfPoc20120908.AnimatedUserControl2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300" IsVisibleChanged="AnimatedUserControl2_OnIsVisibleChanged">
<Grid Background="Coral">
<Canvas>
<Grid x:Name="MNB">
<ContentPresenter/>
</Grid>
</Canvas>
</Grid>
</UserControl>
Here's the question. How can I get the animation to work with a ContentPresenter?
UPDATE 01
Here's how AnimatedUserControl2 is used.
MainWindow.xaml (Partial Code Only)
<StackPanel Grid.Row="0" Orientation="Vertical">
<usercontrols:AnimatedUserControl2 x:Name="ABCD" Visibility="Hidden">
<TextBlock Text="ABC"/>
</usercontrols:AnimatedUserControl2>
<usercontrols:AnimatedUserControl2 x:Name="EFGH" Visibility="Hidden" Margin="10">
<TextBlock Text="ABC"/>
</usercontrols:AnimatedUserControl2>
</StackPanel>
<Button x:Name="ButtonBeginAnimation" Click="ButtonBeginAnimation_OnClick" Content="Begin Animation" Grid.Row="1"/>
MainWindow.xaml.cs (Partial Code Only)
private void ButtonBeginAnimation_OnClick(object sender, RoutedEventArgs e)
{
ABCD.Visibility = (ABCD.Visibility == Visibility.Visible) ? Visibility.Collapsed : Visibility.Visible;
EFGH.Visibility = (EFGH.Visibility == Visibility.Visible) ? Visibility.Collapsed : Visibility.Visible;
}

So the problem is with how you're using your user control - you simply override content once specified inside UserControl xaml definition... anyway..
Try this approach (animation works on my machine so suppose to work on yours as well ;))
<UserControl x:Class="WpfApplication11.UserControl1"
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"
d:DesignHeight="300"
d:DesignWidth="300"
mc:Ignorable="d">
<UserControl.Template>
<ControlTemplate TargetType="UserControl">
<Grid Background="Coral">
<Canvas>
<ContentPresenter x:Name="MNB" Content="{TemplateBinding Content}"/>
</Canvas>
</Grid>
</ControlTemplate>
</UserControl.Template>
And in animation itself:
private void AnimatedUserControl2_OnIsVisibleChanged(object sender, EventArgs e)
{
var mnb = Template.FindName("MNB", this) as FrameworkElement;
if (mnb == null)
{
return;
}
if (Visibility == Visibility.Visible)
{
var storyboard = new Storyboard();
var visibilityAnimation = new ObjectAnimationUsingKeyFrames();
visibilityAnimation.KeyFrames.Add(new DiscreteObjectKeyFrame(Visibility.Visible,
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0))));
Storyboard.SetTargetProperty(visibilityAnimation, new PropertyPath(VisibilityProperty));
storyboard.Children.Add(visibilityAnimation);
var opacityAnimation = new DoubleAnimation(0, 1, new Duration(TimeSpan.FromSeconds(1)));
Storyboard.SetTargetProperty(opacityAnimation, new PropertyPath(OpacityProperty));
storyboard.Children.Add(opacityAnimation);
var canvasLeftAnimation = new DoubleAnimationUsingKeyFrames();
canvasLeftAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(200,
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0))));
canvasLeftAnimation.KeyFrames.Add(new SplineDoubleKeyFrame(0, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1)),
new KeySpline(new Point(0.25, 0.1),
new Point(0.25, 1))));
Storyboard.SetTargetProperty(canvasLeftAnimation, new PropertyPath(Canvas.LeftProperty));
storyboard.Children.Add(canvasLeftAnimation);
mnb.BeginStoryboard(storyboard, HandoffBehavior.SnapshotAndReplace, false);
}
}

Categories

Resources