[Surface] FlowDocument 사용하기

WPF에서 이런식으로 스토리를 보여주고 싶었다.(이건 완성된버전 ㅋㅋ)

 

 

이건 그냥 TextBlock으로 되는것이 아니다.

 

그래서 FlowDocument를 사용하였다..

 

일단 xaml에서 이렇게 코딩을 했다.

 

<FlowDocumentScrollViewer Grid.Row="1" Grid.ColumnSpan="2" VerticalScrollBarVisibility="Hidden" >

    <FlowDocument Background="Transparent">                                        

        <Paragraph FontFamily="Bell MT" FontSize="24" x:Name="DescriptionParagraph">

            <Floater Width="500"  HorizontalAlignment="Left">                            

                <BlockUIContainer>

                    <Rectangle Height="250" />

                </BlockUIContainer>

            </Floater>

            One Day, most of the town’s roads are ruined by the heavy rain. On that day, school bus-Schoobi happens to be late because of constructions on the road. Worrying that children may be waiting at the bus stop, Schoobi drives through the traffic with full speed, even though other cars are starring at him in a disapproving manner. Schoobi gets to a costal road, however, the road condition there is also messy. Dilly-dallying and regreting to go back. Schoobi ends up ramming into the guardail. Schoobi is now in the danger of falling down the cliff. Can Robocar Poli and his team save Schoobi?

        </Paragraph>

    </FlowDocument>

</FlowDocumentScrollViewer>

 

보면 알겠지만 FlowDocument에서 Paragraph를 사용하고 안에 Floater를 이용해서 안에 투명한 사각형을 왼쪽에 정렬하고 바깥쪽에 글을 입력하였다.

 

그럼 이제 안에 내용 Text를 계속 유동적으로 바꿔야 한다.

그럼 어떻게 해야할까? behind에서 수정하면 된다.

 

paragrah의 x:name을 DescriptionParagraph를 정의 했으니 이걸 변경하면 된다. 소스를 보자

 

private void SetDescriptionPlaceholder(string param)

        {

            DescriptionParagraph.Inlines.Remove(DescriptionParagraph.Inlines.Where(c => c is System.Windows.Documents.Run == true).Select(c => c).FirstOrDefault());

            DescriptionParagraph.Inlines.Add(param);

        }

 

이렇게 inline을 삭제하고 다시 추가하는 형식으로 바꾸었다.

 

이렇게 하면 끝~