使用滑块制作简单图形

Question

我想使用滑块创建一个同时包含摄氏和华氏度值的简单图形，并在移动滑块时进行更新。现在，当我移动滑块时，将显示并更新华氏温度的图形，但不会显示摄氏温度的图形。滑块在XAML中的最小值为“ 0”，最大值为“ 100”。 定位WPF 。

我在做什么错？

编辑：添加了XAML代码+目标

Edit2 ：将更新的代码置于原始代码下方

<Window x:Class="O6._4.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:O6._4"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<Grid>
    <Button Content="Calculate" HorizontalAlignment="Left" Margin="30,75,0,0" VerticalAlignment="Top" Width="75" Name="CalculateButton" Click="CalculateButton_Click" HorizontalContentAlignment="Center"/>
    <Button Content="Clear" HorizontalAlignment="Left" Margin="30,105,0,0" VerticalAlignment="Top" Width="75" Name="ClearButton" Click="ClearButton_Click" HorizontalContentAlignment="Center"/>

    <Label Content="xxx" HorizontalAlignment="Left" Margin="130,32,0,0" VerticalAlignment="Top" Name="fahrenheitLabel"/>
    <TextBlock HorizontalAlignment="Left" Margin="130,10,0,0" TextWrapping="Wrap" Text="° Fahrenheit" VerticalAlignment="Top"/>

    <Slider HorizontalAlignment="Left" Margin="30,145,0,0" VerticalAlignment="Top" Width="127" Name="celsiusSlider" ValueChanged="celsiusSlider_ValueChanged" Minimum="0"  Maximum="100"/>
    <Label Content="xxx" HorizontalAlignment="Left" Margin="30,168,0,0" VerticalAlignment="Top" Name="celsiusLabel"/>

    <Canvas HorizontalAlignment="Left" Height="250" Margin="220,40,0,0" VerticalAlignment="Top" Width="250" Name="paperCanvas" Background="LightGray"/>
    <TextBlock HorizontalAlignment="Left" Margin="250,10,0,0" TextWrapping="Wrap" Text="°C" VerticalAlignment="Top"/>
    <TextBlock HorizontalAlignment="Left" Margin="315,10,0,0" TextWrapping="Wrap" Text="°F" VerticalAlignment="Top"/>
</Grid>

{
    public partial class MainWindow : Window
    {
        private int celsius;
        private int fahrenheit;
        private SolidColorBrush brush;
        private Rectangle rectangle;

    public MainWindow()
    {
        InitializeComponent();

        celsiusLabel.Content = Convert.ToString(celsiusSlider.Value);
        fahrenheitLabel.Content = Convert.ToString(32);

        brush = new SolidColorBrush(Colors.Blue);

        CreateRectangle(paperCanvas, brush, celsius, 20);
        CreateRectangle(paperCanvas, brush, fahrenheit, 80);
    }

    private void CalculateButton_Click(object sender, RoutedEventArgs e)
    {

    }

    private void ClearButton_Click(object sender, RoutedEventArgs e)
    {

    }

    private void celsiusSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    {
        celsius = Convert.ToInt32(celsiusSlider.Value);
        celsiusLabel.Content = Convert.ToString(celsius);
        fahrenheit = celsius * 9 / 5 + 32;
        fahrenheitLabel.Content = Convert.ToString(fahrenheit);
        //UpdateRectangle(celsiusSlider.Value);
        UpdateRectangle(celsius);
        UpdateRectangle(fahrenheit);
    }

    private void CreateRectangle(Canvas drawingArea, SolidColorBrush brush, int temperatureValue, int xPosition)
    {
        rectangle = new Rectangle
        {
            Width = 40,
            Height = temperatureValue,
            Margin = new Thickness(xPosition,0,0,0),
            Stroke = brush,
            Fill = brush,
        };
        drawingArea.Children.Add(rectangle);
    }

    private void UpdateRectangle(double sliderValue)
    {
        rectangle.Height = sliderValue;
    }
}

更新代码

    public partial class MainWindow : Window
{
    private int celsius;
    private int fahrenheit;
    private SolidColorBrush brush;
    private Rectangle celsiusRectangle;
    private Rectangle fahrenheitRectangle;

    public MainWindow()
    {
        InitializeComponent();

        celsiusLabel.Content = Convert.ToString(celsiusSlider.Value);
        fahrenheitLabel.Content = Convert.ToString(32);

        brush = new SolidColorBrush(Colors.Blue);

        celsiusRectangle = CreateRectangle(paperCanvas, brush, celsius, 20);
        fahrenheitRectangle = CreateRectangle(paperCanvas, brush, fahrenheit, 80);
    }

    private void CalculateButton_Click(object sender, RoutedEventArgs e)
    {

    }

    private void ClearButton_Click(object sender, RoutedEventArgs e)
    {

    }

    private void celsiusSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    {
        celsius = Convert.ToInt32(celsiusSlider.Value);
        celsiusLabel.Content = Convert.ToString(celsius);
        fahrenheit = celsius * 9 / 5 + 32;
        fahrenheitLabel.Content = Convert.ToString(fahrenheit);
        UpdateRectangle();
    }

    private Rectangle CreateRectangle(Canvas drawingArea, SolidColorBrush brush, int temperatureValue, int xPosition)
    {
        var rectangle = new Rectangle
        {
            Width = 40,
            Height = temperatureValue,
            Margin = new Thickness(xPosition,0,0,0),
            Stroke = brush,
            Fill = brush,
        };
        drawingArea.Children.Add(rectangle);
        return rectangle;
    }

    private void UpdateRectangle()
    {
        celsiusRectangle.Height = celsius;
        fahrenheitRectangle.Height = fahrenheit;
    }
}

}

Answer 1

CreateRectangle功能出现问题。因为您只有一个private Rectangle rectangle变量。上次调用CreateRectangle会覆盖celsus rectangle和丢失的处理程序。然后，只有fahrenheit矩形有效。

使用2个Rectangle变量并更改CreateRectangle函数

private Rectangle CreateRectangle(Canvas drawingArea, SolidColorBrush brush, int temperatureValue, int xPosition)
    {
var rectangle = new Rectangle //<-- Made change here
        {
            Width = 40,
            Height = temperatureValue,
            Margin = new Thickness(xPosition,0,0,0),
            Stroke = brush,
            Fill = brush,
        };
        drawingArea.Children.Add(rectangle);
return rectangle; //<-- Made change here
    }

然后使用类似的方法创建

   celsuiusRectangle= CreateRectangle(paperCanvas, brush, celsius, 20);
   fahrenheitRectangle= CreateRectangle(paperCanvas, brush, fahrenheit, 80);