728x90
반응형

CollectionView 에 담겨진 데이터를 화면에 하나씩 나타내도록 하여

탐색하는 코드를 알아봅니다.

 

Person.cs

using System.ComponentModel;

 

namespace WpfApp

{

    public class Person : INotifyPropertyChanged

    {

        /// <summary>

        /// 속성변경 이벤트입니다.

        /// </summary>

        public event PropertyChangedEventHandler PropertyChanged;

 

        /// <summary>

        /// 이름입니다.

        /// </summary>

        string name = "";

 

        /// <summary>

        /// 별명입니다.

        /// </summary>

        string nickName = "";

 

        /// <summary>

        /// 이름입니다.

        /// </summary>

        public string Name

        {

            set

            {

                this.name = value;

                OnPropertyChanged(nameof(Name));

            }

            get { return name; }

        }

 

        /// <summary>

        /// 별명입니다.

        /// </summary>

        public string NickName

        {

            set

            {

                nickName = value;

                OnPropertyChanged(nameof(NickName));

            }

            get { return nickName; }

        }

 

        /// <summary>

        /// 속성 값이 변경될 때 발생합니다.

        /// </summary>

        /// <param name="propertyName"></param>

        protected virtual void OnPropertyChanged(string propertyName)

        {

            if (PropertyChanged != null)

            {

                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

            }

        }

    }

}

 

 

MainWindow.xaml

<Window x:Class="WpfApp.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        mc:Ignorable="d"

        Title="MainWindow" Height="450" Width="400">

    <StackPanel>

        <TextBox

            Margin="12" Height="50" VerticalContentAlignment="Center"

            Text="{Binding Name,

                   Mode=TwoWay,

                   UpdateSourceTrigger=PropertyChanged}" />

        <TextBox

            Margin="12" Height="50" VerticalContentAlignment="Center"

            Text="{Binding NickName,

                   Mode=TwoWay,

                   UpdateSourceTrigger=PropertyChanged}" />

        

        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">

            <Button Name="prevButton" Content="Prev" Padding="10" Margin="10" Click="prevButton_Click"/>

            <Button Name="nextButton" Content="Next" Padding="10" Margin="10" Click="nextButton_Click"/>

        </StackPanel>

    </StackPanel>

</Window>

 

 

MainWindow.xaml.cs

using System;

using System.Collections.ObjectModel;

using System.ComponentModel;

using System.Linq;

using System.Windows;

using System.Windows.Data;

 

namespace WpfApp

{

    public partial class MainWindow : Window

    {

        /// <summary>

        /// 데이터 collectionView 입니다.

        /// </summary>

        ICollectionView collectionView;

 

        public MainWindow()

        {

            InitializeComponent();

 

            ObservableCollection<Person> datas = new ObservableCollection<Person>();

 

            datas.Add(new Person(){ Name = "Kang",  NickName = "Super" });

            datas.Add(new Person(){ Name = "An",    NickName = "Father" });

            datas.Add(new Person(){ Name = "Jang",  NickName = "Marvel" });

 

            this.collectionView = CollectionViewSource.GetDefaultView(datas);

            this.collectionView.CurrentChanged += CollectionView_CurrentChanged; ;

 

            this.collectionView.SortDescriptions.Add(new SortDescription(nameof(Person.Name), ListSortDirection.Ascending));

 

            this.DataContext = this.collectionView;

 

            // 처음값으로 이동시킵니다.

            this.collectionView.MoveCurrentToFirst();

        }

 

        /// <summary>

        /// 이전 값으로 이동하는 버튼 클릭이벤트입니다.

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        private void prevButton_Click(object sender, RoutedEventArgs e)

        {

            this.collectionView.MoveCurrentToPrevious();

        }

 

        /// <summary>

        /// 다음 값으로 이동하는 버튼 클릭이벤트입니다.

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        private void nextButton_Click(object sender, RoutedEventArgs e)

        {

            this.collectionView.MoveCurrentToNext();

        }

 

        /// <summary>

        /// CollectionView 현재값이 변경되었을때 발생되는 이벤트입니다.

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="args"></param>

        private void CollectionView_CurrentChanged(object sender, EventArgs e)

        {

            // 이전/다음 항목 존재여부에 따라 이전/다음 버튼을 활성화하거나 비활성화 합니다.

            this.prevButton.IsEnabled = this.collectionView.CurrentPosition > 0;

            this.nextButton.IsEnabled = this.collectionView.CurrentPosition < this.collectionView.Cast<object>().Count() - 1;

        }

    }

}

 

 


 

728x90
반응형
728x90
반응형

CollectionView 를 이용해 다양한 기능을 처리할수 있습니다.

여기선 데이터 정렬하는 기능을 알아봅니다.

 

먼저 데이터로 사용할 Class 를 정의합니다.

 

Person.cs

 

using System.ComponentModel;

 

namespace WpfApp

{

    public class Person : INotifyPropertyChanged

    {

        /// <summary>

        /// 속성변경 이벤트입니다.

        /// </summary>

        public event PropertyChangedEventHandler PropertyChanged;

 

        /// <summary>

        /// 이름입니다.

        /// </summary>

        string name = "";

 

        /// <summary>

        /// 별명입니다.

        /// </summary>

        string nickName = "";

 

        /// <summary>

        /// 이름입니다.

        /// </summary>

        public string Name

        {

            set

            {

                this.name = value;

                OnPropertyChanged(nameof(Name));

            }

            get { return name; }

        }

 

        /// <summary>

        /// 별명입니다.

        /// </summary>

        public string NickName

        {

            set

            {

                nickName = value;

                OnPropertyChanged(nameof(NickName));

            }

            get { return nickName; }

        }

 

        /// <summary>

        /// 속성 값이 변경될 때 발생합니다.

        /// </summary>

        /// <param name="propertyName"></param>

        protected virtual void OnPropertyChanged(string propertyName)

        {

            if (PropertyChanged != null)

            {

                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

            }

        }

    }

}

 

 

MainWindow.xaml

<Window x:Class="WpfApp.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        mc:Ignorable="d"

        Title="MainWindow" Height="450" Width="800">

    <StackPanel>

        <ListBox Name="listbox" Width="300" Height="300" Margin="24">

            <ListBox.ItemTemplate>

                <DataTemplate>

                    <StackPanel Orientation="Horizontal">

                        <TextBlock Text="{Binding Name}" />

                        <TextBlock Text="      " />

                        <TextBlock Text="{Binding NickName}" />

                    </StackPanel>

                </DataTemplate>

            </ListBox.ItemTemplate>

        </ListBox>

    </StackPanel>

</Window>

 

 

MainWindow.xaml.cs

 

using System.Collections.ObjectModel;

using System.ComponentModel;

using System.Windows;

using System.Windows.Data;

 

namespace WpfApp

{

    public partial class MainWindow : Window

    {

        public MainWindow()

        {

            InitializeComponent();

 

            ObservableCollection<Person> datas = new ObservableCollection<Person>();

 

            datas.Add(new Person(){ Name = "Kang",  NickName = "Super" });

            datas.Add(new Person(){ Name = "An",    NickName = "Father" });

            datas.Add(new Person(){ Name = "Jang",  NickName = "Marvel" });

 

            ICollectionView collectionView = CollectionViewSource.GetDefaultView(datas);

 

            collectionView.SortDescriptions.Add(new SortDescription(nameof(Person.Name), ListSortDirection.Ascending));

 

            this.listbox.ItemsSource = collectionView;

        }

    }

}

 

 

위 코드에서 보듯이 CollectionView 의 SortDescriptions 를 사용하여 정렬기준을 줄수 있습니다.

 

 

 

728x90
반응형
728x90
반응형

Control 에서 원하는 Control 을 선택하면

상단에 해당 Control 이 표시되고

Dump 의  Template Property 를 선택하면 하단에 ControlTemplate 객체를 XAML 포맷으로 보여준다.



AnalysisControlTemplate.exe


출처 : 찰스 펫졸드

728x90
반응형
728x90
반응형

ControlTemplate 은 컨트롤의 모습이나 이벤트 처리등을 미리 정의해 놓고 가져다 쓰는 것을 말합니다.

아래 예시를 보시면 아시겠지만 RadioButton 앞의 라디오 박스가 사라지고

선택시 글자를 굵게 표시하고 주변으로 사각형이 그려집니다.

 

<Window x:Class="WpfApp.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        mc:Ignorable="d"

        Title="MainWindow" Height="450" Width="800">

    <StackPanel>

        <StackPanel.Resources>

            <ControlTemplate

                 x:Key="rectRadioButton"

                 TargetType="{x:Type RadioButton}">

                <Border

                    Name="border"

                    BorderBrush="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"

                    CornerRadius="0"

                    Padding="10"

                    BorderThickness="0"

                    Margin="2"

                    Width="250">

                    <ContentPresenter

                        Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center"/>

                </Border>

                <ControlTemplate.Triggers>

                    <Trigger

                         Property="IsChecked"

                         Value="True">

                        <Setter

                             TargetName="border"

                             Property="BorderThickness"

                             Value="3" />

                        <Setter

                             Property="FontWeight"

                             Value="Bold" />

                    </Trigger>

                </ControlTemplate.Triggers>

            </ControlTemplate>

        </StackPanel.Resources>

        <GroupBox

             HorizontalAlignment="Center"

             VerticalAlignment="Center"

             FontSize="12pt"

             Header="Select Option">

            <StackPanel>

                <RadioButton

                    Template="{StaticResource rectRadioButton}"

                    HorizontalAlignment="Center"

                    Content="Template RadioButton 1"

                    IsChecked="True" />

                <RadioButton

                     Template="{StaticResource rectRadioButton}"

                     HorizontalAlignment="Center"

                     Content="Template RadioButton 2" />

                <RadioButton

                     Template="{StaticResource rectRadioButton}"

                     HorizontalAlignment="Center"

                     Content="Template RadioButton 3" />

                <RadioButton

                     Template="{StaticResource rectRadioButton}"

                     HorizontalAlignment="Center"

                     Content="Template RadioButton 4" />

            </StackPanel>

        </GroupBox>

    </StackPanel>

</Window>

 

 

 

728x90
반응형
728x90
반응형

Style.Triggers 를 이용하여 Control 에 액션을 취한경우 어떠한 처리를 할 수 있습니다.

아래 예시는 Button, Label 에 마우스를 올렸을때 글자가 파란색으로 굵게 나타도록 한 것입니다.

Button 은 클릭시 글자 색을 변경합니다.

 

<Window x:Class="WpfApp3.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        mc:Ignorable="d"

        Title="MainWindow" Height="450" Width="800">

    <StackPanel>

        <StackPanel.Resources>

            <Style

                x:Key="normal">

                <Setter

                    Property="Control.FontSize"

                    Value="20" />

                <Setter

                    Property="Control.HorizontalAlignment"

                    Value="Center" />

                <Style.Triggers>

                    <Trigger

                        Property="Control.IsMouseOver"

                        Value="true">

                        <Setter

                            Property="Control.FontWeight"

                            Value="Bold" />

                        <Setter

                            Property="Control.Foreground"

                            Value="Blue" />

                    </Trigger>

                    <Trigger

                        Property="Button.IsPressed"

                        Value="true">

                        <Setter

                            Property="Control.Foreground"

                            Value="Red" />

                    </Trigger>

                </Style.Triggers>

            </Style>

        </StackPanel.Resources>

        <Button Style="{StaticResource normal}" Content="Test Button"/>

        <Label Style="{StaticResource normal}" Content="Test Label"/>

    </StackPanel>

</Window>

 

 

 

* MouseOver

  >     >

 

* Button Click

 

728x90
반응형
WPF
728x90
반응형

Style 은 컨트롤의 요소들을 미리 정의해 놓고 쓰기위한 것이라고 보면됩니다.

 

아래 코드와 같이 같은 크기의 색이 다른 원을 그린다고 할때 크기를 미리 정의해 놓고 쓰게되면

색만 바꿔처리하면 되므로 코딩이 간결해집니다.

 

<Window x:Class="WpfApp3.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        mc:Ignorable="d"

        Title="MainWindow" Height="450" Width="800">

    <Canvas>

        <Canvas.Resources>

            <Style

                TargetType="{x:Type Ellipse}">

                <Setter

                     Property="Width"

                     Value="96" />

                <Setter

                     Property="Height"

                     Value="96" />

            </Style>

        </Canvas.Resources>

        <Ellipse Canvas.Left="100" Canvas.Top="50" Fill="Blue" />

        <Ellipse Canvas.Left="150" Canvas.Top="100" Fill="Red" />

        <Ellipse Canvas.Left="200" Canvas.Top="150" Fill="Green" />

    </Canvas>

</Window>

 

 

 

 

또한 미리 정의한 style 을 기본베이스로 삼아 특정속성을 바꿔 style 을 재정의 할수 있습니다.

 

<Window x:Class="WpfApp3.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        mc:Ignorable="d"

        Title="MainWindow" Height="450" Width="800">

    <Canvas>

        <Canvas.Resources>

            <Style

                TargetType="{x:Type Ellipse}">

                <Setter

                     Property="Width"

                     Value="96" />

                <Setter

                     Property="Height"

                     Value="96" />

            </Style>

            <Style

                x:Key="otherEllipse"

                TargetType="{x:Type Ellipse}"

                BasedOn ="{StaticResource {x:Type Ellipse}}">

                <Setter

                     Property="Width"

                     Value="150" />

                <Setter

                     Property="Height"

                     Value="150" />

            </Style>

        </Canvas.Resources>

        <Ellipse Canvas.Left="100" Canvas.Top="50" Fill="Blue" />

        <Ellipse Canvas.Left="150" Canvas.Top="100" Fill="Red" />

        <Ellipse Canvas.Left="200" Canvas.Top="150" Fill="Green" Style="{StaticResource otherEllipse}" />

    </Canvas>

</Window>

 

 

 

728x90
반응형
728x90
반응형

RelativeSource 는 엘리먼트 트리 내에 조상 엘리먼트나 엘리먼트 그

자체를 참조하여 바인딩을 처리합니다.

 

아래 코드를 보면

<Window x:Class="WpfApp.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:src="clr-namespace:WpfApp"

        mc:Ignorable="d"

        Title="MainWindow" Height="450" Width="800">

    <StackPanel>

        <StackPanel

            Orientation="Horizontal"

            HorizontalAlignment="Center">

            <TextBlock

                Text="{Binding RelativeSource={RelativeSource self}, Path=FontFamily}" />

        </StackPanel>

        <StackPanel

            Orientation="Horizontal"

            HorizontalAlignment="Center">

            <TextBlock

                Text= "{Binding RelativeSource={RelativeSource AncestorType={x:Type StackPanel}}, Path=Orientation}" />

        </StackPanel>

    </StackPanel>

</Window>

 

 

self 는 자기 자신을 가리키며 두번째는 AncestorType 으로 앨리먼트 트리에 StackPanel 을 가리키게 됩니다.

728x90
반응형

'WPF' 카테고리의 다른 글

[WPF] Style.Triggers 이용하여 Control 변화 주기  (0) 2020.07.10
[WPF] Style 사용하기  (0) 2020.07.10
[WPF] RelativeSource 를 이용한 바인딩  (0) 2020.07.10
[WPF] IValueConverter 사용하기  (0) 2020.07.10
[WPF] Custom FrameworkElement 사용하기  (0) 2020.07.10
[WPF] Binding  (0) 2020.07.09
728x90
반응형

IValueConverter 는 서로 다른 데이터 타입 사이의 데이터 바인딩을

처리하기 위해 사용하게 됩니다.

ConvertBack 메소드는 Mode 가 Twoway 방식일 때 사용됩니다.

 

실제 값이 숫자라고 할때 바인딩 대상은 문자를 요구할때 등의 상황에 쓰일수 있습니다.

 

아래는 double 값을 decimal 값으로 변환하되 인자 값에 따라 소숫점 뒷자리를 잘라내는 코드입니다.

 

DoubleToDecimalConverter.cs

using System;

using System.Globalization;

using System.Windows.Data;

 

namespace WpfApp

{

    [ValueConversion(typeof(double), typeof(decimal))]

    public class DoubleToDecimalConverter : IValueConverter

    {

        /// <summary>

        /// 값을 변환합니다.

        /// </summary>

        /// <param name="value">바인딩 소스에서 생성한 값입니다.</param>

        /// <param name="typeTarget">바인딩 대상 속성의 형식입니다.</param>

        /// <param name="parameter">사용할 변환기 매개 변수입니다.</param>

        /// <param name="culture">변환기에서 사용할 문화권입니다.</param>

        /// <returns>변환된 값입니다. 메서드에서 null을 반환하면 유효한 null 값이 사용됩니다.</returns>

        public object Convert(object value, Type typeTarget, object parameter, CultureInfo culture)

        {

            decimal num = new Decimal((double)value);

            if (parameter != null)

            {

                num = Decimal.Round(num, Int32.Parse(parameter as string));

            }

            return num;

        }

 

        /// <summary>

        /// 값을 변환합니다.

        /// </summary>

        /// <param name="value">바인딩 소스에서 생성한 값입니다.</param>

        /// <param name="typeTarget">바인딩 대상 속성의 형식입니다.</param>

        /// <param name="parameter">사용할 변환기 매개 변수입니다.</param>

        /// <param name="culture">변환기에서 사용할 문화권입니다.</param>

        /// <returns>변환된 값입니다. 메서드에서 null을 반환하면 유효한 null 값이 사용됩니다.</returns>

        public object ConvertBack(object value, Type typeTarget, object parameter, CultureInfo culture)

        {

            return Decimal.ToDouble((decimal)value);

        }

    }

}

 

 

 

MainWindow.xaml

<Window x:Class="WpfApp.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:src="clr-namespace:WpfApp"

        mc:Ignorable="d"

        Title="MainWindow" Height="450" Width="800">

    <Window.Resources>

        <src:DoubleToDecimalConverter x:Key="converter" />

    </Window.Resources>

    <StackPanel>

        <ScrollBar

             Name="scroll"

             Orientation="Horizontal"

             Margin="24"

             Maximum="100"

             LargeChange="10"

             SmallChange="1" />

        <Label

             HorizontalAlignment="Center"

             Content="{Binding ElementName=scroll, Path=Value, Mode=OneWay, Converter={StaticResource converter}, ConverterParameter=2}" />

    </StackPanel>

  </Window>

 

 

 

 

 

728x90
반응형

'WPF' 카테고리의 다른 글

[WPF] Style 사용하기  (0) 2020.07.10
[WPF] RelativeSource 를 이용한 바인딩  (0) 2020.07.10
[WPF] IValueConverter 사용하기  (0) 2020.07.10
[WPF] Custom FrameworkElement 사용하기  (0) 2020.07.10
[WPF] Binding  (0) 2020.07.09
[WPF] PageFunction  (0) 2020.07.09
728x90
반응형

Custom FrameworkElement 정의하고 사용하는 방법입니다.

NumberProperty(숫자)를 의존속성으로가지며 이를 화면에 보여주는 FrameworkElement 를 정의합니다.

 

CustomElement.cs

using System.Globalization;

using System.Windows;

using System.Windows.Media;

 

namespace WpfApp

{

    class CustomElement : FrameworkElement

    {

        /// <summary>

        /// 화면에 표시될 숫자에 대한 의존 속성입니다.

        /// </summary>

        public static DependencyProperty NumberProperty;

 

        /// <summary>

        /// 화면에 표시될 숫자 값입니다.

        /// </summary>

        public double Number

        {

            set

            {

                SetValue(NumberProperty, value);

            }

            get

            {

                return (double)GetValue(NumberProperty);

            }

        }

 

        /// <summary>

        /// 생성자입니다.

        /// </summary>

        static CustomElement()

        {

            // DependencyProperty 를 생성합니다.

            NumberProperty = DependencyProperty.Register

            (

                "Number",

                typeof(double),

                typeof(CustomElement),

                new FrameworkPropertyMetadata

                (

                    0.0,

                    FrameworkPropertyMetadataOptions.AffectsRender

                )

            );

        }

 

 

        /// <summary>

        /// FrameworkElement 의 크기를 정의합니다.

        /// </summary>

        /// <param name="sizeAvailable">자식 요소에 제공할 수 있는 사용 가능한 크기입니다.</param>

        /// <returns></returns>

        protected override Size MeasureOverride(Size sizeAvailable)

        {

            return new Size(200, 50);

        }

 

        /// <summary>

        /// 레이아웃시스템에서 감독하는 렌더링 작업에 참여합니다.

        /// Number 를 화면에 표시합니다.

        /// </summary>

        /// <param name="dc">특정 요소에 대 한 그리기 지침입니다</param>

        protected override void OnRender(DrawingContext dc)

        {

            SolidColorBrush mySolidColorBrush = new SolidColorBrush() { Color = Colors.LimeGreen };

            Pen myPen = new Pen(Brushes.LimeGreen, 1);

            Rect myRect = new Rect(0, 0, 200, 50);

 

            dc.DrawRectangle(mySolidColorBrush, myPen, myRect);

 

            dc.DrawText

            (

                new FormattedText

                (

                    Number.ToString(),

                    CultureInfo.CurrentCulture,

                    FlowDirection.LeftToRight,

                    new Typeface("Arial"),

                    12,

                    SystemColors.WindowTextBrush

                ),

                new Point(0, 0)

            );

        }

    }

}

 

 

정의한 CustomElement 를 아래와 같이 사용하면 Number 에 정의한 내용이 화면에 표시됩니다.

<Window x:Class="WpfApp.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:src="clr-namespace:WpfApp"

        mc:Ignorable="d"

        Title="MainWindow" Height="450" Width="800">

    <DockPanel>

        <src:CustomElement Number="50"/>

    </DockPanel>

</Window>

 

 

 

728x90
반응형
728x90
반응형

Binding 은 컨트롤과 엘리먼트를 데이터에 연결시켜주는 기술로

타겟 컨트롤 변화에 따라 소스 컨트롤에 변화를 줄 수 있습니다.

 

아래 예시를 보면 ScrollBar 에 변화값을 Label 의 Content 에 반영하고 있는 코드입니다.

 

 

        <StackPanel>

            <ScrollBar

                 Name="scrollBar"

                 Orientation="Horizontal"

                 Margin="24"

                 Maximum="100"

                 LargeChange="10"

                 SmallChange="1" />

            <Label

                 HorizontalAlignment="Center"

                 Content="{Binding ElementName=scrollBar, Path=Value}" />

        </StackPanel>

 

 

아래처럼 DataContext 를 이용해 자식요소들의 ElementName 을 미리 정의할수 있습니다.

 

        <StackPanel DataContext="{Binding ElementName=scrollBar}">

            <ScrollBar

                 Name="scrollBar"

                 Orientation="Horizontal"

                 Margin="24"

                 Maximum="100"

                 LargeChange="10"

                 SmallChange="1" />

            <Label

                 HorizontalAlignment="Center"

                 Content="{Binding Path=Value}" />

            <Button

                 HorizontalAlignment="Center"

                 Margin="24"

                 FontSize="{Binding Path=Value}">

                Bound Button

            </Button>

        </StackPanel>

 

Label 과 Button 에 ElementName 을 지정하지 않아도 부모 StakPanel 의 DataContext 에 정의된 ElementName 을 사용하게 됩니다.

 

 

 

아래처럼 ScrollBar 가 StakPanel 을 벗어나도 상관없다.

 

<Window x:Class="WpfApp.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        mc:Ignorable="d"

        Title="MainWindow" Height="450" Width="800">

    <StackPanel x:Name="stackPanel">

        <ScrollBar

                 Name="scrollBar"

                 Orientation="Horizontal"

                 Margin="24"

                 Maximum="100"

                 LargeChange="10"

                 SmallChange="1" />

        <StackPanel DataContext="{Binding ElementName=scrollBar}">

            <Label

                 HorizontalAlignment="Center"

                 Content="{Binding Path=Value}" />

            <Button

                 HorizontalAlignment="Center"

                 Margin="24"

                 FontSize="{Binding Path=Value}">

                Bound Button

            </Button>

        </StackPanel>

    </StackPanel>

</Window>

 

 

 

 

728x90
반응형

+ Recent posts