visual studio C#で写真投稿機能を作りたい

Question

visual studio C#のwindowsフォームアプリケーションを使って写真投稿機能を作ろうとしています。
確実に実装したい機能は
・画像をファイルから選択(１枚)
・コメントと共に投稿
・画像とコメントを複数投稿＆表示
イメージ

□タイトル
ーーーーーーーー
｜　　　　　　　　｜
｜　　　画像　　　｜
｜　　　　　　　　｜
ーーーーーーーー
コメント

□タイトル
ーーーーーーーー
｜　　　　　　　　｜
｜　　　画像　　　｜
｜　　　　　　　　｜
ーーーーーーーー
コメント

できればつけたい機能　
チェックボックスなどを使ったお気に入り機能

投稿する時のウィンドウと表示するウィンドウは別でも構いません。
何かいい方法はありませんでしょうか？
よろしくお願いいたします。

Comments

[Zuishin]

ListView を使えばいいんじゃないでしょうか。

[Zuishin]

https://teratail.com/help
> 他のサービスにも質問投稿をしたい（してしまった）
> teratailでは、マルチポスト※の推奨はしていません。
> やむを得ず複数のサイトに質問を投稿された場合は、質問内容にマルチポストをする理由を書き、他のサイトの投稿へのリンクを貼ってください。また、解決した際には必ずteratail及びすべての投稿に解決した旨と、どのように解決したかを記載してください。

https://qiita.com/natsumin2103/questions/bf5a3135428a91d3d79e

[退会済みユーザー]

> windowsフォームアプリケーションを使って写真投稿機能を作ろうとしています。

投稿という言葉からは、特定の Web サイトに複数のユーザーが画像をアップロードして、それを複数のユーザーが閲覧するようなイメージなんですが、そういうのとは違うのですか？　Windows Forms アプリで画像を投稿？　何かまったく見当違いのことを考えてませんか？

[nachann]

投稿という言い方はあっていませんでしたね、、、
自分のフォルダから画像を選択して複数表示できるようなものをかんがえていました。

[Zuishin]

https://teratail.com/help
> 他のサービスにも質問投稿をしたい（してしまった）
> teratailでは、マルチポスト※の推奨はしていません。
> やむを得ず複数のサイトに質問を投稿された場合は、質問内容にマルチポストをする理由を書き、他のサイトの投稿へのリンクを貼ってください。また、解決した際には必ずteratail及びすべての投稿に解決した旨と、どのように解決したかを記載してください。

[退会済みユーザー]

何はともあれマルチポストは止めましょう。自分さえよければいいという匂いがプンプンするので、相手にする気がしなくなります。

[Zuishin]

https://qiita.com/natsumin2103/questions/bf5a3135428a91d3d79e

[退会済みユーザー]

qiita の投稿は Not Found になってますが、削除したのですか？　削除しないで、Teratail の URL を書いてこちらに一本化したと通知した方がよいのでは？　qiita の投稿を見て考えてくれた回答者・閲覧者もおられることでしょうし。

あと、Zuishin さんからの ListView を使うという提案に対して返事しませんか？

Answer 1

何かいい方法はありませんでしょうか？

できるだけ簡単な方法を考えていたのですが、一応めどが立ったので一案として試してみてください（簡単を最優先したので、とても正攻法とは言えません^^;

using System;
using System.Drawing;
using System.IO;
using System.Net;
using System.Windows.Forms;

namespace Questions280412
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent2();

            try
            {
                // 保存済みファイルがあれば読み込み
                webBrowser1.DocumentText = File.ReadAllText("Questions280412.html");
            }
            catch
            {
                // なければ空文字に（何かは入れないとNullReferenceExceptionが出る）
                webBrowser1.DocumentText = "";
            }

            // フォント変更
            webBrowser1.DocumentCompleted += (s, e) => webBrowser1.Document.Body.Style = "font-family:メイリオ;";
        }

        private void Form1_FormClosing(object sender, FormClosingEventArgs e)
        {
            // 終了時に自動保存
            // 次回起動時のためdivを表示に戻しておく
            foreach(HtmlElement div in webBrowser1.Document.GetElementsByTagName("div"))
            {
                div.Style = "display:block";
            }

            // ファイルが書き込めないと例外
            // webBrowser1.DocumentTextだと INPUT CHECKED が反映されないので注意
            File.WriteAllText("Questions280412.html", webBrowser1.Document.Body.InnerHtml);
        }

        private void SelectImageButton_Click(object sender, EventArgs e)
        {
            using(var dlg = new OpenFileDialog())
            {
                dlg.Filter = "画像ファイル(*.png;*.jpg;*.gif)|*.png;*.jpg;*.gif|すべてのファイル(*.*)|*.*";
                if(dlg.ShowDialog() == DialogResult.OK)
                {
                    fileTextBox.Text = dlg.FileName;
                }
            }
        }


        // １投稿分のテンプレート
        private const string template = @"
<div>
    <h1>{{title}}</h1>
    <img src='{{file}}' />
    <br />
    <pre>{{comment}}</pre>
    <label>
        <input type='checkbox' name='like'>お気に入り
    </label>
    <hr />
</div>";

        private void PostButton_Click(object sender, EventArgs e)
        {
            // HTMLエンコード（< を &lt; に変える処理）
            var title = WebUtility.HtmlEncode(titleTextBox.Text);
            var file = WebUtility.HtmlEncode(fileTextBox.Text);
            var comment = WebUtility.HtmlEncode(commentTextBox.Text);

            // テンプレートの指定部分と置換
            var html = template.Replace("{{title}}", title)
                               .Replace("{{file}}", file)
                               .Replace("{{comment}}", comment);

            //webBrowser1.DocumentText += html; // だとダメ
            webBrowser1.Document.Body.InnerHtml += html; // 投稿追加
            // お気に入り状態で追加されるといろいろ面倒なのでぜんぶに戻す
            allRadioButton.Checked = true;
        }

        private void AllRadioButton_CheckedChanged(object sender, EventArgs e)
        {
            // divタグを全列挙
            foreach(HtmlElement div in webBrowser1.Document.GetElementsByTagName("div"))
            {
                // divを表示に戻す
                div.Style = "display:block";
            }
        }

        private void LikeRadioButton_CheckedChanged(object sender, EventArgs e)
        {
            // 全体から name='like' のものを全列挙
            foreach(HtmlElement checkbox in webBrowser1.Document.All.GetElementsByName("like"))
            {
                // チェックボックスがチェックされていなければ...
                if(checkbox.GetAttribute("checked") == "False")
                {
                    // div（チェックボックスの親の親）を非表示にする
                    checkbox.Parent.Parent.Style = "display:none";
                }
            }
        }



        // InitializeComponent()を圧縮
        private void InitializeComponent2()
        {
            ((System.ComponentModel.ISupportInitialize)splitContainer1).BeginInit();
            splitContainer1.Panel1.SuspendLayout();
            splitContainer1.Panel2.SuspendLayout();
            splitContainer1.SuspendLayout();
            SuspendLayout();

            // splitContainer1
            splitContainer1.Dock = DockStyle.Fill;

            // splitContainer1.Panel1
            splitContainer1.Panel1.Controls.Add(label3);
            splitContainer1.Panel1.Controls.Add(label2);
            splitContainer1.Panel1.Controls.Add(label1);
            splitContainer1.Panel1.Controls.Add(postButton);
            splitContainer1.Panel1.Controls.Add(selectImageButton);
            splitContainer1.Panel1.Controls.Add(commentTextBox);
            splitContainer1.Panel1.Controls.Add(fileTextBox);
            splitContainer1.Panel1.Controls.Add(titleTextBox);

            // splitContainer1.Panel2
            splitContainer1.Panel2.Controls.Add(likeRadioButton);
            splitContainer1.Panel2.Controls.Add(allRadioButton);
            splitContainer1.Panel2.Controls.Add(webBrowser1);
            splitContainer1.Size = new Size(800, 450);
            splitContainer1.SplitterDistance = 408;

            // label3
            label3.AutoSize = true;
            label3.Location = new Point(14, 69);
            label3.Text = "コメント";

            // label2
            label2.AutoSize = true;
            label2.Location = new Point(12, 44);
            label2.Text = "画像パス";

            // label1
            label1.AutoSize = true;
            label1.Location = new Point(12, 15);
            label1.Text = "タイトル";

            // postButton
            postButton.Anchor = AnchorStyles.Bottom | AnchorStyles.Right;
            postButton.Location = new Point(321, 415);
            postButton.Size = new Size(75, 23);
            postButton.Text = "投稿";
            postButton.UseVisualStyleBackColor = true;
            postButton.Click += PostButton_Click;

            // selectImageButton
            selectImageButton.Anchor = AnchorStyles.Top | AnchorStyles.Right;
            selectImageButton.Location = new Point(299, 37);
            selectImageButton.Size = new Size(97, 23);
            selectImageButton.Text = "画像を選択...";
            selectImageButton.UseVisualStyleBackColor = true;
            selectImageButton.Click += SelectImageButton_Click;

            // commentTextBox
            commentTextBox.AcceptsReturn = true;
            commentTextBox.AcceptsTab = true;
            commentTextBox.Anchor = AnchorStyles.Top | AnchorStyles.Bottom | AnchorStyles.Left | AnchorStyles.Right;
            commentTextBox.Location = new Point(66, 66);
            commentTextBox.Multiline = true;
            commentTextBox.Size = new Size(330, 343);

            // fileTextBox
            fileTextBox.Anchor = AnchorStyles.Top | AnchorStyles.Left | AnchorStyles.Right;
            fileTextBox.Location = new Point(66, 41);
            fileTextBox.Size = new Size(227, 19);

            // titleTextBox
            titleTextBox.Anchor = AnchorStyles.Top | AnchorStyles.Left | AnchorStyles.Right;
            titleTextBox.Location = new Point(66, 12);
            titleTextBox.Size = new Size(330, 19);

            // likeRadioButton
            likeRadioButton.Appearance = Appearance.Button;
            likeRadioButton.AutoSize = true;
            likeRadioButton.Location = new Point(54, 5);
            likeRadioButton.TabStop = true;
            likeRadioButton.Text = "お気に入り";
            likeRadioButton.UseVisualStyleBackColor = true;
            likeRadioButton.CheckedChanged += LikeRadioButton_CheckedChanged;

            // allRadioButton
            allRadioButton.Appearance = Appearance.Button;
            allRadioButton.AutoSize = true;
            allRadioButton.Checked = true;
            allRadioButton.Location = new Point(3, 5);
            allRadioButton.TabStop = true;
            allRadioButton.Text = "ぜんぶ";
            allRadioButton.UseVisualStyleBackColor = true;
            allRadioButton.CheckedChanged += AllRadioButton_CheckedChanged;

            // webBrowser1
            webBrowser1.Anchor = AnchorStyles.Top | AnchorStyles.Bottom | AnchorStyles.Left | AnchorStyles.Right;
            webBrowser1.Location = new Point(3, 33);
            webBrowser1.MinimumSize = new Size(20, 20);
            webBrowser1.Size = new Size(382, 414);

            // Form1
            AutoScaleDimensions = new SizeF(6F, 12F);
            AutoScaleMode = AutoScaleMode.Font;
            ClientSize = new Size(800, 450);
            Controls.Add(splitContainer1);
            Text = "Form1";
            FormClosing += Form1_FormClosing;
            splitContainer1.Panel1.ResumeLayout(false);
            splitContainer1.Panel1.PerformLayout();
            splitContainer1.Panel2.ResumeLayout(false);
            splitContainer1.Panel2.PerformLayout();
            ((System.ComponentModel.ISupportInitialize)(splitContainer1)).EndInit();
            splitContainer1.ResumeLayout(false);
            ResumeLayout(false);
        }

        private SplitContainer splitContainer1 = new SplitContainer();
        private WebBrowser webBrowser1 = new WebBrowser();
        private Label label3 = new Label();
        private Label label2 = new Label();
        private Label label1 = new Label();
        private Button postButton = new Button();
        private Button selectImageButton = new Button();
        private TextBox commentTextBox = new TextBox();
        private TextBox fileTextBox = new TextBox();
        private TextBox titleTextBox = new TextBox();
        private RadioButton likeRadioButton = new RadioButton();
        private RadioButton allRadioButton = new RadioButton();
    }
}

注意
Form1.Designer.csのままだと１万字に収まらないので、しかたなくInitializeComponent2を作成。
いろいろ気が利かない部分があります（改善の余地を残しています^^;
大量にアイテムがあると、投稿後のお気に入りへの切り替えが激遅い。