更改图像后在WPF窗口中重新加载图像

时间:2018-08-31 08:58:09

标签: c# wpf image xaml data-binding

最近我正在使用WPF和C#,我想为A4页面(一个A4大小的JPG模板)创建一个编辑器

问题是,我想在JPG上的某个位置放置一些文本,以便在编写文本时能够看到它(例如实时预览)。

这是我到目前为止所实现的:

XAML

<Window x:Class="Tut.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:Tut"
    mc:Ignorable="d"
    Title="Neshalet Logo ltd." Height="900" Width="1400">
<Border Padding="10">
    <StackPanel Margin="0,10,0,0">
        <Grid Height="839">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width=".3*"/>

            </Grid.ColumnDefinitions>

            <TextBlock Margin="0,2,22,817" HorizontalAlignment="Right" Grid.Column="2" FontSize="15">
                בחר מוצר
            </TextBlock>

            <!-- Combo box for product type -->
            <ComboBox x:Name="productType" Grid.Column="1"  VerticalAlignment="Top" Height="25" Margin="10,0,17,0"  >
                <ComboBoxItem>באנרים</ComboBoxItem>
                <ComboBoxItem>שקפים וניירות</ComboBoxItem>
                <ComboBoxItem>וינילים</ComboBoxItem>
                <ComboBoxItem>קשיחים הדפסה ישירה</ComboBoxItem>
                <ComboBoxItem>הדבקה</ComboBoxItem>
            </ComboBox>

            <Image Source ="/Resources/a4.jpg" Grid.Column="0" Margin="10,35,0,0" HorizontalAlignment="Left" VerticalAlignment="Top">
            </Image>

                <!-- Main window -->
            <StackPanel Grid.Column="1" Grid.ColumnSpan="2" Margin="10,40,0,0">
                <Grid  Height="492">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="3*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <!-- SO Number-->
                    <TextBlock Grid.Column="1" FontSize="16" HorizontalAlignment="Right" Margin="0,5,22,472"><Run Text="מספר הזמנה"/></TextBlock>
                    <TextBox x:Name="SO" DataContextChanged="drawSO" Height="25" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0,0,5,0"/>

                    <!-- Costumer name -->
                    <TextBlock Grid.Column="1" FontSize="16" HorizontalAlignment="Right" Margin="0,34,22,440"><Run Text="שם לקוח"/></TextBlock>
                    <TextBox Grid.Column="0" Height="25" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0,30,5,0"/>

                    <!-- Order date -->
                    <TextBlock Grid.Column="1" FontSize="16" HorizontalAlignment="Right" Margin="0,64,22,410"><Run Text="תאריך"/></TextBlock>
                    <Button Grid.Column="1" Margin="9,62,122,410" Click="getDate" Content="היום" RenderTransformOrigin="0.5,0.5"/>
                    <DatePicker x:Name="todaysDate" Grid.Column="0" Height="25" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0,60,5,0"/>

                    <!-- Supply date -->
                    <TextBlock Grid.Column="1" FontSize="16" HorizontalAlignment="Right" Margin="0,93,22,381"><Run Text="תאריך אספקה"/></TextBlock>
                    <DatePicker x:Name ="deliveryDate" Margin="0,90,5,377"  />

                    <!-- Folder -->
                    <TextBlock Grid.Column="1" FontSize="16" HorizontalAlignment="Right" Margin="0,123,22,351"><Run Text="נשמר בתיקיה"/></TextBlock>
                    <ComboBox x:Name="folderName" Grid.Column="0" Margin="0,120,5,347">
                        <ComboBoxItem Content="ktanot"/>
                        <ComboBoxItem Content="GZM"/>
                        <ComboBoxItem Content="UV"/>
                        <ComboBoxItem Content="SLAVA WATER PRINTS"/>
                    </ComboBox>

                    <!-- Folder -->
                    <TextBlock Grid.Column="1" FontSize="16" HorizontalAlignment="Right" Margin="0,154,22,320"><Run Text="קוד משלוח"/></TextBlock>
                    <ComboBox x:Name="DeliveryCode" Grid.Column="0" Margin="0,150,5,317">
                        <ComboBoxItem Content="איסוף עצמי"/>
                        <ComboBoxItem Content="מסירה"/>
                        <ComboBoxItem Content="משלוח"/>
                    </ComboBox>

                    <Button Margin="230,362,270,96" Click="Button_Click">
                        כאן
                    </Button>

                </Grid>
            </StackPanel>
            <Label Content="תצוגה מקדימה" HorizontalAlignment="Center" VerticalAlignment="Top" Grid.Column="0"/>

        </Grid>

        <!-- Image preview -->

    </StackPanel>
</Border>

C#

    public partial class MainWindow : Window
{
    public MainWindow() => InitializeComponent();

    DateTime today = DateTime.Today.Date;

    String path = @"/Resources/a4.jpg";

    Bitmap order = null;

    Font f = new Font("Arial", 200, GraphicsUnit.Pixel);

    private void getDate(object sender, RoutedEventArgs e)
    {
        String t = today.ToShortDateString();
        todaysDate.Text = t;
    }


    private void drawSO(object sender, DependencyPropertyChangedEventArgs e)
    {

    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        String orderNum = SO.Text;
        using (var stream = File.OpenRead(path))
        {
            order = (Bitmap)Bitmap.FromStream(stream);
        }
        using (order)
        using (var graphics = Graphics.FromImage(order))
        using (f)
        {
            graphics.DrawString(orderNum, f, System.Drawing.Brushes.White, order.Height/2, order.Width/2);
            order.Save(path);
        }

    }
}

问题是我让程序仅在单击按钮时才写文本(如您在Button_Click()上看到的那样,但是我想显示我在 SO号上写的文本>在编写文本框时。 在我编写文本时是否可以刷新窗口上的图像视图,而在Button单击事件中是否,有什么方法可以刷新窗口?

这里是一个示例: 我希望在文本框中输入的文本会在jpg

I want the text entered in the text box will be on the jpg

2 个答案:

答案 0 :(得分:1)

只需绑定Text的{​​{1}}属性即可使用TextBlock的{​​{1}}。
像这样:

TextBox

更新

  

在评论和编辑的问题之后。

您可以将Text放在网格中的<TextBlock Grid.Column="1" FontSize="16" HorizontalAlignment="Right" Margin="0,5,22,472" Text="{Binding ElementName=SO, Path=Text, UpdateSourceTrigger=PropertyChanged}"/> 之后,然后生成包含所有视觉效果的新图像。
它会是这样的:

TextBlock

然后您将其保存为jpeg,如下所示:

Image

注意
请注意,用于保存视觉效果的代码来自MSDN

答案 1 :(得分:1)

  

问题是我让程序仅在单击按钮时才写文本(如您在Button_Click()上看到的那样,但是我想显示我写在SO Number文本框中的文本在我编写文本时,是否有任何方法可以刷新窗口上的图像视图,而不是在Button单击事件上刷新图像视图?

尝试处理TextChanged的{​​{1}}事件,而不是处理TextBox的{​​{1}}事件:

Click

Button

请注意,事件处理程序将在每次按键时调用。如果出于性能原因不希望这样做,则可以考虑绑定到<TextBox x:Name="SO" TextChanged="" ... /> 属性,并按照建议的here实施一些延迟。