동동이의 블러그

예전에 DataTemplateSelector라는거에 대해서 포스트 했었다.

그건 보여주는것에 대해서 DataTemplate을 유동적으로 바꾸는것이였다.

하지만 이번에 할것은 어떤 특정한 이벤트 예를 들어 ListBox의 Item에 버튼을 클릭하면 해당셀의 TextBlock이 수정할수 있는

TextBox로 변하게 한다등등 셀의 DateTemplate을 마음대로 변경할수 있다.

일단 listbox를 만든다. 하지만 난 여기서 ReorderListbox를 이용했음으로 reorderlistbox로 설명하겠다.

 <ct:ReorderListBox x:Name="listBox" Grid.Row="1" ItemsSource="{Binding Data}" Foreground="{StaticResource PhoneForegroundBrush}" IsReorderEnabled="True" ItemTemplate="{StaticResource MyAlbumDataTemplate}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="SelectionChanged">
                    <i:Interaction.Behaviors>
                        <ec:ConditionBehavior>
                            <ec:ConditionalExpression>
                                <ec:ComparisonCondition LeftOperand="{Binding SelectedIndex, ElementName=listBox}" Operator="NotEqual" RightOperand="-1"/>
                            </ec:ConditionalExpression>
                        </ec:ConditionBehavior>
                    </i:Interaction.Behaviors>
                    <i:InvokeCommandAction Command="{Binding SelectAlbumCommand}" CommandParameter="{Binding SelectedItem, ElementName=listBox}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </ct:ReorderListBox>

아래 selectChanged 이벤트는 무시해도 된다. 하지만 대부분 behind에서 하는 이벤트 처리를 xaml에서 하게 할수 있다(보너스)

그리고 리소스를 등록한다.

 <UserControl.Resources>
        <DataTemplate x:Key="TextBoxDataTemplate">
                <Grid d:DesignWidth="385" d:DesignHeight="100" Height="80" Margin="0,0,0,10">

                    <Button Content="R" x:Name="RenameButton" Click="RenameButton_Click" Grid.Column="1" >
                        <tk:ContextMenuService.ContextMenu>
                            <tk:ContextMenu>
                                <tk:MenuItem Header="변경" Click="RenameButton_Click"/>
                            </tk:ContextMenu>
                        </tk:ContextMenuService.ContextMenu>
                    </Button>

머 이렇식으로 시작해서 만들자 각각 다른것을 2개를 만들어야 한다. 한개는 일반꺼 한개는 클릭했을때 나오는 dataTempalate

자이제 DateTemplate 안에 클릭했을때 itemTemplate을 변경해보자

private void RenameButton_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            (listBox.ItemContainerGenerator.ContainerFromItem((sender as Button).DataContext as MyAlbum) as ReorderListBoxItem).ContentTemplate = this.Resources["TextBoxDataTemplate"] as DataTemplate;
            //(listBox.ItemContainerGenerator.ContainerFromIndex(0) as ListBoxItem).ContentTemplate = this.Resources["TextBoxDataTemplate"] as DataTemplate;
        }

아래는 index로도 바꿀수 있다는 예시를 했다. 이렇게 하면 해당셀의 ContentTemplate을 얻어올수 있고 직접 넣을수 있다.

참고 : http://stackoverflow.com/questions/329556/focus-on-a-textbox-in-a-datatemplate

보통 Linq는 List의 내용을 건드리지만

이처럼 StackPanel이나 GridPanel같은 컨트롤에서도 사용할수 있다.

예를 들어 StackPanel에 CheckBox를 add하고 그 체크박스의 특정 Content만을 뽑고 싶을땐 이렇게 한다.

var temp = SelectedSeatPanel.Children.OfType<CheckBox>().Where(c => c.Content.Equals((sender as CheckBox).Content)).FirstOrDefault();

바로 OfType<T>를 하면 되는것이다.

Where<(c as CheckBox) => ….)나

(CheckBox)c => …)이렇게 시도하는 초보가 없길 바란다.

WPF에서는 DataTemplateSelector가 기본적으로 제공되지만 윈폰은 없다 ㅡ.ㅡ;;

하지만 만들면 된다.

namespace GloryApp.Utils
{
    public abstract class DataTemplateSelector : ContentControl
    {
        public virtual DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            return null;
        }

        protected override void OnContentChanged(object oldContent, object newContent)
        {
            base.OnContentChanged(oldContent, newContent);

            ContentTemplate = SelectTemplate(newContent, this);
        }
    }
}

이렇게 DataTemplateSelcotr class를 만들고

namespace GloryApp.Utils
{
    public class ReserveTypeSelecter : DataTemplateSelector
    {
        public DataTemplate GeneralTrain { get; set; }

        public DataTemplate TransferTrain { get; set; }

        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            //var data = item as JrnyInfoModel;

            if (item == GeneralTrain)
            {
                return GeneralTrain;
            }
            else
            {
                return TransferTrain;
            }

            return base.SelectTemplate(item, container);
        }
    }
}

이렇게 사용할 Selector를 하나만들고 SelectTemplate 메소드 안에서 자기가 원하는 DataTemplate를 선택해서 return 할수 있다.

<ListBox x:Name="ReserveListBox" ItemsSource="{Binding ResultViewData}" Grid.Row="1" >             
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <st:ReserveTypeSelecter Content="{Binding}">
                            <st:ReserveTypeSelecter.GeneralTrain>
                                <DataTemplate>
                                    <Grid>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Text="{Binding h_run_dt, Converter={StaticResource ShortDateFormatWithWeekConverter}}" Foreground="White"  Margin="10,0,10,0"/>
                                            <StackPanel Margin="10,0,10,0" Width="50">
                                                <TextBlock Text="{Binding h_trn_clsf_cd, Converter={StaticResource TrainNameConverter}}" Foreground="White" />
                                                <TextBlock Text="{Binding h_trn_no}" Foreground="White" />
                                            </StackPanel>
                                            <StackPanel Margin="10,0,10,0" Width="50" >
                                                <TextBlock Text="{Binding h_dpt_rs_stn_nm}" Foreground="White" />
                                                <TextBlock Text="{Binding h_dpt_tm, Converter={StaticResource StringShortTimeConverter}}" Foreground="White" />
                                            </StackPanel>
                                            <StackPanel Margin="10,0,10,0" Width="50">
                                                <TextBlock Text="{Binding h_arv_rs_stn_nm}" Foreground="White" />
                                                <TextBlock Text="{Binding h_arv_tm, Converter={StaticResource StringShortTimeConverter}}" Foreground="White" />
                                            </StackPanel>
                                            <TextBlock Text="{Binding LimitDate}" Foreground="red"  Margin="10,0,10,0"/>
                                        </StackPanel>
                                    </Grid>
                                </DataTemplate>
                            </st:ReserveTypeSelecter.GeneralTrain>
                            <st:ReserveTypeSelecter.TransferTrain>
                                <DataTemplate>
                                    <Grid>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Text="{Binding h_run_dt, Converter={StaticResource ShortDateFormatWithWeekConverter}}" Foreground="White"  Margin="10,0,10,0"/>
                                            <StackPanel Margin="10,0,10,0" Width="50">
                                                <TextBlock Text="{Binding h_trn_clsf_cd, Converter={StaticResource TrainNameConverter}}" Foreground="White" />
                                                <TextBlock Text="{Binding h_trn_no}" Foreground="White" />
                                            </StackPanel>
                                            <StackPanel Margin="10,0,10,0" Width="50" >
                                                <TextBlock Text="{Binding h_dpt_rs_stn_nm}" Foreground="White" />
                                                <TextBlock Text="{Binding h_dpt_tm, Converter={StaticResource StringShortTimeConverter}}" Foreground="White" />
                                            </StackPanel>
                                        </StackPanel>
                                    </Grid>
                                </DataTemplate>
                            </st:ReserveTypeSelecter.TransferTrain>
                        </st:ReserveTypeSelecter>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

이제 xaml에서는 이렇게 2개의 DataTemplate을 넣어준다.

그래서 선택할수 있다.

참조 : http://windowsphonegeek.com/articles/Implementing-Windows-Phone-7-DataTemplateSelector-and-CustomDataTemplateSelector

소스 :

WP7SampleProject10.zip