windows phone上的flipview 8.1错误＆＃34;名称＆＃39;＆＃39;在当前背景下不存在＆＃34;

时间：2016-11-22 03:28:13

标签： c# windows-phone-8.1 flipview

我有一个包含照片，descbox，detailBtn，hideBtn的flipview。我想如果照片点击，那么descbox和hideBtn出现，而detailBtn没有出现。如果照片再次点击，则descbox和hideBtn不会出现，而detailBtn看起来。 或者，如果单击detailBtn，则会出现descbox和hideBtn，而detailBtn不会出现。如果单击hideBtn，则不显示descbox和hideBtn，同时出现detailBtn。

我使用以下代码：

private async void NavigationHelper_LoadState(object sender, LoadStateEventArgs e)
        {                
            var item = await NatureDataSource.GetItemAsync((String)e.NavigationParameter);
        var group = await NatureDataSource.GetGroupByItemAsync(item);
        this.DefaultViewModel["Group"] = group;
        this.DefaultViewModel["Item"] = item;
        }

 public bool _IsOn;
        public bool IsOn
        {
            get
            {
                return _IsOn;
            }
            set
            {
                _IsOn = value;
            }
        }

        private void photo_Tapped(object sender, TappedRoutedEventArgs e)
        {
            IsOn = !IsOn;
            if (!IsOn)
            {
                descbox.Visibility = Visibility.Collapsed;
                detailBtn.Visibility = Visibility.Visible;
                hideBtn.Visibility = Visibility.Collapsed;
            }
            else
            {
                descbox.Visibility = Visibility.Visible;
                detailBtn.Visibility = Visibility.Collapsed;
                hideBtn.Visibility = Visibility.Visible;
            }
        }

private void detailBtn_Tapped(object sender, TappedRoutedEventArgs e)
        {
            descbox.Visibility = Visibility.Visible;
            detailBtn.Visibility = Visibility.Collapsed;
            hideBtn.Visibility = Visibility.Visible;
        }

但是出现如下错误消息： error message

XAML：

<FlipView x:Name="narrowFlipview" Grid.Row="1" ItemsSource="{Binding Group.Items}" SelectedItem="{Binding Item, Mode=TwoWay}" Foreground="{x:Null}">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Grid x:Name="ContentRoot">
                        <Grid.ChildrenTransitions>
                            <TransitionCollection>
                                <EdgeUIThemeTransition Edge="Left"/>
                            </TransitionCollection>
                        </Grid.ChildrenTransitions>
                        <ScrollViewer x:Name="myScroll" VerticalScrollBarVisibility="Auto" Margin="0,0,0,0" VerticalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" ZoomMode="Enabled" MinZoomFactor="1" HorizontalScrollMode="Auto">
                            <StackPanel Height="325" Width="558">
                                <Image x:Name="photo" Source="{Binding ImagePath}" Stretch="Uniform" Height="320" Tapped="photo_Tapped" Margin="0,0,0.333,0" />
                                <Border x:Name="descbox" Background="#A52C2C2C" Height="120" VerticalAlignment="Bottom" Visibility="Collapsed" Margin="0,-120,0,0">
                                    <ScrollViewer VerticalScrollMode="Auto" Height="auto" HorizontalScrollBarVisibility="Visible">
                                        <StackPanel Width="538">
                                            <TextBlock x:Name="desc" Text="{Binding Description}" FontFamily="verdana" FontSize="17" Foreground="#CCFFFFFF" TextWrapping="Wrap" Padding="0,10" TextAlignment="Justify" Height="auto"/>
                                        </StackPanel>
                                    </ScrollViewer>
                                </Border>
                                <Image x:Name="detailBtn" Source="images/media/arrow_up.png" Margin="0,-40,0,0" Height="40" Width="40" HorizontalAlignment="Right" Tapped="detailBtn_Tapped"/>
                                <Image x:Name="hideBtn" Source="images/media/arrow_down.png" Margin="0,-285,0,0" Height="40" Width="40" HorizontalAlignment="Right" Visibility="Collapsed" Tapped="hideBtn_Tapped"/>
                            </StackPanel>
                        </ScrollViewer>
                    </Grid>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

如何处理？

注意： 我尝试使用Photo and description on Flipview中的方式，但在Windows Phone 8.1上无法使用

1 个答案:

答案 0 :(得分：0)

您收到错误“descbox”，而其他错误在当前上下文中不存在，因为它们是DataTemplate的UIElements部分的名称。 dataTemplate仅在运行时加载。您希望实现的目标可以通过数据绑定和MVVM概念实现，而不是那么复杂。

我已根据您使用数据绑定在问题中提供的数据为您创建了一个解决方案。我已经跳过MVVM部分，因为它足够大，可以回答。所以开始......

更新的XAML

根据您的代码项目，您可以通过为按钮添加DataBinding来更改一些内容。如下所示：

<FlipView x:Name="narrowFlipview" Grid.Row="1" ItemsSource="{Binding Group.Items}" SelectedItem="{Binding Item, Mode=TwoWay}"  Foreground="{x:Null}">
        <FlipView.ItemTemplate>
            <DataTemplate>
                <Grid x:Name="ContentRoot">
                    <Grid.ChildrenTransitions>
                        <TransitionCollection>
                            <EdgeUIThemeTransition Edge="Left"/>
                        </TransitionCollection>
                    </Grid.ChildrenTransitions>
                    <ScrollViewer x:Name="myScroll" VerticalScrollBarVisibility="Auto" Margin="0,0,0,0" VerticalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" ZoomMode="Enabled" MinZoomFactor="1" HorizontalScrollMode="Auto">
                        <StackPanel Height="325" Width="558">
                            <Image x:Name="photo" Source="{Binding ImagePath}" Stretch="Uniform" Height="320" Tapped="photo_Tapped" Margin="0,0,0.333,0" />
                            <Border x:Name="descbox" Background="#A52C2C2C" Height="120" VerticalAlignment="Bottom" Visibility="{Binding IsDescriptionVisible,Converter={StaticResource boolToVisibilityConverter}}" Margin="0,-120,0,0">
                                <ScrollViewer VerticalScrollMode="Auto" Height="auto" HorizontalScrollBarVisibility="Visible">
                                    <StackPanel Width="538">
                                        <TextBlock x:Name="desc" Text="{Binding Description}"  FontFamily="verdana" FontSize="17" Foreground="#CCFFFFFF" TextWrapping="Wrap" Padding="0,10" TextAlignment="Justify" Height="auto"/>
                                    </StackPanel>
                                </ScrollViewer>
                            </Border>
                            <AppBarButton x:Name="detailBtn" Icon="Upload" Margin="0,-40,0,0" Height="40" Width="40" HorizontalAlignment="Right" Visibility="{Binding IsDescriptionVisible,Converter={StaticResource boolToInverseVisibilityConverter}}" Click="DetailsBtn_Click"/>
                            <AppBarButton x:Name="hideBtn" Icon="Download"  Margin="0,-285,0,0" Height="40" Width="40" HorizontalAlignment="Right" Visibility="{Binding IsDescriptionVisible,Converter={StaticResource boolToVisibilityConverter}}" Click="HideBtn_Click"/>
                        </StackPanel>
                    </ScrollViewer>
                </Grid>
            </DataTemplate>
        </FlipView.ItemTemplate>
    </FlipView>

注意：有UI失败，因为边距不正确，但那是你的代码。尽量不要将Margins用于适应性布局。您可以参考我的答案here了解更多详情。

相同的守则：

我已经改变了点击事件被触发时的操作。出于参考原因，我已将您的代码留下评论。守则的变更如下：

    private void photo_Tapped(object sender, TappedRoutedEventArgs e)
    {
        var currentItem = narrowFlipview.SelectedItem as WaterfallDataItem;
        currentItem.IsDataVisible = !currentItem.IsDataVisible;
        //IsOn = !IsOn;
        //if (!IsOn)
        //{
        //    descbox.Visibility = Visibility.Collapsed;
        //    detailBtn.Visibility = Visibility.Visible;
        //    hideBtn.Visibility = Visibility.Collapsed;
        //}
        //else
        //{
        //    descbox.Visibility = Visibility.Visible;
        //    detailBtn.Visibility = Visibility.Collapsed;
        //    hideBtn.Visibility = Visibility.Visible;
        //}
    }



    private void DetailsBtn_Click(object sender, RoutedEventArgs e)
    {
        var currentItem = narrowFlipview.SelectedItem as WaterfallDataItem;
        currentItem.IsDescriptionVisible = true;
    }

    private void HideBtn_Click(object sender, RoutedEventArgs e)
    {
        var currentItem = narrowFlipview.SelectedItem as WaterfallDataItem;
        currentItem.IsDescriptionVisible = false;
    }

WaterfallDataItem类更改：

我添加了界面INotifyPropertyChanged并添加了两个新属性IsDataVisible和IsDescriptionVisible，这些属性会在PropertyChanged事件发生变化时引发它们。

 public class WaterfallDataItem:INotifyPropertyChanged
{
    public WaterfallDataItem(String uniqueId, String title, String imagePath, String description, String content)
    {
        this.UniqueId = uniqueId;
        this.Title = title;
        this.Description = description;
        this.ImagePath = imagePath;
        this.Content = content;
    }

    public string UniqueId { get; private set; }
    public string Title { get; private set; }
    public string Description { get; private set; }
    public string ImagePath { get; private set; }
    public string Content { get; private set; }

    //for the image tap to show description functionality
    private bool isDataVisible;
    public bool IsDataVisible
    {
        get { return isDataVisible; }
        set
        {
            isDataVisible = value;
            if (value)
                IsDescriptionVisible = true;
            RaisePropertyChanged("IsDataVisible");
        }
    }

    //for hide and show the details pannel and hide and show content based on that
    private bool isDescriptionVisible;
    public bool IsDescriptionVisible
    {
        get { return isDescriptionVisible; }
        set { isDescriptionVisible = value; RaisePropertyChanged("IsDescriptionVisible"); }
    }

    //raises the event to the view if any of these properties change
    public event PropertyChangedEventHandler PropertyChanged;
    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public override string ToString()
    {
        return this.Title;
    }
}

请注意：PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));仅适用于Visual Studio 2015中提供的C＃6.0。对于您必须使用的任何版本

if (PropertyChanged != null)
{
    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}

因为新的Null Condition运算符仅在C＃6.0中可用。有关c＃6.0中的新功能的更多信息，请参阅this

转换器：

转换器用于将属性中的true或false值转换为可见性

 public class boolToVisibilityConverter : IValueConverter
{
    public bool isInverseReq { get; set; }
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        bool val = (bool)value;
        if(isInverseReq)
        {
            if (val)
                return Visibility.Collapsed;
            else
                return Visibility.Visible;
        }
        else
        {
            if (val)
                return Visibility.Visible;
            else
                return Visibility.Collapsed;
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

App.xaml

最后为了使转换器工作，我们需要将转换器添加到app.xaml。修改Application.Resources，如下所示：

<Application.Resources>
    <local:boolToVisibilityConverter x:Key="boolToVisibilityConverter" isInverseReq="False"/>
    <local:boolToVisibilityConverter x:Key="boolToInverseVisibilityConverter" isInverseReq="True"/>
</Application.Resources>

请注意，所有类都只是在主项目中没有子文件夹，所以如果你将类和转换器放在一些不同的命名空间中，请记得更新xaml上的xmlns:标签

编辑：使解决方案有效：

至少你可以在代码中更改一些内容以使其正常工作，我已在答案中进行了更改。上述更改可让您在不更改代码的情况下实现功能。如果我遗漏了任何东西，请告诉我。

相关问题
最新问题