[英]How to draw a rectangle from user input using WPF
我希望用戶輸入矩形的寬度和高度,並且希望在輸入數字后立即顯示矩形。 我不想按任何按鈕來顯示矩形。
當我輸入高度和寬度的數字時,矩形代碼可以工作,但是當我從用戶輸入文本框中將其更改為變量時,屏幕上什么也沒有出現。
這是我的XAML:
TextBox Text="{Binding xcoord, Mode=OneWay}" Name="x" Grid.Row="1" Height="20" Width="40" Grid.Column="2"></TextBox>
TextBox Text="{Binding ycoord, Mode=OneWay}" Name="y" Grid.Row="2" Height="20" Width="40" Grid.Column="2"></TextBox
這是我的C#:
public FEModel()
{
InitializeComponent();
CreateARectangle();
}
private double xval;
public double xcoord
{
get { return xval; }
}
private double yval;
public double ycoord
{
get { return yval; }
}
public void CreateARectangle()
{
// Creates a Rectangle
Rectangle rect = new Rectangle();
rect.Height = ycoord;
rect.Width = xcoord;
// Create a Brush
SolidColorBrush colorbrush= new SolidColorBrush();
colorbrush.Color = Colors.Red;
colorbrush.Opacity = .3;
SolidColorBrush blackBrush = new SolidColorBrush();
blackBrush.Color = Colors.Black;
// Set Rectangle's width and color
rect.StrokeThickness = 1;
rect.Stroke = blackBrush;
// Fill rectangle with color
rect.Fill =colorbrush;
// Add Rectangle to the Grid.
can.Children.Add(rect);
}
我希望矩形在用戶輸入x和y坐標后立即出現在畫布上,但是什么也不會發生。
您需要對文本框使用兩種方式綁定。
這是一個完整的示例。
Window Xaml:請注意,文本框的默認更新觸發器是“ LostFocus”。 在我的示例中,我將其設置為“ PropertyChanged”,因此,只要用戶更改了值,矩形就會立即更新。
<Window x:Class="WpfApp9.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:local="clr-namespace:WpfApp9"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid Name="can">
<TextBox Text="{Binding xcoord, UpdateSourceTrigger=PropertyChanged}" Name="x" Height="20" Width="40" Margin="40,51,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBox Text="{Binding ycoord, UpdateSourceTrigger=PropertyChanged}" Name="y" Height="20" Width="40" Margin="40,81,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Grid>
</Window>
這是背后的代碼。 我更改了代碼以調整矩形大小,而不是每次更改值時都創建一個新的矩形。
using System.Windows;
using System.Windows.Media;
using System.Windows.Shapes;
namespace WpfApp9
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = this;
}
private double xval = 50;
public double xcoord
{
get=> xval;
set
{
xval = value;
CreateARectangle();
}
}
private double yval = 50;
public double ycoord
{
get => yval;
set
{
yval = value;
CreateARectangle();
}
}
Rectangle rect = null;
public void CreateARectangle()
{
if (rect == null)
{
// Creates a Rectangle
rect = new Rectangle();
rect.Height = ycoord;
rect.Width = xcoord;
// Create a Brush
SolidColorBrush colorbrush = new SolidColorBrush();
colorbrush.Color = Colors.Red;
colorbrush.Opacity = .3;
SolidColorBrush blackBrush = new SolidColorBrush();
blackBrush.Color = Colors.Black;
// Set Rectangle's width and color
rect.StrokeThickness = 1;
rect.Stroke = blackBrush;
// Fill rectangle with color
rect.Fill = colorbrush;
// Add Rectangle to the Grid.
can.Children.Add(rect);
}
else
{
rect.Height = ycoord;
rect.Width = xcoord;
}
}
}
}
另外,您也可以在XAML中創建矩形,直接綁定到文本框值。
<TextBox Text="50" Name="x" Height="20" Width="40" Margin="10,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBox Text="50" Name="y" Height="20" Width="40" Margin="10,35,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin="-0.017,-0.629"/>
<Rectangle Stroke="Black" Fill="#4CFF0000" Margin="60,5,0,0" Width="{Binding ElementName=x, Path=Text, UpdateSourceTrigger=PropertyChanged}" Height="{Binding ElementName=y, Path=Text, UpdateSourceTrigger=PropertyChanged}"/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.