Как связать ItemsSource с ComboBox в ControlTemplate?

Question

Ситуация

Мне нужно изменить содержимое элемента Flyout в GridView.Поэтому я создаю ControlTemplate в Page.Resources и устанавливаю его в ContentControl, который находится внутри Flyout.

Задача

У меня есть ComboBox в ControlTemplate.Теперь я хочу установить ItemsSource из ComboBox в List<string> (_easingType), который объявлен в MainPage

Вопрос

Как связать / установить ItemsSourceиз ComboBox в ControlTemplate?

код

Я удалил ненужные части кода

XAML

<Page.Resources>
    <ControlTemplate x:Key="BlurEditFlyout">
        ....
        <ComboBox ItemsSource="{Bind it to the _esaingType}" />
        ....
    <ControlTemplate x:Key="BlurEditFlyout">
</Page.Resources>

<GridView ItemsSource="{x:Bind _items}">
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="local:MethodData">
            <StackPanel>
                ....
                <Button Visibility="{x:Bind EditButtonVisibility}">
                    <Button.Flyout>
                        <Flyout>
                            <Flyout.FlyoutPresenterStyle>
                                <Style TargetType="FlyoutPresenter">
                                    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
                                    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
                                </Style>
                            </Flyout.FlyoutPresenterStyle>
                            <ContentControl Template="{x:Bind FlyoutTemplate}"/>
                        </Flyout>
                    </Button.Flyout>
                    <SymbolIcon Symbol="Edit"/>
                </Button>
                ....
            </StackPanel>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

Код позади

public sealed partial class MainPage : Page
{

    ObservableCollection<MethodData> _items = new ObservableCollection<MethodData>();
    List<string> _easingType = new List<string>(Enum.GetNames(typeof(EasingType)).ToArray());
    Dictionary<MethodName, ControlTemplate> _buttonFlyoutDictionary = new Dictionary<MethodName, ControlTemplate>();

    public MainPage()
    {
        this.InitializeComponent();

        LoadFlyoutResources();

        _items.Add(GetMethodData(MethodName.Blur));
    }

    private void LoadFlyoutResources()
    {
        _buttonFlyoutDictionary.Add(MethodName.Blur, (ControlTemplate)Resources["BlurEditFlyout"]);
        .....
    }

    private MethodData GetMethodData(MethodName methodName)
    {
        _buttonFlyoutDictionary.TryGetValue(methodName, out ControlTemplate flyoutTemplate);
        return new MethodData(methodName, flyoutTemplate);
    }
}

public class MethodData
{
    public string Name { get; set; }
    public ControlTemplate FlyoutTemplate { get; set; }
    public Visibility EditButtonVisibility { get; set; }

    public MethodData(MethodName name, ControlTemplate flyoutTemplate)
    {
        Name = name.ToString();
        FlyoutTemplate = flyoutTemplate;
        EditButtonVisibility = (name == MethodName.Then) ? Visibility.Collapsed : Visibility.Visible;
    }
}

public enum MethodName
{
    Blur,
    ....
}

Полный код

AnimationSetSamplePage.zip

Answer 1

Ваш DataContext в элементе управления Flyout фактически является каждым элементом в "_items".Вы захотите создать прокси DataContext, чтобы получить доступ к DataContext вашей страницы.Вы можете перейти по любой из этих двух ссылок для создания прокси.

https://weblogs.asp.net/dwahlin/creating-a-silverlight-datacontext-proxy-to-simplify-data-binding-in-nested-controls

http://www.thomaslevesque.com/2011/03/21/wpf-how-to-bind-to-data-when-the-datacontext-is-not-inherited/

Суть в том, что вы захотите создать проксичто вы можете ссылаться как статический ресурс.Перейдя по первой ссылке, вы сделаете что-то вроде этого:

public class DataContextProxy : FrameworkElement
{
    public DataContextProxy()
    {
        this.Loaded += new RoutedEventHandler(DataContextProxy_Loaded);
    }

    void DataContextProxy_Loaded(object sender, RoutedEventArgs e)
    {
        Binding binding = new Binding();
        if (!String.IsNullOrEmpty(BindingPropertyName))
        {
            binding.Path = new PropertyPath(BindingPropertyName);
        }
        binding.Source = this.DataContext;
        binding.Mode = BindingMode;
        this.SetBinding(DataContextProxy.DataSourceProperty, binding);             
    }

    public Object DataSource
    {
        get { return (Object)GetValue(DataSourceProperty); }
        set { SetValue(DataSourceProperty, value); }
    }

    public static readonly DependencyProperty DataSourceProperty =
        DependencyProperty.Register("DataSource", typeof(Object), typeof(DataContextProxy), null);


    public string BindingPropertyName { get; set; }

    public BindingMode BindingMode { get; set; }

}

Вы должны использовать public модификатор доступа для _easingType

public List<string> _easingType = new List<string>(Enum.GetNames(typeof(EasingType)).ToArray());

В MainPage.xaml

<Page.Resources>        
    <local:DataContextProxy x:Key="DataContextProxy" />
    <ControlTemplate x:Key="BlurEditFlyout">
        ....
        <ComboBox ItemsSource="{Binding Source={StaticResource DataContextProxy}, Path=DataSource._easingType}" />
        ....
    <ControlTemplate x:Key="BlurEditFlyout">
</Page.Resources>
...

Answer 2

Как связать / установить ItemsSource ComboBox в ControlTemplate?

Я не уверен, есть ли у вас глубокие причины для того, чтобы задать этот вопрос, но напрямую ответить на этот вопрос,мы могли бы просто установить список строк _esaingType в качестве значения свойства DataContext и связать его.Например:

XAML

<Page.Resources>
    <ControlTemplate TargetType="FlyoutPresenter"  x:Key="BlurEditFlyout" >
      ...                   
                <ComboBox ItemsSource="{Binding}" />
      ...
    </ControlTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
    <Button>
        <Button.Flyout>
            <Flyout>
                <Flyout.FlyoutPresenterStyle>
                    <Style TargetType="FlyoutPresenter">
                        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
                        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
                        <Setter Property="Template" Value="{StaticResource BlurEditFlyout}">                                
                        </Setter>
                    </Style>
                </Flyout.FlyoutPresenterStyle>
                <!--<ContentControl Template="{StaticResource BlurEditFlyout}"/>-->
            </Flyout>
        </Button.Flyout>
        <SymbolIcon Symbol="Edit"/>
    </Button> 
</Grid>

Кодекс

List<string> _easingType = new List<string>();  
public MainPage()
{
   this.InitializeComponent();
   _easingType.Add("test2");
   _easingType.Add("test1");
   this.DataContext = _easingType;
}

Любые вопросы по этому поводу или любые проблемы при использовании этого на вашей стороне, пожалуйста, скажите мне, я будуследить во времени.Более подробную информацию см. В справочнике Глубина привязки данных .