Dokon's Story: April 2016

Tuesday, April 26, 2016

WPF - How to create window without title bar.

1. Change WindowStyle property.(Remove the title bar)
(1) You can set "WindowStyle=None".

(2) Below image is the Window without the title bar.

2. Change AllowsTransparency property.(Remove the border of the window)
(1) You can set "AllowsTransparency=true".

(2) Below image is the Window without the border.

3. Change the border of the Window.
(1) You can set "BorderBrush=Black" and "BorderThickness=1".
- BorderBrush is the border color.
- BorderThickness is the thickness of the border.

(2) Below image is the window with the border.

4. Move the window.
If the window is disappeared the title bar, you can not move the window.
So you have to add the event of Mouse Left Button Down.
(1) Add MouseLeftButtonDown event.

(2) Type the below code in the MouseLeftButtonDown event.

private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.DragMove();
}

5. Resize Window.
If the window is disappeared the title bar and the border, you can not resize the window.
So you have to change ResizeMode property.
(1) You set "ResizeMode=CanResizeWithGrip"

(2) Display the grip the right and the bottom of the Window.
You can resize the grip.

Thursday, April 21, 2016

Android - How to create a custom listview in android.

It is the way creating a custom listview in android.

1. Create Android Project
(1) Click the Start a new Android Studio project.

(2) Click the next button after type Application name and Company Domain.
(Create package name by company domain and application name.)

(3) Click the next button after check Pone and Tablet Check Box.

(4) Click the next button after select Blank Activity.

(5) Click the finish button after type Activity Name, Layout Name, Title, and Menu Resource Name.
(If the finish button is clicked, Android Project is created)

2. Add a ListView in the activity layout, look like below image.

- Activity Layout Source

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <ListView android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

3. Create the list item layout.
(1) Click the menu of Layout XML File, look like below image.

(2) Click the finish button after type Layout File Name and Root Tag.

(3) Add a ImageView and a TextView in the list item layout, look like below image.

- List item layout source.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_gravity="center_vertical"
        android:src="@drawable/south_korea"
        android:id="@+id/imageView" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:layout_gravity="center_vertical"
        android:text="Korea"
        android:id="@+id/textView" />
</LinearLayout>

4. Type the code in the activity, look like below image

package com.jmsys.customlistview;

import android.content.Context;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;


public class MainActivity extends ActionBarActivity {

    ListView listview;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        listview = (ListView)this.findViewById(R.id.listview);

        // Create ListView Data
        ArrayList<String> list = new ArrayList<String>();
        list.add("Korea");
        list.add("USA");
        list.add("Germany");

        // Custom Adapter Instance
        CustomAdapter adapter = new CustomAdapter(this, list);
        // Set a custom adapter on the ListView
        listview.setAdapter(adapter);

        // Add a Item Click Event on the ListView
        listview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                CustomAdapter adapter = (CustomAdapter)listview.getAdapter();
                Toast.makeText(MainActivity.this, adapter.getItem(position).toString(), Toast.LENGTH_LONG).show();
            }
        });
    }

    // Custom Adapter Inner Class
    public class CustomAdapter extends BaseAdapter{
        Context context;
        ArrayList<String> items;
        LayoutInflater inflater;

        public CustomAdapter(Context context, ArrayList<String> items){
            this.context = context;
            this.items = items;
            inflater = LayoutInflater.from(context);
        }

        @Override
        public int getCount() {
            return items.size();
        }

        @Override
        public Object getItem(int position) {
            return items.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View v = convertView;
            if(v == null){
                v = inflater.inflate(R.layout.list_item, null);
            }

            ImageView imageView = (ImageView)v.findViewById(R.id.imageView);
            TextView textView = (TextView)v.findViewById(R.id.textView);

            String nation = items.get(position);
            textView.setText(nation);

            // Set a image of ImageView
            if("Korea".equals(nation)){
                imageView.setImageResource(R.drawable.south_korea);
            }else if("USA".equals(nation)){
                imageView.setImageResource(R.drawable.usa);
            }else if("Germany".equals(nation)){
                imageView.setImageResource(R.drawable.germany);
            }
            return v;
        }
    }
}

※ Refer below video.

Monday, April 18, 2016

WPF - How to bind custom class in a DataGrid?

It is the way binding a custom class to a WPF GataGrid.

1. Add the DataGrid on the Window.

2. Add the columns in the DataGrid.

3. Bind a custom property in the columns of the DataGrid

<Window x:Class="BindingCustomClassToDataGrid.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
    <Grid>
        <DataGrid AutoGenerateColumns="False" Name="dataGrid1">
            <DataGrid.Columns>
                <DataGridTextColumn Header="ID" Binding="{Binding ID}"/>
                <DataGridTextColumn Header="Name" Binding="{Binding UserName}"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

4. Add the Loaded Event of the Window.

5. Type below codes in the Window Loaded Event.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace BindingCustomClassToDataGrid
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            List<CustomClass> list = new List<CustomClass>();
            list.Add(new CustomClass { ID = "ID-01", UserName = "Name-01" });
            list.Add(new CustomClass { ID = "ID-02", UserName = "Name-02" });
            list.Add(new CustomClass { ID = "ID-03", UserName = "Name-03" });
            list.Add(new CustomClass { ID = "ID-04", UserName = "Name-04" });

            dataGrid1.ItemsSource = list;
        }
    }
}

6. Below image is result.

※ You can refer the below video.

Thursday, April 14, 2016

WPF - Binding DataTable to a DataGrid

It is the way binding a DataTable to a GataGrid

1. Add the DataGrid on the Window.

2. Click the columns property button[...] on the Properties of DataGrid

3. Add the three colums to the DataGrid.

4. Type the Binding attribute on the DataGridTextColumn tag.

<DataGrid AutoGenerateColumns="False" Height="217" HorizontalAlignment="Left" Margin="38,56,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="420">
    <DataGrid.Columns>
 <DataGridTextColumn Header="ID" Binding="{Binding Path=ID}"/>
 <DataGridTextColumn Header="Name" Binding="{Binding Path=NAME}"/>
 <DataGridTextColumn Header="Telephone" Binding="{Binding Path=TEL_NO}"/>
    </DataGrid.Columns>
</DataGrid>

5. Add the Loaded event of the Window.

6. Type the below code to the Window's Loaded event.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Data;

namespace DataGridBinding
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            // Create DataTable instance.
            DataTable dataTable = new DataTable();

            // Add the columns.
            dataTable.Columns.Add("ID", typeof(string));
            dataTable.Columns.Add("NAME", typeof(string));
            dataTable.Columns.Add("TEL_NO", typeof(string));

            // Add the datas.
            dataTable.Rows.Add(new string[] { "ID-01", "Name 01", "010-0001-0000" });
            dataTable.Rows.Add(new string[] { "ID-02", "Name 02", "010-0002-0000" });
            dataTable.Rows.Add(new string[] { "ID-03", "Name 03", "010-0003-0000" });
            dataTable.Rows.Add(new string[] { "ID-04", "Name 04", "010-0004-0000" });

            // Binding DataView of DataTable.
            dataGrid1.ItemsSource = dataTable.DefaultView;
        }
    }
}

※ Refer below binding the columns of DataTable and DataGrid

7. Below image is result.

Refer below video.

Tuesday, April 12, 2016

WPF - Binding the datas of DataTable on ComboBox.

It is the way binding the datas of DataTable on ComboBox.

1. Add ComboBox on the Window.

2. Type ComboBox name.

3. Add Initialized Event on Window.

4. Add SelectionChanged event of ComboBox.

5. Type below codes on Window's code file.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Data;

namespace ComboBoxBinding
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Window_Initialized(object sender, EventArgs e)
        {
            // Create DataTable instance.
            DataTable dataTable = new DataTable();

            // Add the colums in DataTable.
            dataTable.Columns.Add("VALUE", typeof(string));
            dataTable.Columns.Add("NAME", typeof(string));

            // Add the datas in DataTable.
            dataTable.Rows.Add(new string[] { "KR", "Korea" });
            dataTable.Rows.Add(new string[] { "US", "America" });
            dataTable.Rows.Add(new string[] { "CH", "China" });
            dataTable.Rows.Add(new string[] { "JP", "Japan" });

            // Binding DataView of DataTable on ComboBox.
            comboBox.ItemsSource = dataTable.DefaultView;
            // Set DisplayMemberPath attribute.
            comboBox.DisplayMemberPath = "NAME";
            // Set SelectedValuePath attribute.
            comboBox.SelectedValuePath = "VALUE";
        }

        private void comboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            // Check the slected data.
            foreach (DataRowView row in e.AddedItems)
            {
                MessageBox.Show("Value : " + row["VALUE"] + "\n" + "Name : " + row["NAME"]);
            }
        }
    }
}

6. Below images is result.

Refer below vedio.

Thursday, April 7, 2016

WPF - Add User Control Tabs in Tab Control.

We can add a Tab Item of TabControl dynamically.
This post is simple example that User Control Tabs is added in TabControl.

1. Add TabControl in Window.

2. Show a dialog of TabControl Items.

3. Remove a TabItem.

4. Create User Control.(I created 3 User Control)

5. Add Window Loaded event.

6. Type below code in Window Loaded event.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace AddTabItem
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            UserControl[] userControls = new UserControl[] { new UserControl1(), new UserControl2(), new UserControl3()};
            foreach (UserControl uc in userControls)
            {
                TabItem tabItem = new TabItem();
                tabItem.Header = "New Tab";
                tabItem.Content = uc;

                tabControl1.Items.Add(tabItem);
            }
        }
    }
}

7. If you run WPF Appliction, you can see added 3 TabItem in TabControl.

WPF - Add an Image in a button

We can add an image in a WPF button easily.

Refer below XAML code.

<Window x:Class="ImageButton.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button HorizontalAlignment="Left" Margin="50,50,0,0" Name="button1" VerticalAlignment="Top">
            <ContentControl>
                <StackPanel Orientation="Horizontal" Width="Auto" HorizontalAlignment="Left">
                    <Image Source="/ImageButton;component/images/save.gif" Margin="0,0,5,0" Width="20" Height="20" />
                    <TextBlock Text="Image Button" VerticalAlignment="Center" Height="18" Width="Auto" />
                </StackPanel>
            </ContentControl>
        </Button>
    </Grid>
</Window>

Wednesday, April 6, 2016

Android - How to set TextView text style

We can set text style by the setTypeface of TextView class.

Below is text style type.
(1) Bold + Italic : Typeface.BOLD_ITALIC
(2) Bold : Typeface.BOLD
(3) Italic : Typeface.ITALIC
(4) Normal : Typeface.NORMAL

Sample Code

 TextView textView = (TextView)this.findViewById(R.id.text_view);
 textView.setTypeface(null, Typeface.BOLD_ITALIC);
 textView.setTypeface(null, Typeface.BOLD);
 textView.setTypeface(null, Typeface.ITALIC);
 textView.setTypeface(null, Typeface.NORMAL);

How to create Android Tabs swipe app.

1. Create new project on the Android Studio.

2. Input the values of Application Name and Company Domain, and click Next button.

3. Check Phone and Tablet and select Minimum SDK and click Next button.

4. Select Tabbed Activity and click Next button.

5. Select Action Bar Tabs(with Viewpager) in Navigation Style.

6. If below error occur, you need to change appcompat version(23.1.1 → 22.1.1) in the build.gradle file. The build.gradle file path is <Project Folde>\app.

Refer the below video.